Vue + Django: Combining Django Templates and Vue Single File Components without compromise
summary
Demonstrates a concrete integration: mount Vue SFCs into Django templates by mapping element data-attributes to component props, run multiple mounts per page, and share state via a Pinia store so point totals update without a REST API. Uses Vite dev server for HMR during development and outputs built assets to Django static for production. Approach has run in production for four years, supports hot reload with preserved state, and requires only template container elements and an entry-point JS.
AI-written summary · about
chapters (14)
- 0:00Introduction
- 3:57Vue and Django benefits
- 5:23Demo app setup
- 6:46Vue store and components
- 9:17PointStatus component
- 11:03RewardClaim logic
- 11:53Vue to Django mapping
- 13:59Repeated components in Django
- 15:23Integration setup
- 16:05Live dynamic demo
- 17:14Development vs production JavaScript assets
- 19:06Django template benefits
- 19:48Integration roadmap
- 21:12Resources and Q&A
related talks
44mLevel Up Your Django Frontend: Integrate Web Components into Django Templates with Vue
37mPrototyping with Vue Single File Component
36mLaravel and Vue JS
36mHow to Create 'Vuetiful' Data-Driven User Interfaces
38mAn Introduction to the Vue Ecosystem
42mProgressive decoupling in action: using Vue.js to ...
24mVue js in Practice: Hybridizing Objects and Functions
21mShifting to Vue