Sometimes when writing applications you need a piece of data, usually a variable, to be available through your whole codebase—maybe even through multiple instances of Vue. So is there a “best practice” when dealing with these situations? Let’s take a look.
In an ideal world (usually what we cover when writing blog posts such as this), you are dealing with a single contained SPA that is being build by Vue CLI through webpack or perhaps Vite. These scenarios are ideal because the solutions for managing a global state (hint, hint).
Whenever you need your data to be accessible to all of your components, you may want to first think about bringing in a global state handler. In Vue 3 the official recommended solution is Pinia or Vuex.
Vuex was the go-to solution for any global state in Vue 2, and has since been updated to work with Vue 3 and the new composition API. However, a new tool has since come to contend with it for the spot of our global state manager—Pinia. I currently recommend that all new projects, and even old ones (when you can afford the time to migrate them) use Pinia. After using it even for a bit, you will feel how intuitive and modular it is—and more importantly, how much less bulky and redundant it is than its previous counterpart.
A global state provided by these libraries allows you to inject it into any component in your application, making it an ideal place to store any and all global variables.
There are times where you may not be allowed or have chosen not to include a dependency in your project—for example when writing a dependency-free library. In these cases, and also when dealing with dynamically generated component trees, such as those of a dynamically generated form or a schema driven component tree, you may need a different solution.
Vue 3 grants us two very important tools—provide and inject. They allow us to grab a piece of data or variable from our top-level component, whatever it may be, and inject it into its children. This tool is very powerful because it doesn’t matter how many levels of nested children your component may have, or how deep the rabbit hole of the component goes—your data will always be ready to be fetched (and even maintain reactivity) by utilizing its sibling method provide.
When dealing with secret data, such as private tokens, it is very important to be able to not expose them to your repository. In these cases, global “variables" are not a good solution. Instead, you should utilize the power of env variables through Vue CLI or env variables in Vite.
This way we can ensure that these private keys are kept hidden from prying eyes, and are only used directly when the application is being built.
Like I mentioned in the beginning, not all scenarios are ideal when working in real-world projects. Sometimes you will be getting some data directly from your backend injected into the HTML via the server. Sometimes you will have to share this “global data” with a jQuery widget or some other current framework like React.
With this solution, a good architecture, clean code and good component composition are a must. The flexibility provided by the window object comes with a lot of responsibility.
She currently holds a position as Lead FE Developer at VoiceThread, and she is the author of the FormVueLatte library as well as a member of the Vuelidate team. In her spare time, she enjoys playing bass, drums, and videogames.
Subscribe to be the first to get our expert-written articles and tutorials for developers!