vuejs configuration: using a global variable?

Question

This seems dumb, but I have it setup like this:

in config/index.js:

module.exports = {
    API_LOCATION: 'http://localhost:8080/api/'
}

then in src/app.js I have:

import Vue from 'vue'
import VueRouter from 'vue-router'
import VueResource from 'vue-resource';

Vue.use(VueRouter);
Vue.use(VueResource);

const App = require("./app.vue");
const home = require("./components/home.vue");
const config = require('../config');
window.config = config;

Then in src/components/home.vue, I have a script block that uses it like so:

<script>
    module.exports = {
        data: function() {
            return {
                obj: null
            }
        },
        created: function() {
            this.$http.get(config.API_LOCAITON + '/call').then(res => {
                // Do some business
            }, res => {
                // Handle some error
            });
        }
    }
</script>

This works but it strikes me as a bad idea to use window to handle an application configuration. What's the more canonical approach here?

score 12 · Accepted Answer · edited Jan 16 '18 at 12:29

12

Import it.

<script>
    import config from "../config"

    module.exports = {
        data: function() {
            return {
                obj: null
            }
        },
        created: function() {
            this.$http.get(config.API_LOCATION + '/call').then(res => {
                // Do some business
            }, res => {
                // Handle some error
            });
        }
    }
</script>

Or just the location.

<script>
    import { API_LOCATION } from "../config"

    module.exports = {
        data: function() {
            return {
                obj: null
            }
        },
        created: function() {
            this.$http.get(API_LOCATION + '/call').then(res => {
                // Do some business
            }, res => {
                // Handle some error
            });
        }
    }
</script>

edited Jan 16 '18 at 12:29

Fábio ZC

798
7
10

answered Jun 25 '17 at 19:54

Bert

80,741
17
199
164

cool, is there a more global approach? Would be using the `config` object in all components and importing each time seems inefficient... – Wells Jun 25 '17 at 21:07
1

@Wells This is [my answer](https://stackoverflow.com/a/43193455/38065) to that previously. It's really as easy as `Vue.protoype.$config = config` in your main script. – Bert Jun 25 '17 at 21:10
excellent! Is there an argument for `Vue.prototype.$config` versus the `new Vue({data: config})` approach? – Wells Jun 25 '17 at 21:49
@Wells If you put it on the prototype it will be available in every component via `this.$config` and it will *not* be reactive. If you put it on data you'll have to pass it to components but it will be reactive. In your case, with it basically being a global value, I'd put it on the prototype, or import it as outlined above. – Bert Jun 25 '17 at 21:54

erajuan · Answer 2 · 2018-09-07T17:12:36.760

5

PROD: config/prod.env.js append your VAR='"value"'

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  API_LOCATION: '"https://production URL"'
}

DEV: config/dev.env.js append your VAR='"value"'

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  API_LOCATION: '"http://localhost"'
})

Your variable will available in process.env.API_LOCATION or process.env.VAR_NAME

edited Sep 07 '18 at 17:12

answered Mar 25 '18 at 00:37

erajuan

2,224
20
31

true if you use webpack, but if you doesn't how do you load dev/prod env? – Pascut Oct 30 '18 at 10:51

score 1 · Answer 3 · answered Mar 24 '21 at 11:44

TL;DR; Global configuration in Vue is done using the .env and .env.production files that you create in the route folder of the app (next to package.json)

I can confirm that in Vue using the Vue CLI .env file gets loaded automatically when you run npm run serve

But keep in mind the following that I checked:

Variables in the .env files have to start with VUE_APP prefix to be automatically picked up and available as process.env.VUE_APP_MYVAR in the code
If you're defining JS objects such as 'VUE_APP_MY_OBJECT={a:100}then you'll have to parse it to JSON before using it in the codeJSON.parse(process.env.VUE_APP_MY_OBJECT)`
If you're not using Webpack you might have to fiddle a bit with it to pick these config files up. According to this answer it looks like webpack should do it automatically. Dunno

score -2 · Answer 4 · edited Aug 28 '18 at 13:51

Simply set ip path(or localhost) in local storage when login successfull and get value from local storage where you need through out the project. here how you set value in localstrage.

// Set value in IpAdress localstorage.setItem('IpAddress','192.168.100.100:8080');

// Get value from IpAddress localstorage.getItem('IpAddress');

in my case whole path looks like: localstorage.getItem('IpAddress')+/api/controller/method|

vuejs configuration: using a global variable?

4 Answers4

Linked