How to import a config file into Vue.JS+Vuex

Question

I'm setting configs in my main.js file before calling Vue :

Vue.prototype.$api_url = process.env.NODE_ENV === 'production' ? 'https://api.xxx.com' : 'https://yyy.test:8443'

It works if I access this.$api_url in any Vue file.

But in store.js (Vuex), it's another Vue Instance that is rendered, so I can't access this.$api_url.

What about setting the configs in a file and Vue.use(configs.js) ?

What should I do inside the configs file in order to get its variables in main.js/store.js ?

Thank you.

pranavjindal999 · Accepted Answer · 2018-10-30 13:19:45Z

19

Make a standalone config.js file and export your config object from that file. And import config where ever you need config. You can also assign the same config to Vue's prototype if you want that to be provided in all Vue components.

Update:

So here is how you can do this:

In your config.js

let config;

if (process.env.NODE_ENV === "production") {
  config = {
    $api_url: "https://api.xxx.com",
    timeoutDuration: 30000,
    someOtherProps: 'xyz'
  };
} else {
  config = {
    $api_url: "https://yyy.test:8443",
    timeoutDuration: 1000,
    someOtherProps: 'abc'
  };
}

export { config }

In your main.js

import { config } from 'config';

Vue.prototype.appConfig = config

use this.appConfig.$api_url whatever way you want to use in .vue files

In your store.js

import { config } from 'config';

use config.$api_url whatever way you want to use

edited Oct 30, 2018 at 13:19

answered Oct 30, 2018 at 4:49

pranavjindal999

3,0674 gold badges29 silver badges36 bronze badges

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

2 Comments

Mr.Miel Over a year ago

Thank you, could you provide an example ? Here's what I tried to do :

export function VueConfigs(){     return {         $api_url        : process.env.NODE_ENV === 'production' ? 'https://api.xxx.com' : 'https://yyy.test:8443',      } }

Mark Over a year ago

This is fine, but sometimes you don't want to be putting tokens and things in SCM. Seems like we have a strategy where we use the .env.development or a .env.development.local (unsaved to git) and then Webpack is taking care of it. But this assumes you are building and deploying to a specific lab and those values are present either SCM or apart of some search and replace with CI/CD.

theking2 · Accepted Answer · 2024-02-20 07:50:39Z

0

If you use Vite you can externalize a config file without a store with this:

Create your config js module for instance in `config/settings.js`

const config = {
    apiUrl:'https://yesno.wtf/api'
};

export { config }

Mark the file as external in `vite.config.js`

export default defineConfig({

.
.
.
  build: {
    rollupOptions: {
      external: ['/config/settings.js']
    }
  }
})

Access the file in your `main.js` and store the settings globally

import { config } from './config/settings.js'
app.config.globalProperties.config = config

edited Feb 20, 2024 at 7:50

answered Feb 20, 2024 at 7:38

theking2

3,0982 gold badges36 silver badges51 bronze badges

Collectives™ on Stack Overflow

How to import a config file into Vue.JS+Vuex

2 Answers 2

2 Comments

Create your config js module for instance in `config/settings.js`

Mark the file as external in `vite.config.js`

Access the file in your `main.js` and store the settings globally

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Create your config js module for instance in config/settings.js

Mark the file as external in vite.config.js

Access the file in your main.js and store the settings globally

Comments

Your Answer

Sign up or log in

Post as a guest

Related

Create your config js module for instance in `config/settings.js`

Mark the file as external in `vite.config.js`

Access the file in your `main.js` and store the settings globally