Apply global variable to Vuejs

Question

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

User · Answer

You can use mixin and change var in something like this.

_x000D_

// This is a global mixin, it is applied to every vue instance_x000D_
Vue.mixin({_x000D_
  data: function() {_x000D_
    return {_x000D_
      globalVar:'global'_x000D_
    }_x000D_
  }_x000D_
})_x000D_
_x000D_
Vue.component('child', {_x000D_
  template: "<div>In Child: {{globalVar}}</div>"_x000D_
});_x000D_
_x000D_
new Vue({_x000D_
  el: '#app',_x000D_
  created: function() {_x000D_
    this.globalVar = "It's will change global var";_x000D_
  }_x000D_
});

_x000D_

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.3/vue.js"></script>_x000D_
<div id="app">_x000D_
  In Root: {{globalVar}}_x000D_
  <child></child>_x000D_
</div>

_x000D_

User · Answer

If the global variable should not be written to by anything  including Vuejs  you can use Object freeze to freeze your object  Adding it to Vue s viewmodel won t unfreeze it  Another option is to provide Vuejs with a frozen copy of the object  if the object is intended to be written globally but just not by Vue  var frozenCopy   Object freeze Object assign     globalObject

User · Answer

A possibility is to declare the variable at the index html because it is really global  It can be done adding a javascript method to return the value of the variable  and it will be READ ONLY  I did like that  Supposing that I have 2 global variables  var1 and var2   Just add to the index html header this code     lt script gt        function getVar1               return 123                function getVar2               return 456                function getGlobal varName              switch  varName                  case  var1   return 123                case  var2   return 456                                     default  return  unknown                         lt  script gt   It s possible to do a method for each variable or use one single method with a parameter  This solution works between different vuejs mixins  it a really global value

User · Answer

In VueJS 3 with createApp   you can use app config globalProperties Like this  const app   createApp App    app config globalProperties foo    bar    app use store  use router  mount   app     and call your variable like this  app component  child-component       mounted         console log this foo      bar           doc  https   v3 vuejs org api application-config html warnhandler  If your data is reactive  you may want to use VueX

User · Answer

You can use a Global Mixin to affect every Vue instance  You can add data to this mixin  making a value values available to all vue components  To make that value Read Only  you can use the method described in this Stack Overflow answer  Here is an example   x000D   x000D     This is a global mixin  it is applied to every vue instance      Mixins must be instantiated  before  your call to new Vue      Vue mixin     data  function         return         get globalReadOnlyProperty             return  Can t change me                          Vue component  child       template    lt div gt In Child    globalReadOnlyProperty   lt  div gt        new Vue     el    app     created  function         this globalReadOnlyProperty    This won t change it           x000D   lt script src  https   cdnjs cloudflare com ajax libs vue 2 1 3 vue js  gt  lt  script gt   lt div id  app  gt    In Root    globalReadOnlyProperty      lt child gt  lt  child gt   lt  div gt  x000D   x000D   x000D

User · Answer

Just Adding Instance Properties  For example  all components can access a global appName  you just write one line code    Vue prototype  appName    My App     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

User · Answer

you can use Vuex to handle all your global data

User · Answer

In your main js file  you have to import Vue like this   import Vue from  vue   Then you have to declare your global variable in the main js file like this   Vue prototype  actionButton    Not Approved   If you want to change the value of the global variable from another component  you can do it like this   Vue prototype  actionButton    approved   https   vuejs org v2 cookbook adding-instance-properties html Base-Example

[vue-component] Apply global variable to Vuejs

Examples related to vue-component

Examples related to vue.js

Examples related to vuejs2