Why is the object structure from the getCurrentInstance() result with the Composition API different in development or production build?
I use the following pattern for adding globals to my Vue instance:
export default {
install(app) {
const _projectFile = new ProjectFile(app);
//* This will help for accessing the store in other files (plugins)
app.config.globalProperties.$projectProperties = _projectFile;
//* This will expose the store in components with this.$store
app.provide('$projectProperties', _projectFile);
}
};
I am initiating this in my main.js, with a bunch of other stuff (this all works fine).
import App from './App.vue'; // Main Vue component
const app = createApp(App)
.use(projectProperties);
app.mount('#app');
The actual weirdness starts here.. When trying to access my globalProperties from the setup() (Compostion API) in ./App.vue. I get a different object structure for getCurrentInstance() when running:
vue-cli-service serve(development)vue-cli-service build(production)
./App.vue
setup() {
const _instance = getCurrentInstance();
onMounted(async function() {
// This one is only valid from vue-cli-service serve
const { $store, $router, $projectProperties } = _instance.ctx;
// This will work for both vue-cli-service serve & build
const { $store, $router, $projectProperties } = _instance.appContext.app.config.globalProperties;
// Other non relevant code down here
});
},
So this will not work in my production build:
const { $store, $router, $projectProperties } = _instance.ctx;
I don't get why the getCurrentInstance().ctx points towards the globalProperties object with cli-service serve but does not contain the globalProperties in the cli-service build?