What is the best way to declare global variable in Vue js

Question

I need access to my hostname variable in every component   Is it a good idea to put it inside data   Am I right in understanding that if I do so  I will able to call it everywhere by this hostname

User · Answer

a vue3 replacement of this answer     Vue3  const app   Vue createApp     app config globalProperties  hostname    http   localhost 3000    app component  a-child-component       mounted         console log this  hostname      http   localhost 3000

User · Answer

Warning  The following answer is using Vue 1 x  The twoWay data mutation is removed from Vue 2 x  fortunately     In case of  global  variables   that are attached to the global object  which is the window object in web browsers   the most reliable way to declare the variable is to set it on the global object explicitly   window hostname    foo     However form Vue s hierarchy perspective  the root view Model and nested components  the data can be passed downwards  and can be mutated upwards if twoWay binding is specified    For instance if the root viewModel has a hostname data  the value can be bound to a nested component with  v-bind directive as v-bind hostname  hostname  or in short  hostname  hostname    And within the component the bound value can be accessed through component s props property   Eventually the data will be proxied to this hostname and can be used inside the current Vue instance if needed    x000D   x000D  var theGrandChild   Vue extend   x000D    template    lt h3 gt The nested component has also a    foo    and a    bar    lt  h3 gt    x000D      props    foo    bar   x000D      x000D   x000D  var theChild   Vue extend   x000D    template    lt h2 gt My awesome component has a    foo    lt  h2 gt    x000D                lt the-grandchild  foo  foo   bar  bar  gt  lt  the-grandchild gt    x000D    props    foo    x000D    data  function     x000D      return   x000D        bar   bar  x000D         x000D       x000D    components    x000D       the-grandchild   theGrandChild x000D      x000D      x000D   x000D   x000D     the root view model x000D  new Vue   x000D    el   body   x000D    data    x000D      foo   foo  x000D       x000D    components    x000D       the-child   theChild x000D      x000D      x000D   lt script src  https   cdnjs cloudflare com ajax libs vue 1 0 16 vue js  gt  lt  script gt  x000D   lt h1 gt The root view model has a    foo    lt  h1 gt  x000D   lt the-child  foo  foo  gt  lt  the-child gt  x000D   x000D   x000D      In cases that we need to mutate the parent s data upwards  we can add a  sync modifier to our binding declaration like  foo sync  foo  and specify that the given  props  is supposed to be a twoWay bound data   Hence by mutating the data in a component  the parent s data would be changed respectively   For instance    x000D   x000D  var theGrandChild   Vue extend   x000D    template    lt h3 gt The nested component has also a    foo    and a    bar    lt  h3 gt    x000D                lt input v-model  foo  type  text  gt    x000D      props    x000D         foo     x000D          twoWay  true x000D             x000D         bar      x000D        x000D      x000D   x000D  var theChild   Vue extend   x000D    template    lt h2 gt My awesome component has a    foo    lt  h2 gt    x000D                lt the-grandchild  foo sync  foo   bar  bar  gt  lt  the-grandchild gt    x000D    props    x000D       foo     x000D        twoWay  true x000D        x000D       x000D    data  function     x000D      return   bar   bar     x000D         x000D    components    x000D       the-grandchild   theGrandChild x000D      x000D      x000D   x000D     the root view model x000D  new Vue   x000D    el   body   x000D    data    x000D      foo   foo  x000D       x000D    components    x000D       the-child   theChild x000D      x000D      x000D   lt script src  https   cdnjs cloudflare com ajax libs vue 1 0 16 vue js  gt  lt  script gt  x000D   lt h1 gt The root view model has a    foo    lt  h1 gt  x000D   lt the-child  foo sync  foo  gt  lt  the-child gt  x000D   x000D   x000D

User · Answer

For any Single File Component users  here is how I set up global variable s    Assuming you are using Vue-Cli s webpack template Declare your variable s  in somewhere variable js    const shallWeUseVuex   false   Export it in variable js    module exports     shallWeUseVuex   shallWeUseVuex     Require and assign it in your vue file     export default       data             return               shallWeUseVuex  require        variable js                         Ref  https   vuejs org v2 guide state-management html Simple-State-Management-from-Scratch

User · Answer

In vue cli-3 You can define the variable in main js like  window basurl  http   localhost 8000     And you can also access  this variable in any component by using  the the  window basurl

User · Answer

I strongly recommend taking a look at Vuex  it is made for globally accessible data in Vue   If you only need a few base variables that will never be modified  I would use ES6 imports      config js export default      hostname   myhostname         vue file import config from  config js   console log config hostname    You could also import a json file in the same way  which can be edited by people without code knowledge or imported into SASS

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  An example of this solution can be found at this answer  https   stackoverflow com a 62485644 1178478

User · Answer

As you need access to your hostname variable in every component  and to change it to localhost while in development mode  or to production hostname when in production mode  you can define this variable in the prototype  Like this  Vue prototype  hostname    http   localhost 3000   And  hostname will be available in all Vue instances  new Vue     beforeCreate  function          console log this  hostname          In my case  to automatically change from development to production  I ve defined the  hostname prototype according to a Vue production tip variable in the file where I instantiated the Vue  Like this  Vue config productionTip   false Vue prototype  hostname    Vue config productionTip     https   hostname     http   localhost 3000   An example can be found in the docs  Documentation on Adding Instance Properties More about production tip config can be found here  Vue documentation for production tip

[global-variables] What is the best way to declare global variable in Vue.js?

Examples related to global-variables

Examples related to vue.js