Adding Vue to an existing Django app is super easy, and a great way to enable more complex front-end features. In this post, we’ll see how to do it the easy way.

Why Add Vue?

We’ll get to the code in a minute, but first it’s worth asking — “Why add Vue to your Django project?”

If you just want to add some effects or dynamically render something on the page, vanilla JavaScript is probably a better bet. Just add a script tag to your page and try to do the manipulations from there.

However, if you have a whole section of the page that needs to share data and re-render often when the user interacts with it, then you probably have a use case for a JavaScript framework, and Vue is a great choice!

Vue allows you to:

• Dynamically render text onto the page (like Django templates, but interactive!)
• Update the CSS, classes, & attributes of various elements on the page
• Define “components,” whole sections of a web page, that render dynamically and are reusable
• Build/restore the state of components based on properties (“props”) that you pass from the server-side or fetch via a REST API

Build your first REST API with Django REST Framework

Vue is really cool and fairly easy to learn. It’s similar to learning React, but with a less steep learning curve and easier to set up.

New to React? You Need to Understand These Key Concepts Before Anything Else

This isn’t a Vue tutorial, so to learn Vue you’ll want to visit the official guide (which is really well done and easy to follow).

Introduction - Vue.js

Let’s see how to add Vue to Django!

Create a New Django App Before We Start

Before we can add Vue to Django, we need a Django project! I’ll use this project for all the examples that follow.

If you have an existing Django app, you don’t need to copy this. But you should read it just so you know what my app structure looks like.

1.1 Virtual Environment

I use pyenv and pyenv-virtualenv for my environments:

$ pyenv virtualenv vue-app

Looking in links: /var/folders/tz/tjybwp513hd5zvdh166kbwnw0000gn/T/tmp2ler_knw
Requirement already satisfied: setuptools in /Users/bennettgarner/.pyenv/versions/3.8.0/envs/vue-app/lib/python3.8/site-packages (41.2.0)
Requirement already satisfied: pip in /Users/bennettgarner/.pyenv/versions/3.8.0/envs/vue-app/lib/python3.8/site-packages (19.2.3)
$ pyenv local vue-app

#software-development #javascript #web-development #programming #vue #django