VueJS Tip: Add Global Properties to Your VueJS App
Often at times when developing application, there are instances where certain properties need to be reused throughout the application. Declaring these variables is beneficial as they can be modified once and then utilized consistently across different parts of the application.
Vue.js offers convenient methods to declare global properties, making them reusable throughout the application. In this article, we will look at how to add and use these global properties.
It’s important to note that we’ll be working with Vue.js 3, as Vue.js 2 has reached its End of Life Support (EOL).
Vuejs Pun
Too lazy to react. I only vue !
How To Add Global Properties
It is conventionally recommended to prefix these global properties with a dollar sign or a chosen symbol to prevent potential naming conflicts with other variables within your application.
In the main entry file of your application mainly it could be main.ts or main.js file, you need to add the following code. We will leverage the app.config.globalProperties API.
app.config.globalProperties
An object that can be used to register global properties that can be accessed on any component instance inside the application. Vuejs Documentation.
app.config.globalProperties.$AppName = 'ChiziKarogwaTena'With the declaration above, $AppName becomes available in our application instance, allowing us to access it from any part of our application.
Accessing Global Properties
In your component file, you can access the global variable using the getCurrentInstance() API and accessing it by its name. Check how we access our global property in the code below.
<script setup>
import { getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();
console.log(proxy.$AppName) //ChiziKarogwaTena
</script>The getCurrentInstance function gives us access to the low-level instance of the application, and with the proxy, we can access the global variable using the name we provided.
Resources
Before You Go
Thank you for taking the time to go through this guide. If you found it helpful, sharing it with others would be highly appreciated.
Whether you have questions, suggestions, or simply want to chat, feel free to connect with me on X via @amjohnphilip. Your engagement is valued!
