Some Vue + Django tips

As I wrote last time, I currently develop a web app based on Django and Vue using the django-compressor-parceljs. I’d like to mention some small things that I’ve learned since last.

Vue in development mode

I found it interesting that parceljs described how to get Vue into development mode for several bundlers, but failed to mention parcel. After some digging around, I figured out that parcel respects the NODE_ENV environment variable, so starting the django server with NODE_ENV=development ./manage.py runserver does the trick. Now I get proper error messages from Vue.

Constantly rebundling

Another annoyance with the default configuration of the compressor, was that it compiles (bundles / compresses) the Vue files once every time the server is started. This really lengthened the change-build-test cycle time, so something needed to be done. It turns out that the solution is to set the COMPRESS_REBUILD_TIME to a really low value in the django settings, and the contents is compressed every time. I set it to one second on my development machine.

Disabling compression would break the Vue files, as the browser cannot run the Vue files natively, i.e. they need a compression to be possible to run.

The consequence of this configuration is that loading a view based on Vue takes a bit longer, but it takes way shorter time than restarting the django server, recreating the backend state and so on.

Exposing Django context to Javascript

Django exposes a set of context variables when loading a view. This avoids an unnecessary round-trip over the server to asynchronously request the info that I already know the view will need. I’ve developed a small convention for this.

In the Django template, I add something along these lines:

<script>
var context_title = '{{ title }}';
var context_actors = [
{% for actor in actors %}'{{ actor }}',
{% endfor %} ];
...
</script>

This copies the django context into Javascript space with the variable name prefix of context_. I then consume these in the Vue app’s mounted method, e.g.:

    ...
    mounted() {
        this.title = context_title;
        this.actors = context_actors;
        ...
    },
    ...

This copies the state into the state of the app, which means that it is now a part of what the Vue interface is reactive to.