Cant access global variable in Vue 3 and Vite

Question

I have this App.js

import './bootstrap';
import { createApp } from 'vue';
import { createRouter, createWebHistory } from 'vue-router';


const app = createApp({});

app.config.globalProperties.$globalVar = 'globa11lVar'

import ExampleComponent from './components/ExampleComponent.vue';
import ExampleComponent2 from './components/ExampleComponent2.vue';

const routes = [
    { path: '/', component: ExampleComponent },
    { path: '/about', component: ExampleComponent2 },
]

const router = createRouter({
.....
});

app.use(router);

app.mount('#app');

as you can see I have app.config.globalProperties.$globalVar to pass the variable.

On my ExampleComponent

<script setup>
import { ref, onMounted, watch } from 'vue'

// lifecycle hooks
onMounted(() => {
   console.log( app.config.globalProperties ); 
})

</script>

Im getting this error

Uncaught (in promise) TypeError: can't access property "globalProperties", app.config is undefined

Any help would be appreciated.

Boussadjra Brahim · Accepted Answer · 2022-11-29 08:05:10Z

3

You could achieve that by using getCurrentInstance, but it's not a recommended way, you could use inject/provide to do the same thing :

app.provide('globalVar', 'some globalVar')

in your component :

<script setup>
import { ref, onMounted, watch, inject } from 'vue'

const globalVar = inject('globalVar')

// lifecycle hooks
onMounted(() => {
   console.log( globalVar ); 
})

</script>

answered Nov 29, 2022 at 8:05

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Cant access global variable in Vue 3 and Vite

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related