How to access vuejs webpack config variables in components?

Question

I am using the pattern to store config variables in my /config/[xxx].env.js files like so:

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  API: {
    ROOT: "'http://blah.blah.blah'"
  },
  CONNECTORS: {
    SPOTIFY: {
      CLIENT_ID: "'blah'",
      SCOPES: "'blah'",
      REDIRECT_URI: "'blah'"
    }
  }
})

Note that some of these aren't specifically environment variables, but I want to put these type of config vars in a centralized location.

In my main.js, I can access the variables fine via process.env:

Vue.http.options.root = process.env.API.ROOT

But in a lower level component, "process" does not exist.

I'm aware that it shouldn't, since its not globally defined, but I cannot figure out how to get to that process.env object from within a component. I know I can make it global, but that doesn't "feel right."

Two questions:

Is there some other Vue import / object that I'm missing to get to process.env?
Is there a better way to store these type of centralized values, that might be environment dependent? I've seen things like the ruby config gem that does a nice job of layering environment specific configs on top of default configs.

I did try the npm config gem, but for some reason it is missing other required npms, and appears to be geared toward node.js, AND it feels like I'm doing something wrong not using what vue-cli webpack provides.

user2080225 · Accepted Answer · 2017-11-25 23:31:09Z

3

In general the accepted 'industry standard' way to have components be able to see data from other components, or form really anywhere is to use VueX. It's the analogous thing to Redux in React. It seems a bit complex at first but in reality it's simple, and VueX relieves you of all the hasles of how any given component can see any given data, and solves lots of other issues at the same time. try it out.

Of course another way is to have a module in your app that implements a kind of 'singleton pattern' so that any code can just dump data in and get data out.

answered Nov 25, 2017 at 23:31

user2080225

Sign up to request clarification or add additional context in comments.

2 Comments

Dave Sanders Over a year ago

Yeah, I use Vuex already. That makes sense, I'll just dump it into the store on the app load.

Sean Over a year ago

Vuex is meant for state that will change after the application has loaded for the client. If these build config variables aren't going to change through the vue application's lifecycle you may be better off putting them inside a service container, like vue-container.

Collectives™ on Stack Overflow

How to access vuejs webpack config variables in components?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related