Get config value in vue file

Question

possibly a very simple question: I need to get a configuration value from within an html block in a vue file.

I have this simple config.js

const env = process.env.NODE_ENV

const development = {
  images: {
    server: "http://localhost:4001",
  }
}

const production = {
  images: {
    server: "http://someimageserver.com",
  }
}

const config = {
  development,
  production,
}

module.exports = config[env]

And this simple vue.js

<template>
  <div>
      <img :src="`${config.images.server}/images/someimage.jpg`"/>
  </div>
</template>

At run time, the above throws

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'images')

What should I do to make this work ? Thanks in advance

Note: I can get configuration values from within the script block using, this works perfectly, for example

import config from "../../config"
...
var c = config.images.server

UPDATE: Using vue 3, one can easily achieve this by adding

import config from "../config"
app.config.globalProperties.$config = config

to the main.js file. From there on, $config can be used in templates and scripts across all files. Source: https://v3-migration.vuejs.org/breaking-changes/global-api.html#vue-prototype-replaced-by-config-globalproperties

gengar.value · Accepted Answer · 2021-11-19T02:03:44.300

1

In Vue, you need to initiate a variable and assign what you imported to it, and eventually return this variable. It looks like below:

Vue2:

import config from "../../config"

export default {
  data() {
    return {
      config: config
    }
  }
}

Vue3:

import config from "../../config"

export default {
  setup() {
    return {
      config
    }
  }
}

Then the url in the template should work fine.

-------------------------updates-----------------------

If you want to use config globally, you can register it as a Plugin.

Create plugin.js

import config from "../../config"

export const Config = {
  install(Vue, options) {
    Vue.prototype.$config = function() {
      return config
    }
  }
}

Then, in your main.js, add below code

import * as Plugins from '@/plugin.js'

Vue.use(Plugins.Config.install)

Then you can use $config within templetes like $route without any other import. Surely you can write other global functions in plugin.js and register each of them in main.js.

edited Nov 19 '21 at 02:03

answered Nov 18 '21 at 03:16

gengar.value

198
3

Thx for your help. I know how to do that already. The idea is to not use this technique. For example, using vue-router, one can use $route within a template. Is it possible to do the same with node-config ? $config ? – jhfelectric Nov 18 '21 at 07:24
@jhfelectric You can use $route like this because vue-router uses Plugins. So I guess you want to write your own plugins and use $config globally? I updated my answer and want to know whether it is what you persue. – gengar.value Nov 19 '21 at 02:03
Thx again. I added the config globally using vue3 style: import config from "../config"; app.config.globalProperties.$config = config; which works fine. Still, I am surprised that nothing already included would provide such a way to use configuration easily across all files. I credit you for the answer, and update my initial question with my solution. – jhfelectric Nov 19 '21 at 02:55
@jhfelectric Thanks for your credit. And I'm glad you solved your problem! – gengar.value Nov 19 '21 at 03:13

Get config value in vue file

1 Answers1