I can’t figure it out how to pass params to an anonymous function in Nuxt 3.
index.vue:
<template> <form @submit.prevent="signUpNewsletter()"> <input type="email" placeholder="example@x.com" v-model="userEmail"> <input type="submit" value="Submit"> </form> </template> <script setup> const userEmail = ref('x@x.de') function signUpNewsletter () { useAsyncData( 'newsletter', () => $fetch('/api/sign_up_news', { method: 'POST', // Post method works body: { email: userEmail.value } }) ) } </script>
server/api/sign_up_news.js:
import { createClient } from '@supabase/supabase-js' export default async (email) => { // can't read the parameter const SUPABASE_KEY = 'key123' const SUPABASE_URL = 'url.supabase.co' const supabase = createClient(SUPABASE_URL, SUPABASE_KEY) const { data, error } = await supabase .from('newsletter') .insert([{ email }]) // <<< Fails! return data };
working:
import { createClient } from '@supabase/supabase-js' export default async () => { const SUPABASE_KEY = 'key123' const SUPABASE_URL = 'url.supabase.co' const supabase = createClient(SUPABASE_URL, SUPABASE_KEY) const { data, error } = await supabase .from('newsletter') .insert([{ email: 'hi@it.works' }]) // <<< Works! return data };
Do you know how to pass parameter into Nuxt 3 server/api? Or do you got a source? The official docs are blank at this moment.
Advertisement
Answer
Use useBody
Its mention in the docs: https://v3.nuxtjs.org/guide/features/server-routes#handling-requests-with-body
you just need to read through
import { createClient } from '@supabase/supabase-js' export default async (event) => { // can't read the parameter const body = await useBody(event) const SUPABASE_KEY = 'key123' const SUPABASE_URL = 'url.supabase.co' const supabase = createClient(SUPABASE_URL, SUPABASE_KEY) const { data, error } = await supabase .from('newsletter') .insert([{ email: body.email }]) return data };