Paul's Programming Notes     Archive     Feed     Github

Vue - vue-custom-element

Vue-custom-element seems like the best way to integrate vue into an existing application that uses server side templates.

This approach allows you to use vue components (built with the build pipeline) in your existing html without making your entire application a SPA.

Initially I started following this guide: https://robinverton.de/blog/2018/06/22/django-vue.js-integration-as-a-widget/

Vue-custom-element turned that code into 3 lines and allowed using components like normal (without the data attributes).

This approach seems much better than: https://vsupalov.com/vue-js-in-django-template/ Which doesn't allow for using a build pipeline for babel, linting, testing, single page components, live reload, modules with import/require, etc.

Targeting your builds for web components might do the same thing: https://cli.vuejs.org/guide/build-targets.html#web-component It says it's not compatible with IE11, but that might not be a big deal in most situations.