CODEWITHSUNDEEP
vue.js
amorphic
amorphic

Reputation: 760

Application-wide globals in vue.js

Does Vue.js have an idiomatic way of declaring application-wide globals like baseUrl and then referencing them throughout the app (for API calls etc)?

If so, what is the best way to configure such globals at build-time to create development, test and prod instances? For example, I imagine doing export BASEURL='http://dev.myapp.com', running a build and getting an app with this baseUrl configured. This would in turn allow me to create automated builds for Continuous Delivery certain branches are updated (develop -> dev.myapp.com, master -> www.myapp.com etc).

Thanks!

Upvotes: 1

Views: 414

Answers (1)

Yerko Palma
Yerko Palma

Reputation: 12339

What I do: use some state management tool, like Vuex.

If you don't want to add complexity to your app, I use a parent Vue instance, let say App.vue and define global data in that instance, then when I need that data from the parent I call this.$root.baseUrl in case you want the baseUrl. Notice that you can also call this.$parent.baseUrl but this will only work for direct childs, if you are inside a child of a child, you wont get the global data, that's why is better the $root object.

Upvotes: 3

Related Questions