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

Good afternoon.

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. I was wondering if it is possible to do this.

Any help you can provide will be greatly appreciated.

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, Dec 06 '18 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, Dec 24 '19 at 04: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, Dec 25 '19 at 08:40

score 5 · Accepted Answer · answered Jan 09 '20 at 21:21

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

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, Apr 19 '20 at 07:40
How do I use this (let's say PRINTER_IP) in router, store etc? — Yasin Okumuş, Sep 16 '21 at 14:18

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 Answers1