Vue js with an external configuration file

Question

I'm wondering if it is possible to let to a Vue App to read an external configuration file. I imagine something in which I deploy the application, ship the application with the config file; at this point it should be possibile to change the configuration in the external file without having to rebuilt the entire application. Is there someway I can achieve that result? Now I am using a separated Vuex store but i cannot change configuration without rebuilding the entire app.

I forgot to mention that the project is made with Vue CLI.

Answer 1

You can fetch config.json from public folder and then load your Vue app in the resolve callback

Place your configuration keys in /public/config.json file

{
  "KEY": "value"
}

Then in your /src/main.js file

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")
  })

You will have your configuration loaded application-wide. You can then just use

mounted() {
  this.$config.KEY // "value"
}

in your Vue components

Answer 2

Here's how I did it:

Create a config.js file in your public folder with the settings you want:

window.VUE_APP_API_KEY = 'blahblahblah';

Then in your public/index.html add the following lines to your head section:

  <script type="text/javascript">
    var cachebuster = Math.round(new Date().getTime() / 1000);
    document.write('<scr' + 'ipt type="text/javascript" src="<%= BASE_URL %>config.js?cb=' + cachebuster + '"></scr' + 'ipt>');
  </script>

Then in your VUE app, you just have to call window.VUE_APP_API_KEY. Simple, quick :)

Answer 3

I have a route served by node which returns a dynamically created JS files and defines a global object where I store that config. Nothing that is Vue dependent.

In index.html:

 <script type="text/javascript" src="config.js"></script>

In node (server side):

  app.get('/config.js', (request, reply) => {
    reply.header('Content-Type', 'application/javascript');
    reply.send(`MyConfig = ${JSON.stringify(config)}`);
  });

In components (or anywhere else):

{
  data: () => ({
    someField: MyConfig.someField
  })
}