Is Django and Vue.js a good combination?

Is Django and Vue.js a good combination?

Published 23. jan 2019 07:06 by Stein Ove Helset

Django is a popular backend framework and Vue.js is a popular frontend framework. But are they any good together?

I have used Django for many years. I was introduced to Django when it was first released back in 2005. Django is for me the perfect web framework. It's easy to work with, the performance is incredible and the development cycle is so rapid. For many years I built websites using jQuery. But after a while, I felt that jQuery started to feel dated.

After Googling and reading a bit I found something called Angular. I started learning this framework, but I didn't like it. It felt so big and there were so many dependencies. Dependencies that didn't work and the build was so big. I was not happy with it.

A buddy at work suggested that I could take a look at a framework called Vue.js. It was love at first sight. It gave me the same feeling as Django first game me. It was easy to get started with and things just worked. I knew that this was something I wanted to learn more about.

How to use Django and Vue.js together?

There are multiple ways to use the two frameworks together. I'm going to go over a couple of the here in this blog post.

Integrate Vue into Django templates

The easiest and quickest way to integrate Vue into a Django project is just to include the Vue.js script in your templates.

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

Once this is done you can start to create your Vue app and components. Here's a little example of how you can do 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>

This is as basic as you can make a Vue.js example. When you run this example for the first time you'll see that it's not going to work as expected. 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. When that is out of the way, you're ready to start building Django and Vue.js apps!

Standalone Vue app using Vue CLI

Maybe the easiest approach isn't the best way for you. If you follow this approach you'll be able to build single-file components which will make your code easier to keep tidy and maintain. Here is how you 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.

Building an API using plain Django might not be the best solution for you. Therefor I would suggest that you take a look at a library called Django Rest Framework. This makes it super easy to build a Restful API for your Vue.js app.

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 seamlessly integrated into your project and that means that you can still use Django's sessions, CSFR, and some more functionality. This makes authentication much simpler.

Learning how to use Django and Vue.js together

I've written a few tutorials on this blog where I aim to teach you how to use the two frameworks together. Here is a complete tutorial where you learn how to build a todo list using Vue.js in the front and Django 2.0 in the back. https://ahackersday.com/blog/building-a-todo-app-using-vue-js-and-django-as-the-backend/

What's built using Django and Vue.js?

A site I built to learn people Vue.js is built using Vue.js in front and Django in the backend. You can find the site here: VueHero. Another site built using Django and Vue.js is a Norwegian site called FinnFido.

Have you created a site using Django and Vue.js? Let me know in a comment and I'll include it here on the site!

Share this post

Comments

Edgard

26. aug 2019 14:48

We are just making that transition to Vue.js now.

Stein Ove Helset

27. aug 2019 11:57

Nice, Edgar!
Let me know how the transition works out for you :-)

Add comment