Search code examples
vue-componentvue.jsvuejs2

Apply global variable to Vuejs

I have a javascript variable which I want to pass globally to Vue components upon instantiation thus either each registered component has it as a property or it can be accessed globally.

Note:: I need to set this global variable for vuejs as a READ ONLY property

Solution

  • Just Adding Instance Properties

    vue2

    For example, all components can access a global appName, you just write one line code:

    Vue.prototype.$appName = 'My App'

    Define that in your app.js file and IF you use the $ sign be sure to use it in your template as well: {{ $appName }}

    vue3

    app.config.globalProperties.$http = axios.create({ /* ... */ })

    $ isn't magic, it's a convention Vue uses for properties that are available to all instances.

    Alternatively, you can write a plugin that includes all global methods or properties. See the other answers as well and find the solution that suits best to your requirements (mixin, store, ...)