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

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"
  }

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

Hey there, here's where you can find me on the internet

LinkedIn - leamsigc

GitHub - @leamsigc

Twitter - @leamsigc

Instagram - @leamsigc

Twitch - @leamsigc

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

Comments

[Ava Nichols]

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

[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",