DEV Community

Cover image for How to load env for Nuxt layers
Ismael Garcia
Ismael Garcia

Posted on

How to load env for Nuxt layers

How to load env variables for a Nuxt project in a monorepo

When working on project that use a monorepo with Nuxt Layers, we will need to load
environment variables that are located on the root of the project:

- Project-root
    - packages
        - shared-ui
        - shared-auth
        - shared-content
        - main-app
    -.env -> use this for all the layers

Enter fullscreen mode Exit fullscreen mode

The solution for this problem is really:

"scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev --dotenv ../../.env",//<- put the path of your env file
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  }

Enter fullscreen mode Exit fullscreen mode

For build and other scripts, this will be the same as well.

Please if anyone have a better way please comment below and let's learn together

Can someone submit this article to the Daily dev, I can't do my self no enough reputation just 10 at the moment

Audio version https://podcasters.spotify.com/pod/show/ismael-garcia443/episodes/The-Loop-Vuejs---How-to-load-env-variables-for-a-Nuxt-project-in-a-monorepo-e2ju3jn

Top comments (2)

Collapse
 
avanichols profile image
Ava Nichols

This is pretty informative! Just a quick questionβ€”how does this approach handle different environments like staging or production?

Collapse
 
leamsigc profile image
Ismael Garcia

You can create a script on the package json

github.com/leamsigc/nuxt-monorepo-...

example:

"build": "nuxt build --dotenv ../../.env.production",
"stage": "nuxt build --dotenv ../../.env.stage",
Enter fullscreen mode Exit fullscreen mode