Deploy a Nuxt.js App to Edgio

Deploy a Nuxt.js app with an encrypted .env.vault file to Edgio.

Initial setup

Create a Nuxt.js application.

npx nuxi@latest init

This will create a handful of files.

ls -1
README.md
app.vue
nuxt.config.ts
package.json
public/
server/
tsconfig.json

Edit app.vue to include HELLO.

<script setup lang="ts">
  const config = useRuntimeConfig()
</script>

<template>
  Hello {{config.public.HELLO}}.
</template>

Edit nuxt.config.ts to include runtimeConfig environment variables.

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      HELLO: process.env.HELLO
    }
  },
  devtools: { enabled: true }
})

Prepare the app for Edgio.

npx @edgio/cli init

Commit that to code and deploy it to Edgio.

npm run edgio:deploy

edgio.link

Once deployed, your app will say 'Hello .' as it doesn't have a way to access the environment variable yet. Let's do that next.

Install dotenv

Install dotenv.

npm install dotenv --save # Requires dotenv >= 16.1.0

Create a .env file in the root of your project.

# .env
HELLO="World"

As early as possible in nuxt.config.ts require and load dotenv.

// https://nuxt.com/docs/api/configuration/nuxt-config
require('dotenv').config()

export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      HELLO: process.env.HELLO
    }
  },
  devtools: { enabled: true }
})

Try running it locally.

npm run dev
# Visit http://localhost:3000

It will say 'Hello World'.

Great! process.env now has the keys and values you defined in your .env file.

That covers local simulation of production. Let's solve for the real production environment next.

Build .env.vault

Push your latest .env file changes and edit your production secrets. Learn more about syncing

npx dotenv-vault@latest push
npx dotenv-vault@latest open production

Use the UI to configure those secrets per environment.

www.dotenv.org

Then build your encrypted .env.vault file.

npx dotenv-vault@latest build

Its contents should look something like this.

#/-------------------.env.vault---------------------/
#/         cloud-agnostic vaulting standard         /
#/   [how it works](https://dotenv.org/env-vault)   /
#/--------------------------------------------------/

# development
DOTENV_VAULT_DEVELOPMENT="/HqNgQWsf6Oh6XB9pI/CGkdgCe6d4/vWZHgP50RRoDTzkzPQk/xOaQs="
DOTENV_VAULT_DEVELOPMENT_VERSION=2

# production
DOTENV_VAULT_PRODUCTION="x26PuIKQ/xZ5eKrYomKngM+dO/9v1vxhwslE/zjHdg3l+H6q6PheB5GVDVIbZg=="
DOTENV_VAULT_PRODUCTION_VERSION=2

Set DOTENV_KEY

Fetch your production DOTENV_KEY.

npx dotenv-vault@latest keys production
# outputs: dotenv://:[email protected]/vault/.env.vault?environment=production

Set DOTENV_KEY on Edgio using the UI.

edgio.app

Deploy

You'll have to delete your .env file now to make use of the .env.vault file with edgio and Nuxt. Otherwise, Nuxt prioritizes the .env file over everything.

rm .env

Commit those changes safely to code and redeploy.

npm run edgio:deploy

That's it! On deploy, your .env.vault file will be decrypted and its production secrets injected as environment variables – just in time.

yourapp.edgio.link

You'll know things worked correctly when you see 'Loading env from encrypted .env.vault' in your logs. If a DOTENV_KEY is not set (for example when developing on your local machine) it will fall back to standard dotenv functionality.

edgio.app