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?