vue.js with Django-webpack-loader

Question

I want to use vue.js with Django but get stuck how to integrate vue in the Django templates.

I manage to make a bundle with webpack, setup vue with a piece of html which I can open 'as file' in the browser and then vue components are shown. So that is working properly.

However when I run my Django server I get the tag and not the Vue component:

Maybe I am on the wrong track as I see others working with an Django REST api and then you might work differently with your templates. But I would prefer first to just integrate vue in my existing Django templates if possible!? I that possible and how should it be done?

test_html:

{% load render_bundle from webpack_loader %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Webpack Sample Project</title>



    {% render_bundle 'main' %}

</head>
<body>

<h3>[[ message ]]</h3>
kiekeboe


</body>
</html>

main.js:

import '../css/custom.css';
import Vue from 'vue';

Vue.config.delimiters = ["[[", "]]"];

new Vue({
    el: 'body',
    data: {
        message: "Hello Vue"
    }
});

Further info: I am currently using: https://github.com/owais/django-webpack-loader which includes all css, sass, other js libraries etc. via a render-bundle tag. As you can see the css-styling does come through, so I think vue tags should work in same manner?! Furthermore also static files from Django static folder can be used 'the normal way'. When putting the bundle.js in static folder and referring to it as:

<script type="text/javascript" src="{% static 'main-890ab68c2f63dd3f9a2a.js' %}"></script>

it DOES work. So why not via Django-webpack-loader?

It is just a static file. Where is it in relation to your Django code? How have you configured static files? What URL are you going to? How are you loading the JS in the template? — Daniel Roseman
@DanielRoseman I added info at the bottom of my question. Hope that helps. — musicformellons
@DanielRoseman As I got it working now with 'normal static folder', question is now why it does not work with django-webpack-loader. — musicformellons
django-webpack-loader is no longer maintained. I've been working on a replacement for it that is starting to gain traction and I def recommend trying it out: github.com/shonin/django-manifest-loader — Shonin

musicformellons musicformellons · Accepted Answer · 2016-05-27T14:53:05

I noticed that the vue.js reference needs somehow to come after the vue html tags. Same applies when using Django-web-loader, so {% render_bundle 'main' %} needs to go down. This got it working:

{% load staticfiles %}
{% load render_bundle from webpack_loader %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Webpack Sample Project</title>

</head>

<body>

<h3>[[ message ]]</h3>
kiekeboe

{% render_bundle 'main' %}

</body>
</html>

vue.js with Django-webpack-loader

1 Answers