Ulrich Posts - Answer Overflow

Ulrich

•Created by Ulrich on 11/14/2024 in #❓・help

Reactivity with UseFetch

Hi i have a custom useFetch composable for fetching my data from an external API. In /location page, when the user arrive, a first fetch is made with filterOptions (a reactive object that can have empty string at start), this page has a Filter component that content filters of the page and update filterOptions object according to user preferences. I want to remove empty key in filterOptions when the request is been made without loosing reactivity(refetch when some of filterOptions change). I stuck on it. That's my files.

// composables/use-api.ts
import type {UseFetchOptions} from "nuxt/app";
export function useApi<T>(
    url: string | (() => string),
    options?: UseFetchOptions<T>,
) {
    return useFetch(url,{
        ...options,
        $fetch: useNuxtApp().$api as typeof $fetch,
    })
}

// composables/use-api.ts
import type {UseFetchOptions} from "nuxt/app";
export function useApi<T>(
    url: string | (() => string),
    options?: UseFetchOptions<T>,
) {
    return useFetch(url,{
        ...options,
        $fetch: useNuxtApp().$api as typeof $fetch,
    })
}

// plugins/api.ts
export default defineNuxtPlugin((nuxtApp) => {
    const { token } = useAuth()
    const runtimeConfig = useRuntimeConfig()
    const api = $fetch.create({
        baseURL: runtimeConfig.public.apiBaseUrl,
        onRequest({ request, options, error }) {
            if (token.value) {
                const headers = options.headers ||= {}
                if (Array.isArray(headers)) {
                    headers.push(['Authorization', `${token.value}`])
                } else if (headers instanceof Headers) {
                    headers.set('Authorization', `${token.value}`)
                } else {
                    headers.Authorization = `${token.value}`
                }
            }
        },
        async onResponseError({ response }) {
            if (response.status === 401) {
                await nuxtApp.runWithContext(() => navigateTo('/login'))
            }
        }
    })
    // Expose to useNuxtApp().$api
    return {
        provide: {
            api
        }
    }
})

// plugins/api.ts
export default defineNuxtPlugin((nuxtApp) => {
    const { token } = useAuth()
    const runtimeConfig = useRuntimeConfig()
    const api = $fetch.create({
        baseURL: runtimeConfig.public.apiBaseUrl,
        onRequest({ request, options, error }) {
            if (token.value) {
                const headers = options.headers ||= {}
                if (Array.isArray(headers)) {
                    headers.push(['Authorization', `${token.value}`])
                } else if (headers instanceof Headers) {
                    headers.set('Authorization', `${token.value}`)
                } else {
                    headers.Authorization = `${token.value}`
                }
            }
        },
        async onResponseError({ response }) {
            if (response.status === 401) {
                await nuxtApp.runWithContext(() => navigateTo('/login'))
            }
        }
    })
    // Expose to useNuxtApp().$api
    return {
        provide: {
            api
        }
    }
})

Thanks

9 replies

NNuxt

•Created by Ulrich on 8/5/2024 in #❓・help

Multiple Alias and Route navigation in Nuxt 3

Hello, I have a /search page that help user to find items base on some filter. I also have three pages /location, /meuble and /vente , same HTML structure as /search but with just some hidden things depending of the page. I used alias in /search for this three pages , but when i am on one of this pages and i want to go on another, nuxt-link doesn't trigger navigation saying i'm already on that page.

definePageMeta({
layout: 'with-banner',
alias: ['/location','/vente','/meuble'],
key: route => route.fullPath
})

definePageMeta({
layout: 'with-banner',
alias: ['/location','/vente','/meuble'],
key: route => route.fullPath
})

How to force navigation when navigating between these pages ? 🤔

3 replies

NNuxt

•Created by Ulrich on 7/14/2024 in #❓・help

Typescript and Nuxt 3

1 replies

NNuxt

•Created by Ulrich on 6/1/2024 in #❓・help

Named Slot doesn't work in Layout

2 replies

NNuxt

•Created by Ulrich on 6/1/2024 in #❓・help

Nuxt Layout with named slot

14 replies

NNuxt

•Created by Ulrich on 5/6/2024 in #❓・help

Nuxt UI + Nuxt Tailwind modules result in error

5 replies

NNuxt

•Created by Ulrich on 5/5/2024 in #❓・help

Thread issue

7 replies

NNuxt

•Created by Ulrich on 2/3/2023 in #❓・help

Add UIkit in Nuxt 3

Hello Everybody Did somebody have try to integrate css Framework UIkit in Nuxt3 projet ? Thanks

5 replies

Gaming

Programming