Can i render VueJS with Django? - django

Question

I would like to add Vue to my Django project, but i'm having troubles understanding
some parts of it.
At the actual moment, my project already has a bunch of templates and views. Everything is rendered by the views, the only JS i'm using is for Jquery. The need to add Vue comes to improve my UI. I don't need Vue to be my frontend, i only want to add some Vue components to my templates here and there.
After making some research, i found about the Webpack + Vue approach. It's not the right approach for my project since it should be used for a project where the frontend is entirely built on Vue and is divided from the Django backend, so it is not the right way for me.
At this point, the only way to go would be to add it using the CDN on my django html template:
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.0"></script>
Would this approach be possible?

Answer 1

Yes, this is possible.
Just add the script inside your template:
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.0"></script>
And then you can initialize the Vue components inside other script tags. It is advisable to change interpolation brackets from {{ }} to [[ ]], to avoid conflict with Django templating engine.
<div id="example">
<p>[[ hello ]]</p>
</div>
<script>
new Vue({
el: '#example',
delimiters: ['[[', ']]'],
data: { hello: 'Hello World!' }
})
</script>