Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to add or apply global variables in Vue.js?
In a Vue.js application there may be data or utilities that are used in many components, but you don’t want to change its scope and keep its value same for all the components. These types of variables are called the global variables. In such cases, the user can use the following syntax for defining the prototype −
Vue.prototype.$appName = 'My App'
Now this $appName will be available on all the Vue instances, even before creation. The $ defined before the appName is the convention used for properties that are available to all the instances. The user can also use the global mixin to affect the Vue instance. You can add the data to this mixin, making a value or values available to all the Vue components.
Please look at the below example for more clarity.
Example
First, we need to create a Vue project. To do this you can refer to this page. Create two files app.js and index.html in your Vue project. The file and directory with code snippets are given below for both files. Copy and paste the below code snipped in your Vue project and run the Vue project. You shall see the below output on the browser window.
FileName - app.js
Directory Structure -- $project/public -- app.js
// 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 "This property cannot be changed !";
}
}
}
})
Vue.component('child', {
template: "<div>In Child: {{globalReadOnlyProperty}}</div>"
});
new Vue({
el: '#app',
created: function() {
this.globalReadOnlyProperty = "I am a global read only Property";
}
});
FileName - index.html
Directory Structure -- $project/public -- index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div style="text-align: center;">
<h2>
Add or apply global variables in Vue.js
</h2>
</div>
<div id="app" style="text-align: center;">
In Root: {{globalReadOnlyProperty}}
<child></child>
</div>
<script src='app.js'></script>
</body>
</html>
Run the following command to get the below output −
C://my-project/ > npm run serve
Complete Code with HTML
Let’s now create a complete code using the app.js and index.html files. This code can be run as an HTML file.
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div style="text-align: center;">
<h2>
Add or apply global variables in Vue.js
</h2>
</div>
<div id="app" style="text-align: center;">
In Root: {{globalReadOnlyProperty}}
<child></child>
</div>
<script>
// 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 "This property cannot be changed !";
}
}
}
})
Vue.component('child', {
template: "<div>In Child: {{globalReadOnlyProperty}}</div>"
});
new Vue({
el: '#app',
created: function() {
this.globalReadOnlyProperty = "I am a global read only Property";
}
});
</script>
</body>
</html>
In this article, we have discussed the global variables and how to add them in Vue.js. We have created app.js and index.html files and added app.js file in the index.html file using <script> tag. Finally, we created a complete code by combining app.js and index.html as an HTML file.
4K+ Views
