Understanding environments in VueJS

In this post I am going to demonstrate how to use development and production environment variables in Vue.

Everybody knows what Vue is already and why it’s so awesome, so I am just going to skip all that part.

Vue can be installed in either ways: 

• Via a CDN
• As a standalone app via the CLI

I will be using a standalone installation to demonstrate how to set different environment variables. Launch your terminal and do a global installation of vue cli.

npm install -g vue-cli
vue init webpack using-environments

The init command creates a new vue app. Complete the set up by following the prompts. When this is done you have a standalone app.

Now let’s take a look at the folder structure of our newly created app.

config :
The config directory contains four files

- dev.env.js
- index.js
- prod.env.js
- test.env.js

When you are in development mode, vue loads up all the variables set in the dev config file and is accessible from any component using process.env.THE_ENV_VARIABLE where THE_ENV_VARIABLE is any variable name you choose to give it.

When you are in production environment, vue loads up the variables in the prod config file. Also when you are running tests, vue loads up the variables set in the test config file.

Open up the dev.env.js file in your editor

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

module.exports = merge(prodEnv, {
 NODE_ENV: ‘“development”’
})

As a proof of this, we will modify the default App component created with this installation, to display the current environment we are in.

src/App.vue

Clear the contents of the file and paste the following code.

<template>
    <div id=”app”>
        {{ env }}
    </div>
</template>

<script>
export default {
   name: ‘App’,
   data () {
     return {
         env: process.env.NODE_ENV
     }
  }
}
</script>

Now launch the app with npm run dev . You should see the value of the environment variable displayed on your browser. Let’s add another variable in the dev config and display that in the component.

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

module.exports = merge(prodEnv, {
 NODE_ENV: ‘“development”’,
 APP_NAME: ‘“using environments”’
})

<template>
 <div id=”app”>
 {{ appName }}
 </div>
</template>

<script>
export default {
   name: ‘App’,
   data () {
     return {
       appName: process.env.APP_NAME
     }
  }
}
</script>

Notice however that the newly added variable was not displayed on the browser, why is this so? Environment variables in vue-cli are only used during build time not runtime. So whenever you add a new environment variable, you need to relaunch the app by running npm run dev or npm run build .

Environment variables in vue-cli are only used during build time not runtime. So whenever you add a new environment variable, you need to relaunch the app by running npm run dev or npm run build .

Summary:

Vue implements a clean way to manage environment variables. If you need to set certain variables for different environments, it’s as simple as adding the variable in the respective config file and vue is able to load the variables depending on the active environment. As a demonstration of this, say you have your api running locally on http://localhost:8000/api/vi/items and your api’s prod url is https://my-prod-api/api/v1/items then you can set a base_url in the dev and prod config files. Vue knows when to use each based on the active environment.

Then in your component you can simply reference this variable and vue takes care of the rest.

<template>
 <div id=”app”></div>
</template>

<script>
export default {
  mounted () {
    let url = process.env.BASE_URL + '/items'

this.$http.get(url)
    .then((response) => {
      console.log('items', response)
    }, (response) => {
      console.log('error', response)
    })
  },
  data () {
    return {}
  }
}
</script>

If you found this useful, kindly share.