How to declare global variable in Vue JS?

How to declare global variable in Vue JS?

In this post we will give you information about How to declare global variable in Vue JS?. Hear we will give you detail about How to declare global variable in Vue JS?And how to use it also give you demo for it if it is necessary.

In this example, 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.

Here, 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.

So you can see bellow full example:

Example:

<!DOCTYPE html>

<html>

<head>

<title>How to declare global variable in Vue JS? - ItSolutionStuff.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 ItSolutionStuff.com'

}

}

})

var app = new Vue({

el: '#app',

data: {

myResult: ''

},

methods:{

clickFunction: function () {

this.myResult = this.myGlobalVar;

}

}

})

</script>

</body>

</html>

Output:

Result : this is my ItSolutionStuff.com

I hope it can help you…

Hope this code and post will helped you for implement How to declare global variable in Vue JS?. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

Leave a Comment

Your email address will not be published. Required fields are marked *

6  +  2  =  

We accept paid advance and paid guest Posting on our Site : Contact US