DEV Community

Environment variables in Nuxt 3

Amit Gurbani on August 18, 2022

To use environment variables in Nuxt 3, we need to use runtimeConfig in nuxt.config. import { defineNuxtConfig } from "nuxt"; // https://v3.n...
Collapse
 
kissu profile image
Konstantin BIFERT •

Also to mention that if you need to use them into a composable, you need to import it inside of it. 👍🏻

Collapse
 
cengdpu profile image
Abdurrahman Seyidoglu • • Edited

@kissu Could you please elaborate what should we import inside the composable?
Because I'm facing a problem when I use useRuntimeConfig or useNuxtApp inside composable I get server error 500

I'm using compossables directory to store all of my fetch functions that I'm going to use globally in my project

Collapse
 
kissu profile image
Konstantin BIFERT • • Edited

I saw a similar question on Stackoverflow but I was not able to find out a solution (probably doable by checking the Github issues/discussions tho).
Sorry for not more helpful on that one.

Thread Thread
 
cengdpu profile image
Abdurrahman Seyidoglu •

No worries, you've already helped me alot with my questions on Stackoverflow ^^

Thread Thread
 
kissu profile image
Konstantin BIFERT •

Ah ? Happy to help anytime! 😉 ♥

Collapse
 
amitgurbani profile image
Amit Gurbani •

import { useRuntimeConfig } from "#app";
See if this helps.

Also are you using it correctly?
github.com/nuxt/framework/discussi...

@cengdpu

Collapse
 
v3nt profile image
v3nt •

Also can't seem to access apiSecret or add new private variables here? Docs seem confusing.

Collapse
 
amitgurbani profile image
Amit Gurbani •

Private variables are accessible only in server-side i.e server directory

Collapse
 
amitgurbani profile image
Amit Gurbani •

See this

Thread Thread
 
amitgurbani profile image
Amit Gurbani •
Collapse
 
v3nt profile image
v3nt • • Edited

Nice!

What about outside of the Nuxt wrapper?

ie in api, middelware files or plain .ts file?