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

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

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

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...

Beginner question - Hydration problem on computed property

Similar Threads