0

Instead of mounting my component directly to #app, I'm trying to push my component one level down so I can pass props to it from the HTML file it lives in. However, nothing shows up and there aren't any console errors. I'm sure it's just me misunderstanding how Vue 3 and createApp works.

My HTML file:

<div id="app">
  <my-component />
</div>

My main JS file:

import { createApp } from 'vue'
import MyComponent from './pages/MyComponent.vue'
import { IonicVue } from '@ionic/vue'

const app = createApp({
  components: {
    MyComponent: {
      props: {
      },
    }
  },
})
.use(IonicVue)
.mount("#app");

Thank you in advance!

Adam Robertson
  • 1
  • Props just only work inside Vue App but what you are trying to do is outside the app. Re-thinking about your idea, why do you need to pass the props to Vue App? You can use query strings, local storage, cookie, or even window global object to pass some value to your App – Duannx Jun 17 '22 at 02:18
  • Thanks. Trying to pass some API keys and other bits of data generated by Django that are required for a third-party Vue component. While not the best solution, I think I'll just use global JS vars for now. Are there any general best practices for moving data between a Django template to a Vue app? I know there are tools like django-vite, but they don't really address the data drilling. Thank you! – Adam Robertson Jun 17 '22 at 14:56
  • I don't use Django so I can not answer your question. It would be a good question so you should ask it in another question. – Duannx Jun 20 '22 at 02:05

0 Answers0