Selam ben nuxt 3 de proje yapıyorum ve bazı kafa karışıklıklarım oldu ben ilk öğrendiğimde ve bazı videolarda backendden gelen apinin server klasöründe çekilip sonra ordan alınmasını görmüştüm. Şöyle:
server/api/currency/[code].js
export default defineEventHandler(async (event) => {
const { code } = event.context.params;
const { currencyKey } = useRuntimeConfig();
const url = `https://api.currencyapi.com/v3/latest?currencies=${code}&apikey=${currencyKey}`;
const { data } = await $fetch(url);
return data;
});
pages/currency.vue
const title = ref("Currency");
const { data } = await useFetch("/api/currency/GBP");
böyle bir şey. Fakat şuan proje yaptıkca sanki yanlışmış gibi geliyor mesela şöyle
server/api/auth/login.ts
export default defineEventHandler(async (event) => {
try {
const config = useRuntimeConfig();
const body = await readBody(event);
const user = await $fetch(`${config.public.apiBaseUrl}/auth/login`, {
method: 'POST',
body,
headers: {
'Content-Type': 'application/json'
}
});
return user;
} catch (error) {
throw error;
}
});
store/authStore.ts
async login(newUser: User) {
try {
const data = await $fetch<{ user: User; token: string, expiresIn: number }>('/api/auth/login', {
method: 'POST',
body: JSON.stringify(newUser),
headers: {
'Content-Type': 'application/json'
}
});
this.user = data.user;
this.token = data.token;
if (process.client) {
localStorage.setItem('user', JSON.stringify(data.user));
localStorage.setItem('token', data.token);
}
} catch (error) {
throw error.data;
}
},
iki yerde de aynı şeyi yapıyorum galiba ve bazı projelere baktığımda server klösoründe sadece prisma ve supabase kullanıyorlar gibi ben çözmedim bunu.
Yardımcı olabilecek biri varsa güzel olur.