CODEWITHSUNDEEP
javascriptdjangowebpackvue.js
musicformellons
musicformellons

Reputation: 13423

vue.js with Django-webpack-loader

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. enter image description here

enter image description here

However when I run my Django server I get the tag and not the Vue component: enter image description here

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?

Upvotes: 2

Views: 3727

Answers (1)

musicformellons
musicformellons

Reputation: 13423

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>

Upvotes: 3

Related Questions