Vercel with Nuxt.js 2

Learn how to make Vercel, Nuxt.js 2, and Dotenv Vault work together in a simple web app. This tutorial assumes you are already familiar with .env files and know how to sync them.

You can find a complete example repo here.

Package installation

First, install the dotenv package with npm.

CLI

npm install dotenv --save

Initial setup

Create an app.vue file for your Nuxt.js application in the project root and add a basic page template to it.

Insert a script segment after the template and import the dotenv package within it. Don’t forget to call the config method:

Vue.js

// app.vue

<template>
  <div>
    <NuxtWelcome />
  </div>
</template>

<script>
import dotenv from 'dotenv'
dotenv.config()
console.log(process.env)
</script>

Example.

Create a nuxt.config.js file in your project root and call the module.exports method with the following parameters:

Nuxt.js

// nuxt.config.js

module.exports = {
require('dotenv').config(),
  {
    build: {
      publicPath: 'public/'
    }
  }
}

Example.

This will allow you to expand the Nuxt.js generate function, so you can call the dotenv package from any location in your project.

When ready, include a reference to the expanded function by inserting the following within your package.json file:

JSON

// package.json
"scripts": {
  "build": "nuxt build",
  "dev": "nuxt dev",
  "generate": "nuxt generate -c nuxt.config.generate.js",
  "preview": "nuxt preview",
  "postinstall": "nuxt prepare"
},

Example.

Build the Vault

Make sure you are logged in and in sync with your Vault first then run npx dotenv-vault build from CLI in your project root.

This will build an encrypted .env.vault file that serves as a unique identifier for your project in Dotenv.

Inside it you will find the public keys for every environment you have setup and must be committed to source.

CLI

npx dotenv-vault build

Fetch the keys

With the Vault successfully built, you now can fetch the .env.vault decryption keys for each environment in the Vault project.

Running npx dotenv-vault keys production, for example, will return the production key and so will development and ci respectively.

CLI

npx dotenv-vault keys production
remote:   Listing .env.vault decryption keys... done

dotenv://:[email protected]/vault/.env.vault?environment=production

Set deployment

Now that you have access to the keys for every environment, you will have to reference them as environment variables in your Vercel project’s settings.

To do that, navigate to your Project, then the Settings tab to reach the Environment Variable panel.

Set as key DOTENV_KEY and as value the decryption key returned in the previous step dotenv://:[email protected]/vault/.env.vault?environment=production.

Commit and push

That’s it!

Commit those changes safely to code and deploy to Vercel.

When the build runs, it will recognize the DOTENV_KEY, decrypt the .env.vault file, and load the production environment variables to ENV.

If a DOTENV_KEY is not set when developing on local machine, for example, it will fall back to standard Dotenv functionality.

You’ll know things worked correctly when you see 'Loading .env from encrypted .env.vault' in your Vercel logs.