Django and Vue is modern famous technology to create single page or semi-single page application. Python django framework generally use for large scale multiple page web applications. In multi page application, some pages need features of single page application. For example: In a multi page course or tutorial website course reading sections has side bar menu. Where course topics are listed. When user click a topic we can dynamicly load content of that topic without loading full page. This is a perfect use case of single page applications feature in multi page applications.
Vue is very light bit that can we integrate in django template using cdn. No need to install npm to use vue js in django template.
Vue CDN:
<script src="https://unpkg.com/vue@3"></script>Vue cdn should use in django template inside body tag.
I'm assuming you are already know basic about django. So I'm skipping a basic view creating step in django. You should first create a view and I'm starting this article from that view's corresponding template.
{% load static %}
<html>
<head>
<title>Vue in django template </title>
</head>
<body>
<div id="app">
</div>
</body>
</html>This is a very basic template of django Now it's time to add vue cdn in this template.
Add Vue CDN in django template:
{% load static %}
<html>
<head>
<title>Vue in django template </title>
</head>
<body>
<div id="app">
</div>
<script src="https://unpkg.com/vue@3"></script>
</body>
</html>Now we will integrate vue with a div tag which id is "app". This id name you can change as you wish. Vue can just work in this div.
Vue integrate in django template div tag with custom delimiter:
<script>
let app = Vue.createApp({
delimiters: ["[[", "]]"],
})
app.mount('#app')
</script>This is a basic code to vue js that integrate in a specific div tag.
We change the delimiter of vue. Because is django we use "{{ }}" this symbol to load dynamic data or load data from python. And vue also use same syntax. So that create different issues. After changing delimiter we should use "[[ ]]" this symbol to load vue data.
Place vue connecting code in django template:
{% load static %}
<html>
<head>
<title>Vue in django template </title>
</head>
<body>
<div id="app">
</div>
<script src="https://unpkg.com/vue@3"></script>
<script>
let app = Vue.createApp({
delimiters: ["[[", "]]"],
})
app.mount('#app')
</script>
</body>
</html>
Load Vue variable in djagno template:
{% load static %}
<html>
<head>
<title>Vue in django template </title>
</head>
<body>
<div id="app">
<p> [[ message ]] </p>
</div>
<script src="https://unpkg.com/vue@3"></script>
<script>
let app = Vue.createApp({
delimiters: ["[[", "]]"],
data() {
return {
message: 'Vue integrate with django template',
};
},
})
app.mount('#app')
</script>
</body>
</html>Output: It will show "Vue integrate with django template" in browser
Vue handle click event in django template:
{% load static %}
<html>
<head>
<title>Vue in django template </title>
</head>
<body>
<div id="app">
<p> [[ message ]] </p>
<button @click="update_message">click me </button>
</div>
<script src="https://unpkg.com/vue@3"></script>
<script>
let app = Vue.createApp({
delimiters: ["[[", "]]"],
data() {
return {
message: 'Vue integrate with django template',
};
},
methods: {
update_message() {
console.log("button click");
this.message = "Educodiv";
}
}
})
app.mount('#app')
</script>
</body>
</html>