How to Add or Apply Global Variables in VueJS ?
Last Updated :
28 Apr, 2025
In Vue.js, we can have global variables that are applied by attaching them to the Vue instance prototype. These are accessible throughout the components of the application. This is helpful for data management and sharing. In this article, we will see the two different approaches to adding or applying global variables in VueJS with practical examples.
Approach 1: Using Vue Prototype
In this approach, we will use the Vue.prototye.$gVar to define the global variable that is accessed in the entire application. There is an input box and button through which the updation and application of the global variable will be managed.
Syntax:
Vue.prototype.$globalVariable = 'initialValue';
Example: Below is the implementation of the above-discussed approach.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Example 1</title>
<script src=
"https://cdn.jsdelivr.net/npm/vue@2">
</script>
<style>
body {
font-family: 'Arial',
sans-serif;
text-align: center;
margin: 50px;
}
input {
padding: 10px;
margin-bottom: 20px;
}
button {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>
Approach 1: Using
Vue.prototype
</h3>
<div id="app">
<h2>{{ message }}</h2>
<input v-model="gVar"
placeholder="Enter a
global variable">
<button @click="updateGVar">
Apply Global Variable
</button>
</div>
<script>
Vue.prototype.$gVar = '';
new Vue({
el: '#app',
data: {
message:
'This is Global Variable ',
gVar: ''
},
methods: {
updateGVar() {
this.$gVar = this.gVar;
this.message =
`Global Variable Updated:
${this.$gVar}`;
}
}
});
</script>
</body>
</html>
Output:
Approach 2: Using Vue.mixin
In this approach, we are defining the mixin with the data object containing the global variable 'globalVar' and the methods to update and rest it. By applying the mixin global to the Vue Instance, we can access and modify the shared global variable in the application.
Syntax:
Vue.mixin({
data() {
return {
globalVariable: {
// global variable properties
}
};
},
});
Example: Below is the implementation of the above-discussed approach.
HTML
<!DOCTYPE html>
<html>
<head>
<title> Example 2</title>
<style>
body {
font-family: 'Arial', sans-serif;
text-align: center;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
margin-top: 10px;
}
</style>
</head>
<body>
<div id="app">
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>
Approach 2: Using Vue.mixin
</h3>
<h4>{{ message }}</h4>
<label for="newMsg">
Change Global Variable:
</label>
<input type="text"
id="newMsg"
v-model="newMsg">
<button @click="updateGVar">
Update Global Variable
</button>
<button @click="resetGVar">
Reset Global Variable
</button>
</div>
<script src=
"https://cdn.jsdelivr.net/npm/vue@2">
</script>
<script>
Vue.mixin({
data() {
return {
globalVar: {
message:
'Hello, GFG!'
},
newMsg: ''
};
},
computed: {
message() {
return this.
globalVar.message;
}
},
methods: {
updateGVar() {
if (this.newMsg.trim() !== '') {
this.globalVar.message =
this.newMsg;
this.newMsg = '';
}
},
resetGVar() {
this.globalVar.message =
'Hello, Global Variable!';
}
}
});
new Vue({
el: '#app',
});
</script>
</body>
</html>
Output:
Similar Reads
How to Create a Global Variable in TypeScript ? To create a global variable in TypeScript, we have multiple approaches. In this article, we are going to learn how to create a global variable in TypeScript. Below are the approaches used to create a global variable in TypeScript: Table of Content Using var, let or const at the Top LevelUsing window
3 min read
How to Create Global Variables Accessible in all Views using Express/NodeJS ? In Express.js, global variables can be immensely useful for sharing data across multiple views or middleware functions. Whether it's storing user authentication status, site-wide configurations, or any other frequently accessed data, global variables streamline development and enhance code organizat
4 min read
How to Pass Variable to Inline Background Image in VueJS ? In this article, we will learn how we can pass variables to inline background images in VueJS. We will explore two different approaches with practical implementation in terms of examples and outputs. Table of Content Using :style BindingUsing :class BindingUsing :style BindingIn this approach, we ar
2 min read
How to Initialize Firebase in Vite and VueJS? Firebase with Vite and Vue Firebase, combined with Vite and Vue, opens up a powerful combination of real-time capability, fast development, and seamless backend integration. Firebase offers a real-time database, authentication, and cloud storage services that vastly reduce having to manage any backe
4 min read
How to Pass Value from One Child Component to Another in VueJS ? Vue.js is a JavaScript framework used in building powerful and beautiful user interfaces. The key feature of Vue.js is its component-based architecture that allows the developers to create reusable and modular components. In this article, we will learn how to pass value from one child component to a
3 min read
How to Add External JS Scripts to VueJS Components? VueJS is a popular front-end JavaScript framework that allows us to develop single-page web applications with the help of components. We can also add external JS scripts in the framework to integrate any 3rd party web services into our application. Below are the approaches to add external JS scripts
2 min read