Yann
Yann
PostsComments
NNuxt
Created by Yann on 6/2/2024 in #❓・help
Beginner question - Hydration problem on computed property
Hello everyone, i'm new to Nuxt 3, had a good knowledge of Vue 3, but i'm facing an error which drive me crazy. I've an computed data which came from an Pinia getters, and, based on this data, i'm trying to make a dynamic button link and text. And i have two Hydration problem... Here's some code : layouts/default.vue 
<v-btn
    class="ml-1 primary--gradient text-body-2"
    color="primary"
    height="48"
    rounded="lg"
    :text="authenticated ? $t('navigation.frontend.dashboard') : $t('navigation.frontend.get_started')"
    :to="authenticated ? '/dashboard' : '/auth/login'"
    variant="outlined"
/>
<v-btn
    class="ml-1 primary--gradient text-body-2"
    color="primary"
    height="48"
    rounded="lg"
    :text="authenticated ? $t('navigation.frontend.dashboard') : $t('navigation.frontend.get_started')"
    :to="authenticated ? '/dashboard' : '/auth/login'"
    variant="outlined"
/>
computed: {
    authenticated(): boolean {
        return useAuthStore().authenticated
    }
}
computed: {
    authenticated(): boolean {
        return useAuthStore().authenticated
    }
}
stores/auth.ts 
state: (): Auth => ({
    access_token: null
}),

getters: {
    authenticated(state): boolean {
        return !!state.access_token
    }
},

// [...]
persist: {
    paths: ['access_token'],
    afterRestore: (context: PiniaPluginContext): void => {
        const { $http } = useNuxtApp()
        const { access_token } = context.store.$state as Auth
        $http.defaults.headers.Authorization = `Bearer ${access_token}`
    }
}
state: (): Auth => ({
    access_token: null
}),

getters: {
    authenticated(state): boolean {
        return !!state.access_token
    }
},

// [...]
persist: {
    paths: ['access_token'],
    afterRestore: (context: PiniaPluginContext): void => {
        const { $http } = useNuxtApp()
        const { access_token } = context.store.$state as Auth
        $http.defaults.headers.Authorization = `Bearer ${access_token}`
    }
}
I'm using axios instead of useFetch because i've some habits with it and i didn't see how can i put some default parameters on $fetch (like baseURL or headers). That may be my problem ?? So, if any good soul can help me...
33 replies