Unlocking the Power of Environment Variables in Nuxt.js Web Applications

Introduction

There is a feature from Nuxt.js that provide environment variables on the cross-client and server side. From the Nuxt.js configuration, you need to setup the variables that you want to share in the env section. I want to share that these variables could be in a separate file and can be used on pages or components and other files.

Getting Started

Create a separate env configuration file in ./config/env.js and put your environmental variables in the files like in the sample below:

const runEnv = process.env.APP_ENV ? process.env.APP_ENV : 'local'
const ENV = {
  local: {
    API_URL: 'http://localhost.local:9001/api',
    AUTH_SECRET: 'KDL:@SCKD-W(IK)-L0C4L',
    SECRET: 'G23OLP02@12!K-L0C4L',
    JWT_SIGNING_PRIVATE_KEY: 'LSP@134MspO-L0C4L'
  },
  dev: {
    API_URL: 'http://localhost.dev:9002/api',
    AUTH_SECRET: 'KDL:@SCKD-W(IK)-DEV',
    SECRET: 'G23OLP02@12!K-DEV',
    JWT_SIGNING_PRIVATE_KEY: 'LSP@134MspO-DEV'
  },
  prod: {
    API_URL: 'http://localhost/api',
    AUTH_SECRET: 'KDL:@SCKD-W(IK)-PR0D',
    SECRET: 'G23OLP02@12!K-PROD',
    JWT_SIGNING_PRIVATE_KEY: 'LSP@134MspO-PR0D'
  }
}
module.exports = ENV[runEnv] // [local, dev, prod]

Next, we will set the configuration files to load these env variables in nuxt.config.js file.

Nuxt.js configuration

Open your nuxt.config.js and import your environment variables in the env section. This is where we put and set up environment variables in the Nuxt.js ecosystem:

import ENV from './config/env'

export default {
  env: { ...ENV }
}

If you run this on development or build / start mode, you can access them by using process.env.* variables such as process.env.API_URL or process.env.AUTH_SECRET for using them in your Nuxt.js ecosystem and you can combine them inside your Nuxt.js modules.

Using environment Variables

In pages, components, or plugin you can get the environment variables using Node.js process.env just like this example ./plugins/axios.js file:

import axios from 'axios'

const env = process.env
const { API_URL } = env

axios.defaults.baseURL = API_URL
axios.defaults.timeout = 1e3 * 60 * 2

// Add a request interceptor
axios.interceptors.request.use(
  (req) => {
    return req
  },
  (err) => {
    return Promise.reject(err)
  }
)

// Add a response interceptor
axios.interceptors.response.use(
  (res) => {
    return res
  },
  (err) => {
    return Promise.reject(err)
  }
)

const service = axios

export default service

Or using environment variables in other configuration files for example endpoint for the RESTful API:

const API_URL = process.env.API_URL

/* Docs */
const MENUS = `${API_URL}/public/menus`
const CATEGORIES = `${API_URL}/public/categories`
const ARTICLE = `${API_URL}/public/article`
const ARTICLES = `${API_URL}/public/article/all`

Next, you can set your Nuxt.js into a deployment scripts such as PM2 for different environment variables using these references.

There are several ways to deploy your Nuxtjs website, you could use any hosting service provider or use free static website hosting like Vercel and Netlify.

I have been using these hosting service provider for quite some time for publish several of my web projects. As a web developer, these hosting providers have been extremely helpful in terms of hosting my static websites.

I hope that this will help you to get your Nuxt.js environment configuration files, thank you for stopping by and reading this.