This automated answer is a little confusing for me because I'm not sure where Vue.observable is being imported from... I'm using Vite, and thus I'm also using import {createApp,h} from 'vue/dist/vue.esm-bundler.js'; to import createApp but I can't simply add Vue to that import list because the ESM bundler does not provide an export named Vue... I also tried import Vue from 'vue'; but that was equally unsuccessful...
Global Vue prop using Laravel/Inertia/Vue?
I'm using Laravel 10 / InertiaJS 1 / VueJS 3 with Composition API... I'm wondering if there is a way to create a global property instantiated within the createInertiaApp method call that is accessible globally in all components without additional imports or provide/injections in each component file? I have a set of data that is shared through the HandleInertiaRequests middleware, but I cannot seem to figure out how to get that data into some sort of globally-accessible state... For example, in my app.js file, I'm trying to capture the _app property passed in via Inertia and make it accessible in all components as $_app...
/* Imports excluded for brevity */
createInertiaApp({
title:(title)=>`${title}`,
resolve:async(name)=>(await import(`./pages/${name}.vue`).default,
setup({el,App,props,plugin}){
let appCreated=createApp({render:()=>h(App,props)})
.use(plugin)
.component('InertiaLink',Link)
.component('InertiaHead',Head)
.mixin({methods:{route}})
.use(VueImgix,{
domain:import.meta.env.VITE_IMGIX_DOMAIN,
secureURLToken:import.meta.env.VITE_IMGIX_API_KEY,
useHTTPS:true,defaultIxParams:{},
})
.use(ToastService);
/* This is where I'm trying to create a globally-accessible property (unsuccessfully) */
appCreated.config.globalProperties.$_app=props._app;
return appCreated.mount(el);
},
progress:{color:'#4fb4d3'}
}).then();
Please or to participate in this conversation.