N
NuxtLuckystriike

[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!
P
pyplacca16d ago
added the env variables to the netlify dashboard and tried it with a "NUXTENV" prefix
the 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?
M
manniL16d ago
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...
L
Luckystriike16d ago
Sorry both are nuxt_env
P
pyplacca16d ago
@Luckystriike, all good now?
L
Luckystriike16d ago
Nope
P
pyplacca16d ago
did you redeploy the app on Netlify?
L
Luckystriike16d ago
Did this
No description
P
pyplacca16d ago
that usually works
L
Luckystriike16d ago
Let me screenshot stuff for you and send it in the help thread
P
pyplacca16d ago
why don't you change the env key to something like VITE_MONGO_URI and see if that works
L
Luckystriike16d ago
I was thinking to change it to something without _?
P
pyplacca16d ago
there's no harm in trying
L
Luckystriike16d ago
No description
No description
No description
No description
No description
L
Luckystriike16d ago
Just strange that it works locally with a .env file
P
pyplacca16d ago
really strange. could you have possibly forgotten to set the value of the URI on Netlify?
L
Luckystriike16d ago
Nope 🙂 also fully deployed a new domain and didn’t work either Mhh
P
pyplacca16d ago
hmmm. sorry I couldn't help u out here hopefully someone else will drop in to assist
L
Luckystriike16d ago
Np it is probably something stupid 😦 but thanks for the help so far
P
pyplacca16d ago
welcome
L
Luckystriike16d ago
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 😉
P
pyplacca16d ago
Oh great! 🚀
M
manniL16d ago
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_VAR
L
Luckystriike16d ago
I 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
M
manniL16d ago
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?
L
Luckystriike16d ago
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.
M
manniL16d ago
Glad it helped 🙏🏻
Want results from more Discord servers?
Add your server
More Posts
Nuxt 3 dayjs moduleI try to use dayjs module in my pnpm monorepo i follow all the documentation but when i use dayjs iHow to set meta theme-color in nuxt.config``` app: { head: { ... meta: [{ theme_color: '#ffffff', }], }, },``` Testing Nuxt 3 API EndpointsHi, I would like to test my Nuxt 3 server api endpoints. I know I could test it for example in posNitro: How do I pass data in a middleware to route handlers?In Express, you can do this attaching data to the `response.locals` object. How do I do this in NitrMake `useRoute()` update in layoutHi! Im trying to use useRoute() in a layout, to update my navigations links based on the ´route.paraHow do you set a PostCSS parser in the `nuxt.config.ts`?I'm trying to do that but it seems the "parser" option isn't allowed on the object.Auto-import only Nuxt and Vue features but no custom or third party codeHey! I wonder: is it possible to disable auto imports for components, composables, and utils while kuseAsyncData weird behaviorHi guys, I'm experiencing a strange behavior. I'm using async data to call an API. But there is a coProblem with sending POST/GET Request at the same timeNow I'm looking to load the last projects of a user from the database by sending his name and receivNuxt Content behind CloudflareWhen I use Nuxt Content behind Cloudflare, I have the issue that some pages (but not all) cannot be Odd situation with Nuxt hosting and site accessibilityHey everyone. First post on this Discord. We have a Nuxt app (an intranet, small company app) that wUButton showing over sticky headerI have a table and one of the columns is filled with Nuxt UI buttons. I have a sticky header for thiPinia as a layerHi, I’m learning pinia, and I like it so much I thought it should be a layer. Does it makes sense? IFetchError typeI've seen `import type { FetchError } from 'ofetch'`, what what's the correct module when handling `How to import functions in a .vue component from a .js file?import { myfunctions} from "/js/stats.js" doesnt work for me: Error 500 __vite_ssr_import_7__.defauskeleton does not work on dynamic routesguys, can anyone help me? the skeleton is appearing on the main page but on the page where the produhow to generate static HTML pages just for some of the routesI'm trying to generate 4 static HTML pages from a huge list of routes that the app has But I only seUDashboardPanel footer (@nuxt/ui-pro)I'm trying to put a footer on the main (`grow` enabled) panel but I can't get the css right. in the useRuntimeConfig() is returning undefined valuesIn my `.env` file I have something like this: ``` NUXT_PUBLIC_LOGIN_DOMAINS="domain1.com,domain2.co@nuxt/eslint autofix?when using `@nuxt/eslint` instead of the old `@nuxtjs/eslint-module` how does one enable autofix? `