What is the best way to access data from a static config.json file in TypeScript within a Vue component following the execution of a build:electron command in Vue CLI 3?

Question

What is the best way to access data from a static config.json file in TypeScript within a Vue component following the execution of a build:electron command in Vue CLI 3?

Hey there!

I've been considering whether it's feasible to include a config.json file in a Vue CLI 3 project that can be dynamically read at runtime, both during development and production stages.

This config.json file will hold key strings that the application can utilize to alter content dynamically; for example, changing the video files shown to users or specifying the IP address of a printer.

// config.json

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

I've made attempts to place the file within the assets folder as well as the public folder. I've experimented with importing it into the script lang="ts" part of App.vue using both import and require statements, while also making use of vue-property-decorator.

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

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

OR

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

I have extracted the values by treating it like an API through axios, and alternatively simply accessed the variables by referencing them directly, such as 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 seems to only be accessible at build time and gets compiled into minified JavaScript. Consequently, if a user updates the variables in config.json after the app has been built, the changes won't reflect in the app unless the project is rebuilt. Ideally, I'm looking for a solution where I can modify a value in the build files via config.json and then have the app fetch the updated value at runtime without the need for rebuilding the entire project. Do you think achieving this is possible?

Your assistance on this matter would be truly appreciated.

javascript typescript vue.js electron-builder vue-cli-3

Answer 1

Answer №1

It's important to store your runtime configurations in the public/ folder, but avoid importing them directly. When imported, webpack processes them during build time. Instead, utilize fetch for loading via HTTP.

In Vue, the public folder is where static assets go that should not be processed by webpack and are simply copied to dist/. To access these assets during runtime, use an HTTP request like this:

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

If you need to use these configurations across multiple Vue components without repeating fetch calls, make a single fetch call in your main JavaScript file (e.g. src/main.js) and share the results using Vue mixins, as shown below:

Vue.mixin({
    data() {
        return {
          // Share runtime configs across Vue components
          BRAND: BRAND,
          PRINTER_IP: json.printerIP
        }
      },
    });

Answer 2

It's important to store your runtime configurations in the public/ folder, but avoid importing them directly. When imported, webpack processes them during build time. Instead, utilize fetch for loading via HTTP.

In Vue, the public folder is where static assets go that should not be processed by webpack and are simply copied to dist/. To access these assets during runtime, use an HTTP request like this:

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

If you need to use these configurations across multiple Vue components without repeating fetch calls, make a single fetch call in your main JavaScript file (e.g. src/main.js) and share the results using Vue mixins, as shown below:

Vue.mixin({
    data() {
        return {
          // Share runtime configs across Vue components
          BRAND: BRAND,
          PRINTER_IP: json.printerIP
        }
      },
    });

What is the best way to access data from a static config.json file in TypeScript within a Vue component following the execution of a build:electron command in Vue CLI 3?

Answer №1

Similar questions

Remove objects from an array if they share identical key values

Unable to locate the name 'JSON' in the typescript file

The combination of Observable streams in combineLatest will persist even if one encounters a

What is causing my component to render the count value twice?

Utilizing AJAX and PHP POST to dynamically refresh innerHTML content with MySQL data updates

Aligning text vertically to the top with material UI and the TextField component

Why is my backend sending two Objects in the http response instead of just one?

Exporting numerous modules from an NPM package

Implementing real-time data updates on a webpage using Node.js

Function that activates traffic lights

Leveraging icons with Bootstrap 4.5

Filtering Dropdown List in AngularJS with a Text Input Field and a Submit Button for Filtering Option Values

Looking for assistance with navigating through this URL using Python (requests, beautifulsoup, or selenium) or Javascript (node js, puppeteer)?

Angular II slash avoiding Pipe

Utilizing AngularJS to invoke a particular function within a PHP script: A comprehensive guide

Retrieve the child nodes from the array and organize them into a

Tips for converting JSON information on a website and inserting it into a designated division?

Creating robust unit tests for Node.js applications with the help of redis-mock

Setting up Babel to effectively function across multiple directories

Long Polling results in the call stack size being exceeded to the maximum limit