CODEWITHSUNDEEP
typescriptvuejs3vue-props
Stephan Kühn
Stephan Kühn

Reputation: 31

Pass property into root component of Vue 3 app from main.ts

I try to pass a boolean property to App.vue from inside main.ts

main.ts:

const freshchatActive = false;

new Vue({
  router,
  store,
  i18n,
  vuetify,
  props: { freshchatActive: Boolean },
  render: h => h(App),
}).$mount("#app");

App.Vue:

export default class App extends Vue {
  @Prop({ default: () => false }) freshchatActive!: boolean;

  created() {
    console.log("created #freshchatActive", this.freshchatActive);
  }

However, the console always prints the default value (false). How would I pass in the property when creating the application root component in main.ts?

Thanks in advance for your suggestions.

Kind Regards Stephan

Upvotes: 0

Views: 800

Answers (1)

Leif Marcus
Leif Marcus

Reputation: 623

As you are using the render function, you need to pass the props to the h function like

new Vue({
  router,
  store,
  i18n,
  vuetify,
  render: h => 
    h(App, { 
      freshchatActive: true 
    }),
}).$mount("#app");

Just to clarify, the way the app is initialized is not Vue 3 as mentioned in my comments.

Upvotes: 1

Related Questions