2025-09-08 –, Sauganash Ballroom
Recent improvements in Vue 3.5 offer a compelling new way to inject JavaScript interactivity into Django templates: Web Components. You can now encapsulate interactive behavior within Web Components, register them in your Django application with a single line of JavaScript, and use them in Django templates by custom tag name. You can even embed Django template content, including tags and context variables, directly inside these components.
No magic attribute names. No mounting elements by selector. No manual attribute datatype coercion. No more fighting the framework.
Using a Web Component in a Django template is as easy and intuitive as:
<my-product-card name="{{ product.name }}" rating="{{ product.rating }}">
<a href="{{ product.url }}"><img src="{{ product.image }}"></a>
</my-product-card>
This talk shows you how to move beyond partial JavaScript sprinkles without resorting to full-blown single-page apps and REST APIs, and instead build interactive, maintainable components that drop straight into your Django templates with minimal friction.
Have you avoided heavyweight JavaScript frameworks because they're overwhelming, complicated, or difficult to integrate?
Has your current JavaScript solution devolved into an unmaintainable, unscalable, and untestable mess?
Need to bring real interactivity to your Django app but reluctant to commit to a full API-driven SPA?
This talk is for you.
In this 45-minute deep dive, you’ll learn how to bring modern frontend power to your Django app without giving up the simplicity of Django Templates. Starting with a simple Django-only note-taking app, I'll show you how to incrementally build and integrate interactive Web Components that bring the application to life.
You’ll see how Vue 3.5, the Vite build tool, and Web Components make it faster and easier than ever to add full-featured, maintainable interactivity to your template-driven Django apps.
By the end of the talk, you'll understand how to:
- Create a new Vue project and configure the Vite build tool
- Create Vue Single File Components (SFCs) and compile them into native Web Components
- Use Web Components directly in Django Templates by custom tag name
- Manage and persist JavaScript state across page loads with Pinia
- Debug and inspect Web Components and state live in-page
- Style your components using existing site styles and scoped component styles
- Pass data from Django to Web Components via properties and injection
- Include rendered template content and media in Web Components using slots
- Break components out of their containers using Teleport
- Send data from Web Components to Django views via AJAX or POST requests
- Dynamically render Django responses inside Web Components
- Deploy your application using your existing static files setup
Mike is a software developer living in Tallinn, Estonia. Although his list of former hobbies is expansive and every-growing, his love of software is constant and keeps him curious and enthusiastic after 25 years of professional software development across numerous languages and frameworks. Currently, Mike is following his bliss with Django, Flutter, bike-touring, camping, and tabletop gaming.