This content originally appeared on CodeSource.io and was authored by Deven
In this article, you will learn about how to declare global variables in VueJs.
While working with VueJS, you need to declare a global variable so that you can access it from anywhere in the project. This is quite useful to declare a global variable otherwise you need to declare it from each file where you need to use it. Let’s see the below code example of how you can set a global variable in VueJS;
Vue.prototype.$hostname = 'your variable name'Suppose, you want to set a localhost on a specific port number. But if you do not declare it as a global variable you need to define it each file. Let’s see how you can define it as a global variable in VueJS.
Vue.prototype.$hostname = '<http://localhost:5000>'This will set $hostname as a global variable and make it available for all vue instances and you can access it like this :
new Vue({
beforeCreate: function () {
console.log(this.$hostname)
}
})You can also defined this $hosname prototype according to vue production tip variable so that it can change automatically change from development to production based on you command. See the code below of how you can do this :
Vue.config.productionTip = false
Vue.prototype.$hostname = (Vue.config.productionTip)
? '<https://hostname>'
: '<http://localhost:5000>'If you are aware of that you only need few base variables and these variables does not need to be modified then you may use ES6 imports/exports. See the below code example:
// In your config.js file
export default {
hostname: 'hostname'
}
// In your .vue file
import config from 'config.js'
console.log(config.hostname)This is all about the ways you can declare a global variable in the best way in VueJS. You may get an overview of declaring a global variable in VueJS from this article.
The post What is the best way to declare global variable in VueJS appeared first on CodeSource.io.
This content originally appeared on CodeSource.io and was authored by Deven
Deven | Sciencx (2021-12-28T15:08:12+00:00) What is the best way to declare global variable in VueJS. Retrieved from https://www.scien.cx/2021/12/28/what-is-the-best-way-to-declare-global-variable-in-vuejs/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.