Vue can easily integrate django template or any kind of html pages using CDN. Without npm, we can achieve all feature of Vue using Vue CDN. Also can use vue in a particular component like form, graph or any kind of dynamic data calling.

Vue CDN:

<script src="https://unpkg.com/vue@3"></script>

Add vue CDN in home.html:

{% extends "base.html" %}
{% load static %}
{% block content %}
<div>
    <p>We are learning Vue in django template from Educodiv</p>
</div>

<script src="https://unpkg.com/vue@3"></script>

{% endblock content %}

Vue integrate with django:

{% extends "base.html" %}
{% load static %}
{% block content %}
<div id="vue_app">
    <p>We are learning Vue in django template from Educodiv</p>
</div>

<script src="https://unpkg.com/vue@3"></script>

<script>
    let app = Vue.createApp({
        delimiters: ["[[", "]]"],
    })
    app.mount('#vue_app')
</script>

{% endblock content %}

Vue can integrate in a specific div. Providing a id “vue_app” in the div tag. Vue app is bind with is div. Outside that div we cannot use vue features.

Vue.createApp is a function that create a vue component. A vue component has multiple functions and variables. Here we changed default delimiter or vue. Because of Vue default delimiter is {{  }} that also use django template engine. So we changed vue delimiter. Now we can use [[ ]] syntax as vue delimiter. At last app mounted or integrated with “vue_app” div.

Vue create variable and show in html:

{% extends "base.html" %}
{% load static %}
{% block content %}
<div id="vue_app">
    <h1>[[ message ]]</h1>
    <p>We are learning Vue in django template from Educodiv</p>
</div>

<script src="https://unpkg.com/vue@3"></script>

<script>
    let app = Vue.createApp({
        delimiters: ["[[", "]]"],
        data() {
            return {
                "message" : "Vue is connected."
            }
        }
    })
    app.mount('#vue_app')
</script>

{% endblock content %}