How to integrate vuejs in a django project?

Question

we need to create a complete website with django and vue as part of a school project, however, we are having trouble integrating vue into our django project.

To keep things simple we want to use vue directly in an index.html file located in a django application in templates/app/index.html thanks to the vue cdn.

Without vue, the page content is displayed by django, but when we try to use vue with the cdn in this file, nothing is displayed and we get this error in the chrome console:

vue.global.js:1661 [Vue warn]: Component is missing template or render
function.

here is the code:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

    <div id="app">{{ message }}</div>

    <script>
        const { createApp } = Vue

        createApp({
            data() {
                return {
                    message: 'Hello Vue!'
                }
            }
        }).mount('#app')
    </script>

</body>

</html>

when we run the html file directly in chrome (outside of django) everything works, which means the problem comes from djangom. We suspect the problem is that django expects to run django templating code and not vuejs code.

Is it possible to use vue js in this way on django and if not, how to integrate vue with django?

Asked By: Karichi

||

Source

Answer 1

Vue.js and Django template language use the same delimiters ({{ and }}) by default. You need to change one of them to a different one, e.g. for Vue.js:

<div id="app">[[ message ]]</div>

<script>
    const { createApp } = Vue

    createApp({
        data() {
            return {
                message: 'Hello Vue!'
            }
        },

        delimiters: ['[[', ']]'],
    }).mount('#app')
</script>

Answered By: Dauros

How to integrate vuejs in a django project?

Question:

Answers: