Can i render VueJS with 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/[email protected]"></script>

Would this approach be possible?

drec4s · Accepted Answer · 2019-08-19 21:26:25Z

6

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>

answered Aug 19, 2019 at 21:26

drec4s

8,1178 gold badges35 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jack022 Over a year ago

Yeah, the only thing that i do not understand is: how "conventional" is this? Is this the best way to go?

drec4s Over a year ago

The best way to go, is up to you to decide based on how your project is structured. If you can't use webpack, and use .vue files to write your components, then I believe this is the only way to go.

Collectives™ on Stack Overflow

Can i render VueJS with Django?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related