Building Vue3 app without mounting

[bglendenning]

I'm using composition/SFC structure with Django/DRF backend. I have an application with multiple components. In development I pass props to the app in main.js:

createApp(App, {
  organization_uuid: '<organization_uuid>',
  event_id: '<event_id>',
  static_dir: '<static_dir>'
}).mount('#app');

What I assumed this would allow me to do is use createApp within a Django template, and I could pass these values into the Vue app:

createApp(App, {
  organization_uuid: '{{ organization_uuid }}',
  event_id: '{{ event.id }},
  static_dir: '<static_dir>'
}).mount('#app');

With the values in curly braces being Django template variables. These values are used to construct static files & API endpoint paths. However, npm run build (apparently using vite build) packages the application with main.js, and so organization_uuid, event_id, and static_dir are not changeable.

Is there a way to build the application without the createApp declaration?

[bglendenning]

As a 'temporary' solution, I'm parsing the URL path to get the requisite values within the Vue app. IDK if this is ideal, but it's better than nothing.

[chenxch]

Maybe you need to develop a vite plug-in and use the transform hook to replace the corresponding text.

https://vitejs.dev/guide/api-plugin.html#simple-examples