If you have been a web developer for some time, eventually you realise you have been wasting a lot of time and doing things wrong (or at least making your life difficult) if you have not been using Django and VueJS.
Django being the backend where the data is stored and where resources are maintained, deleted and created. VueJS being the frontend where relevant data is displayed in a concise and logical way. They both do there respective duties pretty well…in my opinion like a dream.
They also both benefit from a relatively shallow learning curve to start with.
Getting these 2 great frameworks to play well together is an important part of creating a web application that is versatile and a joy to work with.
So without further ado…how do we get them working together
VueJS and Django a quick overview
There is a great presentation given by Andrew McCracken on this topic and a lot of the info in this blog post is derived from that presentation.
Something to keep in mind when thinking in the MVC context: With django the view is really the controller and the template is really the view.
So django already has the template part and VueJS is also a templating library amongst other thing, so there is a bit of overlap. However, if we create a frontend agnostic backend (An API) then they will work together much like how they were designed.
So Django can be used with the Django Rest Framework (DRF) to provide the API and Vue can be used with vue-resource to interact with the API.
Django, Vue and the template
One aspect which jumps right at you is that when displaying a variable from data in a template…both django and vue uses the {{ my_var }}double braces (for a reference on brackets, braces and parenthesis)
Django’s variables will be resolved first and it will break your intended template.
There is a horrible way to get around this that I have used:
{% templatetag openvariable %} build.fields.description {% templatetag closevariable %}
But there is a nicer way to do this by just changing the configuration in vue to use the square brackets instead of braces
In the global configuration add:
Vue.config.delimiters = ["[[", "]]"];
So Vue template tags can now be easily distinguished from django ones.
You can set this up in the vue instance with:
var app = Vue({
el: '#app',
delimiters: ['[[', ']]']
});
Other aspects
I am building out a project with a bit more than just including the pre-packaged Vue file and am using webpack to bring in Vue so a few issues will no doubt come up and I will post them
Getting Started VueJS
To bootstrap the project execute the following commands
sudo npm install -g vue-init
vue init webpack frontend
cd frontend/
npm install
npm run dev
This install vue-init so you can bootstrap your project which in this case I have called frontend
But now you must be thinking…well node is serving the site wouldn’t django be serving the site in my case. And yes, I think the same way but then maybe we won’t have access to the auto-reload and other features
Now after doing this I was Unsure…
About how to wire up Django and Vue with webpack, so I reached out to the community and Jarrod Hobbs suggested looking at django-webpack-loader
Bringing data into Django View
However if you want to keep things simple you can have django bring a queryset into your view instance.
The most simple way to do this provided the model does not have date or time fields:
from django.core.serializers import serialize
context_data['accounts'] = serialize('json',
Account.objects.filter(
user=self.request.user
)
)
Which would give serialised data of the form:
{'accounts': '[{"model": "app.model", "pk": 1, "fields": {"name": ' '"name", "capital_currency": "ZAR", "capital": ' '"100000.00", "strategy": 1, "broker": null, "user": 1, "slug": ' '"cfd-account", "risk_percentage": "1.00", "is_long_only": ' 'false}}]',}