CODEWITHSUNDEEP
djangovue.js
Jack022
Jack022

Reputation: 1257

Can i render VueJS with Django?

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/[email protected]"></script>

Would this approach be possible?

Upvotes: 4

Views: 1461

Answers (1)

drec4s
drec4s

Reputation: 8077

Yes, this is possible.

Just add the script inside your template:

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></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>

Upvotes: 6

Related Questions