Nuxt•2mo ago

runtimeConfig not working when website deployed to netlify

I have a server route called api/youtube-video

export default defineEventHandler(async () => {
  // Fetch runtime configuration
  const runtimeConfig = useRuntimeConfig();

  // Fetch data from YouTube API
  const data = $fetch(
    `https://youtube.googleapis.com/youtube/v3/search?part=snippet&channelId=UCeWvxihiyzB_ic84VWxHVnA&channelType=any&maxResults=50&order=date&key=${runtimeConfig.youtubeApiKey}`
  );

  // Return the videos
  return data;
});

export default defineEventHandler(async () => {
  // Fetch runtime configuration
  const runtimeConfig = useRuntimeConfig();

  // Fetch data from YouTube API
  const data = $fetch(
    `https://youtube.googleapis.com/youtube/v3/search?part=snippet&channelId=UCeWvxihiyzB_ic84VWxHVnA&channelType=any&maxResults=50&order=date&key=${runtimeConfig.youtubeApiKey}`
  );

  // Return the videos
  return data;
});

.env

YOUTUBE_API_KEY=key

YOUTUBE_API_KEY=key

nuxt.config.ts

runtimeConfig: {
    youtubeApiKey: process.env.YOUTUBE_API_KEY,
  },

runtimeConfig: {
    youtubeApiKey: process.env.YOUTUBE_API_KEY,
  },

This is working fine on local. But, when i deploy the website to netlify. The api doesn't return any data.. https://www.baljeetsingh.in/videos I have added YOUTUBE_API_KEY in the netlify environment variables too. am i missing something?

17 Replies

Gerbuuun•2mo ago

Have you tried NUXT_YOUTUBE_API_KEY?

Baljeet SinghOP•2mo ago

do i have to prefix all env variables in netlify with NUXT_ Just tried, it didn't work I also tried NUXT_ENV, still no (Looks like it was requirement for nuxt 2)

Gerbuuun•2mo ago

Then I don't know, sorry.

Baljeet SinghOP•2mo ago

Thanks, np

manniL•2mo ago

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...

Baljeet SinghOP•2mo ago

Hi @manniL / TheAlexLichter I watched the video and updated the environement variable to NUXT_YOUTUBE_API_KEY on netlify. This looks to be working. Thanks Also, I have set the video route to prerender, but it seems to be hitting the api again and again.

  routeRules: {
    '/': { prerender: true },
    '/videos': { prerender: true },
    // '/blog': { prerender: true },
    // '/blog/**': { prerender: true },
    '/courses': { prerender: true },
    '/work': { prerender: true },
    '/contact': { prerender: true },
  },

  routeRules: {
    '/': { prerender: true },
    '/videos': { prerender: true },
    // '/blog': { prerender: true },
    // '/blog/**': { prerender: true },
    '/courses': { prerender: true },
    '/work': { prerender: true },
    '/contact': { prerender: true },
  },

Am i doing something wrong? I just want to prerender everything if possible. On local I did npm run generate and then used serve on .output/public directory. But, when i use this build command and directory on netlify, the build fails. Currently, it deploy is only working with npm run build and dist . Then, I'm not sure which routes are prerendered.

Baljeet SinghOP•2mo ago

manniL•2mo ago

Currently, it deploy is only working with npm run build and dist . Then, I'm not sure which routes are prerendered.

It should tell you in the build log

Baljeet SinghOP•2mo ago

the log says it is prerendered But, as it is calling the server route, something feels wrong there

Baljeet SinghOP•2mo ago

So, setting all the routes to prerender: true is the correct way? Don't we need to use npm run generate on the server? btw, I had previously added useYoutubeVideos composable and called the youtube api from there. I think then it wasn't calling the api (not certain). But, it felt like creating server route is the right way to hide the key.

manniL•2mo ago

Let me ask a different question: How do you fetch the YouTube videos? only useState, useAsyncData and useFetch are actually "persisted" during prerendering

Baljeet SinghOP•2mo ago

Using server route and youtube api

export default defineEventHandler(async () => {
  // Fetch runtime configuration
  const runtimeConfig = useRuntimeConfig();

  // Fetch data from YouTube API
  const data = $fetch(
    `https://youtube.googleapis.com/youtube/v3/search?part=snippet&channelId=UCeWvxihiyzB_ic84VWxHVnA&channelType=any&maxResults=50&order=date&key=${runtimeConfig.youtubeApiKey}`
  );

  // Return the videos
  return data;
});

export default defineEventHandler(async () => {
  // Fetch runtime configuration
  const runtimeConfig = useRuntimeConfig();

  // Fetch data from YouTube API
  const data = $fetch(
    `https://youtube.googleapis.com/youtube/v3/search?part=snippet&channelId=UCeWvxihiyzB_ic84VWxHVnA&channelType=any&maxResults=50&order=date&key=${runtimeConfig.youtubeApiKey}`
  );

  // Return the videos
  return data;
});

manniL•2mo ago

how do you call that in your frontend I mean @Baljeet Singh

Baljeet SinghOP•2mo ago

manniL•2mo ago

yeah, the $fetch call will always happen (on client side) that's the problem 😉

Baljeet SinghOP•2mo ago

Thanks @manniL / TheAlexLichter it worked 🙂 I have one final issue, hope you don't mind, haha I have now set the blog routes to prerender

    '/blog': { prerender: true },
    '/blog/**': { prerender: true },

    '/blog': { prerender: true },
    '/blog/**': { prerender: true },

It works well in general. There is a minor issue with the pagination. I'm using query string params. It works well if i don't prerender routes. But, doesn't work as expected when i prerender (works on local though). If i just use the prev and next buttons it is ok. But, If i'm on a route, let's say https://www.baljeetsingh.in/blog?page=2 and then i try to refresh. It shows the content of the first page always. I assume this is the expected behavior with prerender. Do you have any insights on how you would go about solving this issue.

manniL•2mo ago

because query params don't work with prerendering 🙂

Gaming

Programming

runtimeConfig not working when website deployed to netlify