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)

Walucas · Accepted Answer · 2022-09-29 20:12:14Z

1

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

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

answered Sep 29, 2022 at 20:12

Walucas

2,5781 gold badge27 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Django + Vue3 + Vite

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related