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.

Hammad · Accepted Answer · 2022-11-23 08:10:36Z

34

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

Update Nov 23, 2022 (Adding Vue 3 Version):

// VUE 3 Version
const app = createApp(App)

fetch(process.env.BASE_URL + "config.json")
  .then((response) => response.json())
  .then((config) => {
    // either use window.config
    window.config = config
    // or use [Vue Global Config][1]
    app.config.globalProperties.config = config
    // FINALLY, mount the app
    app.mount("#app")
  })

edited Nov 23, 2022 at 8:10

answered Feb 7, 2020 at 13:22

Hammad

1,3381 gold badge15 silver badges28 bronze badges

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

12 Comments

Maurizio Ricci Over a year ago

Is it possibile to require the config file from webpack with require()? I tried with require(process.env.BASE_URL + 'config.json') but it's not working.

Hammad Over a year ago

@MaurizioRicci it is not possible to use require as webpack will convert the dynamic links to inline json, which is not desired results. Key is to use fetch() here and fetch external json file

Andy Over a year ago

Make sure you request a new file with each request by appending a dynamic parameter to the url (eg: ?t=currentTimestamp). Otherwise browsers will cache the request. Or add the appropriate Cache-Control header

AlfredoDaAs Over a year ago

How can I access this file in a js file inside my src/ folder (e.g api.js that needs token key for requests)

Hammad Over a year ago

@abbas Yes, definitely you just have to wrap the app.mount() in the then callback of fetch

|

rip747 · Accepted Answer · 2020-12-07 21:39:22Z

4

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 :)

answered Dec 7, 2020 at 21:39

rip747

9,4438 gold badges41 silver badges49 bronze badges

3 Comments

bernie Over a year ago

Why do you split the script tag in 2 parts and then join them with a concatenation?

rip747 Over a year ago

@bernie cause otherwise it cause errors. See this SO question for a full explanation and various methods to escape. stackoverflow.com/questions/236073/…

IngoB Over a year ago

Wth vite I am getting "[vite] Internal server error: URI malformed".

Dalija Prasnikar · Accepted Answer · 2024-04-24 19:45:56Z

3

Inspired by @Hammad, but for vue.js 3 using typescript and the component API, as well as the app.provide() mechanism.

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

{
  "KEY": "value"
}

Then in your /src/main.ts file

fetch(import.meta.env.BASE_URL + 'config.json')
  .then((response) => response.json())
  .then((config) => {
    for (const key in config) {
      app.provide(key, config[key])
    }
    app.mount('#app')
  })

Finally, to read the configuration inside components:

<script setup lang="ts">
import { inject } from 'vue'

...

const config_value = inject('KEY')

edited Apr 24, 2024 at 19:45

Dalija Prasnikar♦

28.7k46 gold badges97 silver badges179 bronze badges

answered Apr 5, 2024 at 10:03

assaf

431 silver badge6 bronze badges

2 Comments

theking2 Over a year ago

This works for my current application

Michael Over a year ago

This works fine for me. AND - the solution "injected" me to sue provide/inject. Thx.

Andy · Accepted Answer · 2020-02-07 13:16:03Z

0

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

answered Feb 7, 2020 at 13:16

Andy

7,1972 gold badges33 silver badges29 bronze badges

2 Comments

Hammad Over a year ago

This solution needs an external server i.e. node.js. See my solution below which doesn't require any external server. Also, the suggested framework and code example doesn't correspond to any specific library

Andy Over a year ago

Yes it does. I was already using Node to serve the static files (and other things) so it fit in my case.

Collectives™ on Stack Overflow

Vue js with an external configuration file

4 Answers 4

12 Comments

3 Comments

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

12 Comments

3 Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related