9 ms·

Vue and Django work very well together. However I'd recommend completely decoupling the frontend and backend source code - and avoid using django templates enti

Vue and Django work very well together. However I'd recommend completely decoupling the frontend and backend source code - and avoid using django templates entirely. Instead expose REST endpoints using django rest framework

rahimnathwani 6y ago
The article mentioned this approach: "When you google for Django + Vue, most results will be focused on using Django for your backend and Vue for a separate frontend project." There are times when this makes sense, but there are times when you just need to sprinkle a but of Vue magic onto part of your site, without turning the whole thing into an SPA.
- dtjones 6y ago
  Yes it's possible to include external libraries into Django templates but I haven't seen a project like this that is maintainable
  - rahimnathwani 6y ago
    I once developed a UI to enable a non-technical user to answer 20 multiple-choice questions about a video. Some of the UX requirements I teased out during the process: - easy to answer questions whilst watching the video - quick to navigate to a specific question - video visible at all times - short+long summary of each answer visible when answering a specific question - long description of question visible - can be operated using mouse or keyboard (on laptop/desktop) or touch (tablet) The rest of the site was regular Django, with a bit of jQuery here and there. I settled on: - a regular Django form, with a single field to accept the a json string of the actual answers (the questions might change in future) - a description of all the questions, descriptions, choices stored in a Django model, and sent to the page as json - Vue rendering part of the page (the bit with the category selectors, question text, choices, descriptions) Vue helped me deliver a pretty slick UI and didn't add any technical debt. (Not saying I didn't add any technical debt overall, just that the front-end part didn't contribute.)
CameronNemo 6y ago
Why? Server side rendering is often fast and well suited for pages with mostly read-only content.
- postpawl 6y ago
  If you integrate Django and vue this way (separate front end app), you can take advantage of the javascript build process for linting, minification, and whatever else: https://medium.com/@rodrigosmaniotto/integrating-django-and-vuejs-with-vue-cli-3-and-webpack-loader-145c3b98501a https://medium.com/@rodrigosmaniotto/integrating-django-and-... You can also get live reloading working.
- dtjones 6y ago
  Yes, serverside rendering is generally more performant than a decoupled client/server-side approach. If server-side rendering is a requirement of the project I'd look into nuxt.js + vue I was commenting more generally on the approach to building a web app with Django and including external js libraries in Django templates, which I've done in the past as project requirements have changed over time. After including external js libraries to Django templates, there is a lot less support in terms of resources and supporting libraries such as testing frameworks. If the client-side project is initialized with Vue, the project can benefit from the overwhelming amount of supporting resources.
sgt 6y ago
They combine pretty well together.

rahimnathwani 6y ago

The article mentioned this approach: "When you google for Django + Vue, most results will be focused on using Django for your backend and Vue for a separate frontend project." There are times when this makes sense, but there are times when you just need to sprinkle a but of Vue magic onto part of your site, without turning the whole thing into an SPA.

dtjones 6y ago
Yes it's possible to include external libraries into Django templates but I haven't seen a project like this that is maintainable
- rahimnathwani 6y ago
  I once developed a UI to enable a non-technical user to answer 20 multiple-choice questions about a video. Some of the UX requirements I teased out during the process: - easy to answer questions whilst watching the video - quick to navigate to a specific question - video visible at all times - short+long summary of each answer visible when answering a specific question - long description of question visible - can be operated using mouse or keyboard (on laptop/desktop) or touch (tablet) The rest of the site was regular Django, with a bit of jQuery here and there. I settled on: - a regular Django form, with a single field to accept the a json string of the actual answers (the questions might change in future) - a description of all the questions, descriptions, choices stored in a Django model, and sent to the page as json - Vue rendering part of the page (the bit with the category selectors, question text, choices, descriptions) Vue helped me deliver a pretty slick UI and didn't add any technical debt. (Not saying I didn't add any technical debt overall, just that the front-end part didn't contribute.)

CameronNemo 6y ago

Why? Server side rendering is often fast and well suited for pages with mostly read-only content.

postpawl 6y ago
If you integrate Django and vue this way (separate front end app), you can take advantage of the javascript build process for linting, minification, and whatever else: https://medium.com/@rodrigosmaniotto/integrating-django-and-vuejs-with-vue-cli-3-and-webpack-loader-145c3b98501a https://medium.com/@rodrigosmaniotto/integrating-django-and-... You can also get live reloading working.
dtjones 6y ago
Yes, serverside rendering is generally more performant than a decoupled client/server-side approach. If server-side rendering is a requirement of the project I'd look into nuxt.js + vue I was commenting more generally on the approach to building a web app with Django and including external js libraries in Django templates, which I've done in the past as project requirements have changed over time. After including external js libraries to Django templates, there is a lot less support in terms of resources and supporting libraries such as testing frameworks. If the client-side project is initialized with Vue, the project can benefit from the overwhelming amount of supporting resources.

sgt 6y ago

They combine pretty well together.