How to use Vue and Django together?

How to use Vue and Django together?

Published 17. jun 2018 07:35 by Stein Ove Helset

There are many ways to use Vue and Django together and in this post we're going to go over a couple of them. Django and Vue are two of my favorite frameworks from two different worlds. Combining them is not a big challenge, but there are a few thing you need to think about.

Integrate Vue into Django templates

The easiest way to integrate Vue into Django is to just include the Vue script in your html code.
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

Once this is done you can start to create your Vue app and components. Try to do something like this:
<html>
<head>
<script src="https://unpkg.com/vue"></script>
<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})
</script>
</head>

<body>
<div id="app">
  <p>{{ message }}</p>
</div>
</body>
</html>

You might notice that when you run this the "message" will not show. This is because of the similar syntax between Django's template language and Vue. There is a very simple way of fixing this by changing the delimiters for the Vue app. Replace {{ message }} with [[ message ]] in the template and then add this line inside your script tag:
el: '#app',
delimiters: ['[[', ']]'],
data: {

Instead of [[ ]] you can use almost whatever you think is best for you, but [[ ]] is similar to {{ }}. So that causes me the least confusion at least. Now you're ready to start building your Django-Vue app :-)

Standalone Vue app using Vue CLI

Another way of intergrating Vue is to set up a standalone Vue instance on a separate server. This is done by setting up a Vue project using the CLI and pull data from your Django application using an API. To get started with this you need to install Vue using webpack:
$ npm install -g vue-cli
$ vue init webpack django-vue
$ cd django-vue
$ npm install
$ npm run dev

Fill in the information of the project name, description, etc when you're prompted. "npm run dev" will start a webserver locally which you can test by opening http://localhost:8080/ in your favorite browser.

You're now ready to start pulling data from your Django application. This is not covered in this tutorial, but a hint is to look at Axios. This is a helper library for communicating with a server using Ajax.

Django webpack loader

I'm not going into much details about this way of integrating Vue with Django because this is already covered very well in the readme for this project. You can find the project here:
https://github.com/owais/django-webpack-loader
Here you'll find anything from installation information to tips on how to use this in a production environment.

A very smart thing to remember when using Django webpack loader is that it's seemlessly integrated into your project and that means that you can still use Django's sessions, csrf and some more functionality. This makes authentication much simpler.

Summary

This is three different way of using Django and Vue together. I'm sure there are many more ways of doing it and there is no best way of doing it, you do what fits your project the best.
Do you have any experience with any of these ways?

Share this post

Comments

John

30. jun 2018 21:39

This might be interesting for the django-webpack-loader usecase: https://robinverton.de/blog/2018/06/22/django-vue.js-integration-as-a-widget/

Stein Ove Helset

01. jul 2018 18:47

Absolutely, John! That looks interesting. I have not thought about this my self before.

Add comment