Calling Netlify function from Nuxt3 server/api - what URL to use?

Support
,
1

Hello, I’ve created my first netlify function inside my Nuxt3 project:

netflify/functions/hello.mts

import type { Context } from "@netlify/functions"

export default async (req: Request, context: Context) => {
  return new Response("Hello, world!")
}

I want to call this funcion from inside Nuxt3 server/api/call-function.ts but I am not sure about which path to use?

Do I need to use https://nuxt3-netlify-functions.netlify.app/.netlify/functions/hello in my $fetch request, or something like BASE_URL to not hardcode it or how can I use something like /.netlify/functions/hello?

export default defineEventHandler(async (event) => {
  
  // QUESTION - how to call this without the full URL?
  // ❌ this does NOT work locally
  // const whatever = await $fetch('/.netlify/functions/hello')

  // when running `netfliy dev` this will work if I use this full URL
  // http://localhost:8888/.netlify/functions/hello

  // how is this supposed to work in production? Do I something like BASE_URL?
  
  // this works
  const whatever = await $fetch('https://nuxt3-netlify-functions.netlify.app/.netlify/functions/hello')
  console.log("🐥🐥", whatever)
  return whatever
})

My function is up and running here:
https://nuxt3-netlify-functions.netlify.app/.netlify/functions/hello

My whole repo is here:

Many thanks in advance!

2

Yes, that’s the ideal way. But if you absolutely want to make it dynamic, you can use:

  1. process.env.URL
  2. OR you can use getRequestURL(event).origin

Though you can avoid all this and simply add whatever functionality you wish to do in Netlify Functions inside the Nuxt API call.

1 Like
3

Thanks man! That clears things up for me!