I am trying to implement vuejs in a current django project. It kind of worked. However I wanted a cleaner structure and use vuejs ponents.

However the ponents are not showing up in the frontend.

So here I have my basic vue ponent (from the vueify-laravel example)

<template>
    <div>
        <h1>Hello, {{ name }}</h1>
        <input type="text" v-model="name">
    </div>
</template>

<script>
    export default {
        data: function() {
            return {
                name: 'Laracasts'
            };
        }
    };
</script>

<style>
    h1 {
        color: red;
    }
</style>

In my app.js I have

var Vue = require('vue')
import Greeter from './ponents/Greeter.vue'

new Vue({
    el: '#app',

    ponents: {
        greeter: Greeter
    }
});

And finally in one of my django templates

<div id="app">
    <greeter></greeter>
</div>

I have vue dev tools installed, and it shows me the root node and then the greeter node. But nothing in it. And the app container is empty too.

I am trying to implement vuejs in a current django project. It kind of worked. However I wanted a cleaner structure and use vuejs ponents.

However the ponents are not showing up in the frontend.

So here I have my basic vue ponent (from the vueify-laravel example)

<template>
    <div>
        <h1>Hello, {{ name }}</h1>
        <input type="text" v-model="name">
    </div>
</template>

<script>
    export default {
        data: function() {
            return {
                name: 'Laracasts'
            };
        }
    };
</script>

<style>
    h1 {
        color: red;
    }
</style>

In my app.js I have

var Vue = require('vue')
import Greeter from './ponents/Greeter.vue'

new Vue({
    el: '#app',

    ponents: {
        greeter: Greeter
    }
});

And finally in one of my django templates

<div id="app">
    <greeter></greeter>
</div>

I have vue dev tools installed, and it shows me the root node and then the greeter node. But nothing in it. And the app container is empty too.

• javascript
• django
• vue.js

• 1 The code seems to be ok. Please, check your browserify options. – pespantelis Commented Nov 29, 2015 at 16:43

1 Answer 1

If the template is ing from django then you have to escape the {{ and }}. To turn off the template parsing use {% verbatim %} or you can also use {% templatetag openvariable %} (and then closevariable).

try:

{% verbatim %}
<template>
    <div>
        <h1>Hello, {{ name }}</h1>
        <input type="text" v-model="name">
    </div>
</template>
{% endverbatim %}