Nuxt•7mo ago

: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?

2 Replies

Fabian B.•7mo ago

Can you try to do :class="{ 'the-header--logged-in': currentUser.value }"> (adding .value)

JC•7mo ago

Hi @Fabian B., using .value made no difference, though i shouldn't need to use that in teh template I don't think

Gaming

Programming

:class not reactive when using SSR