将属性从 main.ts 传递到 Vue 3 应用程序的根组件

Question

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

Answer 1

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.