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

Heroku

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site

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

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free →

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay