JC Posts - Answer Overflow

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

:class not reactive when using SSR

This is my first SSR app so apologies for naivety. I'm using middleware to trigger an authentication check, which sets a value (currentUser) if a user is authenticated and uses this to set a class. I'm able to access this in the template:

const {
  authenticated,
  currentUser,
} = storeToRefs(useAuthStore());

const headerClass = computed(() =>
  currentUser.value ? 'the-header--logged-in' : ''
);

{{ headerClass }} // this displays correctly when I refresh the page

<header class="the-header" :class="headerClass"> // This does not work when I refresh the page

const {
  authenticated,
  currentUser,
} = storeToRefs(useAuthStore());

const headerClass = computed(() =>
  currentUser.value ? 'the-header--logged-in' : ''
);

{{ headerClass }} // this displays correctly when I refresh the page

<header class="the-header" :class="headerClass"> // This does not work when I refresh the page

If I dump the value out into the template, I can see that after a few milliseconds the value is the-header--logged-in, as expected. However, there is no class on the header component. The same thing happens if I try the class binding format: <header class="the-header" :class="{ 'the-header--logged-in': currentUser }"> It's as if the act of binding it as a class is causing it to lose reactivity. Can anyone offer any advice please?

3 replies

NNuxt

•Created by JC on 3/25/2024 in #❓・help

Trying to deploy to CF pages and getting ` [nuxt] instance unavailable`

As above. The app is non-trivial but it doesn't give any logs as to what is generating the error. I thought that having: nitro: { preset: 'cloudflare_pages', }, and then running npx wrangler pages dev dist would cause it to run identically to how it is on Cloudflare, but it doesn't seem to be the case as it works locally. Have removed all instances of useRuntimeConfig (but made no difference) but a bit stumped as to what to try next as, without any logging, it feels like a needle in a haystack!

1 replies

Gaming

Programming