Django + Vue3 + Vite

Question

I am upgrading my multipage app from Vue2+webpack to Vue3+vite.

I got to a point where I can see and render my vue3 on my django templates and all the setup seems to be working.

Now I need to set some of the component variables on the vue app using the django template, but I can't get a hold of my vue instance to do so.

Before I use to do:

//after window loads
app = document.getElementById('abc_app').__vue__ ;
app.message = "New Message";

And it would display the new message.

Now the same doesn't work anymore for vue3, and changing the code to __vue__app__ doesn't work either.

Entry JS from 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 }
 });

new entrypoint 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)

Answer 1

I was able to access the data elements (not the methods) with:

app = document.getElementById('abc_app'). __vue__app__.instance;