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.