Level Up Your Django Frontend: Integrate Web Components into Django Templates with Vue
summary
A demo Django app that rolls tabletop dice shows concrete steps: add Vue single‑file components, cross‑compile them into Vue SFC → native web components with shadowRoot=false, mount the entry script in Django templates, and keep hot‑module reload during development. The build uses npm (motion v for animation), Python d20 for roll logic, Ajax partials and JSON for quick‑rolls, teleport for a modal, Pinia for shared state, and production builds output to Django static — everything works as demonstrated.
AI-written summary · about
chapters (13)
- 0:00Welcome
- 2:08Dice demo app
- 7:05Vue project setup
- 10:35Vue single file component
- 14:47Compile Vue to web components
- 17:25Vue components in Django
- 19:55Animate dice rolls
- 23:47Interactive dice preset card
- 27:44AJAX in Vue components
- 31:45JSON with max roll status
- 34:51Teleport dice rolls
- 38:02Pinia state sharing
- 43:07Summary
related talks
23mVue + Django: Combining Django Templates and Vue Single File Components without compromise
06mLightning Talk: Making a Blog with Django and Next.js
32mAngularJS + Django = A Perfect Match
42mA Python-Driven Web App Framework with Django, Channels, and React
42mDjangular
26mModern web apps with (almost) no JS: Enhancing UX with HTMX in Django
29mConfident Asset Deployments With Webpack & Django
46mDjango + Alpine.js + htmx Ups & Downs with Karen Tracey