[RESOLVED] Nuxt3 and netlify hosting env variables
Hey! First of all "Nuxt3 is epic!".
But I need some help with Nuxt 3 Netlify environment variables. I'm using Nuxt 3 in combination with useRuntimeConfig and Mongoose. I'm inserting MongoDB records by calling an API route in my Nuxt server. The environment variable from my .env file works locally but not on Netlify. I did set up the environment variable in the Netlify dashboard. Can anyone tell me why the environment variable is not available? The code also works when hardcoding the connection string, so I'm sure it's an issue with the environment variable.
What I tried:
- Modified the nuxt.config.ts to add the runtimeconfig
export default defineNuxtConfig({
runtimeConfig: {
mongoDBURI: process.env.NUXT_ENV_MONGO_URI
},
)
- Used useRuntimeConfig in one of my server api files "server/api/map.ts"
- Used useRuntimeConfig in my index.ts which was injected in the nitro plugin like:
export default defineNuxtConfig({
nitro: {
plugins: ["~/server/index.ts"]
}
}
- added the env variables to the netlify dashboard and tried it with a "NUXTENV" prefix
Mongoose connect example (works when hardcoding the connectionstring):
import {Nitro} from "nitropack"
import mongoose from "mongoose"
export default async (_nitroApp: Nitro) => {
const config = useRuntimeConfig();
try{
var connString = config.mongoDBUR
console.log(@@ connecting to db...... ${connString} @@);
await mongoose.connect(connString);
console.log("@@ connected to mongo db @@");
}
catch(ec){
console.error("@@ error connecting to mongoDb @@:", ec);
}
}
Can anyone help me with this issue? Thanks a lot!26 Replies
added the env variables to the netlify dashboard and tried it with a "NUXTENV" prefixthe env key in your Netlify dashboard looks different from what's in you .env file. did you mean to type
NUXT_ENV_MONGO_URI as indicated in your env file?it should be NUXT_MONGO_DB_URI
See https://www.youtube.com/watch?v=_FYV5WfiWvs
Alexander Lichter
YouTube
Nuxt's runtimeConfig - The most common mistake
🤯 Throughout my projects, consultancies and code reviews I came across lots of interesting findings - also with regards to Nuxt's runtimeConfig feature. Repeatedly I noticed ONE big mistake though which you might do at this very moment in your project. In this video, explain what it is, why you shouldn't do it and how to use runtimeConfig correc...
Sorry both are nuxt_env
@Luckystriike, all good now?
Nope
did you redeploy the app on Netlify?
Did this
that usually works
Let me screenshot stuff for you and send it in the help thread
why don't you change the env key to something like
VITE_MONGO_URI and see if that worksI was thinking to change it to something without _?
there's no harm in trying
Just strange that it works locally with a .env file
really strange. could you have possibly forgotten to set the value of the URI on Netlify?
Nope 🙂 also fully deployed a new domain and didn’t work either
Mhh
hmmm. sorry I couldn't help u out here
hopefully someone else will drop in to assist
Np it is probably something stupid 😦 but thanks for the help so far
welcome
Fixed it! Used the npm dotenv package, initialized the config in the plugin init function and made a toml build file. Looks like it is working now 😉
Oh great! 🚀
you don't need it at all
your problem is still as shown in here ^
if you set runtimeConfig.private.myVar it should be
NUXT_PRIVATE_MY_VARI tried renaming the vara to NUXTPRIVATE but didn’t work. Am i doing something wrong here (keep the NUXTPRIVATE rename in mind)?
https://discord.com/channels/473401852243869706/1225087322106757172/1225120327554830346
the right hand side doesn't really matter. The name in the runtimeConfig dictates the name of the env variable. Did you watch the video?
I also renamed the nuxt.config name. Maybe i missed something. I’ll continue watching the video later today/tomorrow.
Hey! I watched your video. I did use the prefix already, but there was another issue. I used…
‘const config = useRuntimeConfig();
config.mongoUri’
But it actually should have been:
‘const config = useRuntimeConfig();
config.private.mongoUri’
Changing this fixed the issue. Thanks for sharing the video and pointing me in the right direction.
Glad it helped 🙏🏻