CODEWITHSUNDEEP
djangovue.js
Antonio Romero Oca
Antonio Romero Oca

Reputation: 1245

How to integrate Vue.js with Django

I have a classic Django (no SPA) web project. Django renders also my templates. I wanted to implement Vue.js for some frontend functionalities (actually a search field) in the project. There is already a basic working version with separated files under my assets directory: assets/ css/ search.css js/ search.js

How can I write a structure using separate .vue components for my project? Should I use webpack + django-webpack-loader? Is there a more simple way?

Upvotes: 1

Views: 1658

Answers (2)

Sebastian Reyes
Sebastian Reyes

Reputation: 94

I assume that you already know this, but to give a better context, it is worth specifying the three traditional ways of working with VueJS in general:

  1. Integrated directly into HTML using a script tag (very effective if what you want is just to implement small features and avoiding the use of jQuery).
  2. Doing it inside a JS file, as @bbsimonbb mentions (but I don't recommend it, the project quickly becomes unmaintainable and increases the difficulty of working with HTML).
  3. Working on .vue files and moving towards a SPA.

In the case of Django there is an alternative that takes place halfway between the first and third option, using the django-webpack-loader package. Following the tutorial in the repository is quite simple to implement the functionality, and in the process avoid CORS management.

Upvotes: 1

bbsimonbb
bbsimonbb

Reputation: 28982

I've no Django experience, but ;-) the simplest way of integrating Vue is to create your vue components in .js files, not .vue files. As soon as you put your Vue stuff in .vue files, you need bundling, so you're talking SPA. Define your components in .js files. Use template strings (backticks) for the template property. The only thing you lose, relative to .vue files, is component-scoped css. You need to be a little bit careful that Vue doesn't break existing DOM manipulation code, but this is a perfectly workable way to start out.

Upvotes: 1

Related Questions