Nuxt 3 useFetch clientside | Nuxt | Page 1

#

if you want it to run client side only, set server: false in the options: https://nuxt.com/docs/api/composables/use-fetch#params

Nuxt

useFetch · Nuxt Composables

Fetch data from an API endpoint with a SSR-friendly composable.

#

I mean in the options of the useFetch calls - check the doc link

#

so one challenge I see with this is that the returned {data, error} values are only available within the onMounted closure

#

so yes usually you want useFetch at the top level of the setup function

#

so it's possible for the fetch to happen without $keycloak being available on client side you're saying?

#

I understand my project does the same thing. My bearer token used in header is only available on client side

#

I don't get why setting server: false is not working for you

#

but headers are passed as strings

#

so maybe double check how you render your component tree. if in doubt, do conditional rendering on $keycloak being define

#

is this a case where you refresh the page? so for a split second the plugin is not ready?

this is what I'm getting at by rendering your component tree in the correct order

      <UPage v-if="auth">
        <template #left>
          <AppNav />
        </template>
        <UPageBody>
          <NuxtLayout>
            <NuxtPage />
          </NuxtLayout>
        </UPageBody>
      </UPage>

#

so with a v-if="$keycloak"

#

basically if the value is not ready, you shouldnt render the component, whose setup function needs to do a protected fetch

#

yeah it's not a bad plan

#

I've thought about this exact same thing. I think it's a good idea. like you said the page is protected, and after first page load, it's all client side routing anyway

#

I'm just controlling rendering if a v-if in the root of my component tree

#

💚

#Nuxt 3 useFetch clientside