Likely changes when upgrading to Vue 3

[jrbenriquez]

Hi!

Love this setup with django and vue but I'm trying to upgrade to Vue 3.

With the upgrade, it looks like to me that I just need to modify how I create my app instance. I've tried:

import { createApp } from "vue"; const HelloWorld = () => import( / webpackChunkName: "chunk-hello-world" / "../components/HelloWorld.vue");

// Mount top level components const app = createApp({ components: {HelloWorld}, }) app.mount('#app')

Chunks are being built but nothing gets mounted when I run the django server along with the vue webserver.

I'm more of django developer, so I maybe missing something pretty simple here or maybe some constraints with the upgrade that I'm not aware of. Just wanted to know if its just a simple change or not upgrading to Vue 3.

Thanks if you could help. :)

[ilikerobots]

@jrbenriquez : I'm working now on an update to my articles that explains how to integrate with Vue3. I haven't written it up yet, but you can see how my suggested setup code differs from the v2 technique here: https://github.com/ilikerobots/django-vue-mpa/commit/7c28cb71f6cafc53c0bfaff44d1fae7685744a5e

Particularly create_app_utils.js illustrates the new mounting technique. This also handles passing properties from template differently (now using data attributes).

[ilikerobots]

@jrbenriquez : I've written up the changes to update this approach for Vue3, and included a few other tweaks that improve the overall integration: Django and Vue3 — Best of Both Frontends, Part 4