Apply global variable to Vuejs

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.

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:

// 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: "<div>In Child: {{globalReadOnlyProperty}}</div>"});new Vue({  el: '#app',  created: function() {    this.globalReadOnlyProperty = "This won't change it";  }});

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

Expand snippet