DEV Community

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

Posted on

2 1 1 1 1

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

view raw socials.md hosted with ❤ by GitHub

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

Speedy emails, satisfied customers

Postmark Image

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (2)

Collapse
 
avanichols_dev 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

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay