Create a Nuxt plugin that provides global utilities and composables
vuetypescript
Nuxt 4 - Plugin with Auto-imports
// plugins/api.ts
export default defineNuxtPlugin(() => {
const config = useRuntimeConfig()
const api = $fetch.create({
baseURL: config.public.apiBase,
onRequest({ request, options }) {
// Add auth header
const token = useCookie('auth-token')
if (token.value) {
options.headers = {
...options.headers,
Authorization: `Bearer ${token.value}`,
}
}
},
onResponseError({ response }) {
// Handle errors globally
if (response.status === 401) {
navigateTo('/login')
}
},
})
return {
provide: {
api,
},
}
})
// Usage in components:
// const { $api } = useNuxtApp()
// const data = await $api('/users')