How can I read values from a static config.json file to TypeScript in a Vue file after running build:electron in Vue CLI 3?

Question

I was wondering whether it is possible to add a config.json file to a Vue CLI 3 project that can be read at runtime, both during development and production.

The config.json file will contain some strings the app can use to change content dynamically, such as the video files that are displayed to a user and the IP address of a printer.

// config.json

{
    "brand": "eat",
    "printerIP": "192.168.0.4"
}

I have attempted to place the file in the assets folder and the public folder. I have tried importing it to the script lang="ts" element of App.vue using both import and require statements. I am using the vue-property-decorator.

// App.vue (<script lang="ts">)

const config = require('../public/config.json');

OR

import config from '../public/config.json';

I have accessed the values both by processing it like an API using axios and simply accessing the variables using, for example, config.brand.

// App.vue (<script lang="ts">)

import axios from 'axios';

@Provide() private brand: string = "";

axios
    .get('.config.json')
    .then(response => {
        this.brand = response.data.brand;
    })

OR

this.brand = config.brand;

Unfortunately, the data is only read at build time and compiled into minified JavaScript. This means the app is not updated even if the user updates the variables in config.json after the app is built. I need to be able to access config.json in the build files, update a value and then have the app read the new value at runtime without the need to build the project again.

Is it possible to do this?

Can't you place the .json file in the public folder and import it during the initialization process of your app? e.g (load json when app gets mounted) — funkysoul
– funkysoul, Commented Dec 6, 2018 at 11:22
Were you ever able to get your config.json working? I'm trying to use this same technique for configuring static Vue.js websites hosted by AWS S3 without compiling AWS stack specific environment variables into the minified javascript code, but so far I haven't been able to avoid compile-time minification of the variables in my static config.json. — Ian Downard
– Ian Downard, Commented Dec 24, 2019 at 4:42
It appears to me that any variables in the JavaScript, whether in a Vue file directly or imported, are compiled before the website is built and can't be changed afterwards. The results of API calls can be dynamic, so my solution was to keep the variables somewhere that can be targeted with an API call. In my case I created a .NET Core web API and kept my variables in that layer, and accessed them through a controller using axios in my Vue project. — stack145
– stack145, Commented Dec 25, 2019 at 8:40

Ian Downard · Accepted Answer · 2020-01-09 21:21:59Z

5

You're right in thinking that you should put runtime configurations under the public/ folder, but don't import them. The import would get resolved during build time and its result would go through webpack. Instead, use fetch to load them via HTTP.

Vue designates the public folder as the place to put static assets that should bypass webpack and simply by copied to dist/. You can access them during runtime with an HTTP request like this:

const getRuntimeConfig = async () => {
  const runtimeConfig = await fetch('/config');
  return await runtimeConfig.json()
}

If you want to use those runtime configurations in multiple Vue components without doing multiple fetches, then do one fetch in the main Javascript file that drives your Vue app (e.g. src/main.js) and share the result via Vue mixins, like this:

  Vue.mixin({
      data() {
        return {
          // Distribute runtime configs into every Vue component
          BRAND: BRAND,
          PRINTER_IP: json.printerIP
        }
      },
    });

answered Jan 9, 2020 at 21:21

Ian Downard

4517 silver badges10 bronze badges

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

3 Comments

Jammer Over a year ago

Struggling to get this working. The Json is loading OK but how do you get the values out into variabled like BRAND? const c = getRuntimeConfig(); console.log(c); just logs a promise ...

Jammer Over a year ago

Could you complete the sample code a bit more for us noobs?

Yasin Okumuş Over a year ago

How do I use this (let's say PRINTER_IP) in router, store etc?

Collectives™ on Stack Overflow

How can I read values from a static config.json file to TypeScript in a Vue file after running build:electron in Vue CLI 3?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related