Vue JS Declare Global Variable Example

Vue · 02-Apr-2021

Hi Guys, today, i will learn you how to declare global variable in vue js. We will show example of declare global variable in vue js., i want to share with you how to set global variable in vue js. so you can get global variable value and use global variable in vue js. if you define global variable then you can easily access global variable in vuejs app.

We will define global variables using vue js mixin. using mixin we will declare all variables in data method. then we will use in our app vue object.

below, we will create simple example of declaring vue js global variable. i will create "myGlobalVar" variable with some dummy text on vue js mixin. then we will use "myGlobalVar" variable in our vue js app main object and their method.

Example

<!DOCTYPE html>
<html>
<head>
    <title>How to declare global variable in Vue JS? - Nicesnippets.com</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>

    
<div id="app">

    
  <p>Result : {{myResult}}</p>
  <button @click="clickFunction()">Click Me</button>

    
</div>

   
<script type="text/javascript">
    Vue.mixin({
      data: function() {
        return {
          myGlobalVar:'this is my Nicesnippets.com'
        }
      }
    })

 
    var app = new Vue({
      el: '#app',
      data: {
        myResult: ''
      },
      methods:{
        clickFunction: function () {   
            this.myResult = this.myGlobalVar;
        }
      }
    })

    
</script>
</body>
</html>

It will help you...

output

Result : this is my Nicesnippets.com

It will help you...