I'm in the process of upgrading my multipage app from Vue2 with webpack to Vue3 with Vite.
After successfully rendering my Vue3 components on my Django templates, I am now facing a challenge - setting component variables on the Vue app using the Django template.
Previously, I was able to do this by accessing the Vue instance like so:
//after window loads
app = document.getElementById('abc_app').__vue__;
app.message = "New Message";
However, this method no longer works for Vue3. Even changing the code to __vue__app__ does not solve the issue.
Here is the entry JS for Vue2:
import Vue from 'vue'
import abc_app from './abc_app.vue'
const root_element = document.getElementById('abc_app');
const AppRoot = Vue.extend(abc_app);
new AppRoot({
el: root_element,
propsData: { ...root_element.dataset }
});
And here is the new entrypoint setup for Vue3:
import abc_app from './abc_app.vue'
const root_element = document.getElementById('abc_app');
import { createApp } from 'vue'
import { createPinia } from 'pinia'
const app = createApp(abc_app)
app.use(createPinia())
app.mount(root_element)