Add an external configuration file in Vue for deployment?

Question

I have to call an API (json-server) to retrieve data in order to populate my dropdowns within my Vue application. Instead of hard-coding within the app, I want to create an external configuration file where I can put any links and eventually put server details for deployment. Currently, I have this but for some reason when I reference the Key in my vue component, it says it undefined. I'm not sure where I'm going wrong.

    /public/config.json
    
   {
     "API_URL": "localhost:3000"
   }

Here is the relevant parts of the main.js file:

    /main.js

    fetch(process.env.BASE_URL+ "config.json")
    .then((json) => {
    json().then((config) => {
    Vue.prototype.$config = config
    new Vue({
     router,
     store,
     render: (h) => h(App)
   }).$mount("#app")
  })
 })

In my Vue component, I'm trying to reference it like this, but it is showing up as undefined.

      <script>
      export default {
      mounted() {
        fetch(this.$config.API_URL)
            .then(res => res.json())
            .then(data => this.mailboxes = data)
            .catch(err => console.log(err.message))
      }
      }

      </script>

If there is another way to go about this please let me know.

i think .env file is the solution, just make sure that he is added in your .gitignore, for more detais check the officiel doc — khofaai
– khofaai, Commented Jul 27, 2021 at 14:14
This question is similar to: Vue js with an external configuration file. If you believe it’s different, please edit the question, make it clear how it’s different and/or how the answers on that question are not helpful for your problem. — theking2
– theking2, Commented Sep 2, 2024 at 13:41

Michal Levý · Accepted Answer · 2021-07-27 14:40:15Z

2

If you want the app build once and use same bundle on multiple servers with different configuration, this is right way to do it. ENV variables suggested in comments wont work as the values are "baked in" to the bundle...

However you are using fetch in a wrong way. fetch returns response which you are trying to call instead of calling response.json()

fetch(process.env.BASE_URL+ "config.json")
  .then((response) => response.json())
  .then((config) => {
    Vue.prototype.$config = config
    new Vue({
      router,
      store,
      render: (h) => h(App)
    }).$mount("#app")
  })

edited Jul 27, 2021 at 14:40

answered Jul 27, 2021 at 14:24

Michal Levý

38.7k8 gold badges82 silver badges93 bronze badges

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

2 Comments

nobodyAskedYouPatrice Over a year ago

I'm running into an issue where in the fetch code above it says "BASE_URL" is undefined and on the fourth line $config is unused. In my Vue component when I use fetch(this.$config.API_URL), it says API_URL is an unresolved variable. Do I have to define it elsewhere?

Michal Levý Over a year ago

Are you using TypeScript? Is this Vue CLI project? Sounds like errors from Vetur/ESLint, not actual runtime errors...

Collectives™ on Stack Overflow

Add an external configuration file in Vue for deployment?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related