Javascript is required
ยท
1 min read

Vue Tip: Use Vue App Instance as Global Store

Vue Tip: Use Vue App Instance as Global Store Image

Vue provides globalProperties on the app instance, an object that can be used to register global properties that can be accessed on any component instance inside the application.

Info

This is a replacement of Vue 2's Vue.prototype which is no longer present in Vue 3.

main.js
1import { createApp } from 'vue'
2
3const app = createApp({
4  /* root component options */
5})
6
7app.config.globalProperties.msg = 'hello'

msg can be accessed on any component instance inside the application:

MyComponent.vue
1<script>
2export default {
3  mounted() {
4    console.log(this.msg) // 'hello'
5  },
6}
7</script>

Warning

As with anything global, this should be used sparingly. If your app state is too complex, it's better to use Pinia.

If you liked this Vue tip, follow me on X to get notified about new tips, blog posts, and more. Alternatively (or additionally), you can subscribe to my weekly Vue & Nuxt newsletter:

I will never share any of your personal data. You can unsubscribe at any time.