Reactively add/remove a class name to <body>, from within a component...

Reactively add/remove a class name to , from within a component...

deetstrab · 2024-06-30T14:27:52.381Z

I have a component with a boolean ref. As long as `myBool.value === true`, I'd like to bind a class name to ` `. I've attempted to use the `useMeta` and `useMetaSafe` composables (useHead > bodyAttrs.class) but it doesn't change reactively. Any idea what the heck I'm missing? This is driving me nuts and the documentation makes it sound relatively simple.

D

deetstrabOP•6/30/24, 3:08 PM

useHead

useHead

useHead

useHead works to set the initial value of

title

title

title

title,

bodyAttrs.class

bodyAttrs.class

bodyAttrs.class

bodyAttrs.class, etc -- but none of these properties appear to be reactive.

Ddeetstrab `useHead` works to set the initial value of `title`, `bodyAttrs.class`, etc -- b...

C

Cake•6/30/24, 5:16 PM

how are u using

useHead

useHead

useHead

useHead

I

Inès•7/1/24, 9:15 AM

You should use:

useHead({
    bodyAttrs: {
        class: 'YOUR-CLASS-NAME'
    }
})

useHead({
    bodyAttrs: {
        class: 'YOUR-CLASS-NAME'
    }
})

useHead({
    bodyAttrs: {
        class: 'YOUR-CLASS-NAME'
    }
})

useHead({
    bodyAttrs: {
        class: 'YOUR-CLASS-NAME'
    }
})

I

Inès•7/1/24, 9:17 AM

But indeed, as the doc says (https://nuxt.com/docs/api/composables/use-head),

bodyAttrs

bodyAttrs

bodyAttrs

bodyAttrs is non-reactive...

X

xibman•7/1/24, 9:36 AM

@deetstrab try with a composable for the class

X

xibman•7/1/24, 9:37 AM

like
useHead({
bodyAttrs: {
class: () => test === true ? 'clas-true' : 'class-false'
}
})

IInès But indeed, as the doc says (https://nuxt.com/docs/api/composables/use-head), `b...

D

deetstrabOP•7/1/24, 11:21 AM

It says it is reactive, though?

IInès You should use: `useHead({ bodyAttrs: { class: 'YOUR-CLASS-NAME' ...

D

deetstrabOP•7/1/24, 11:24 AM

This is exactly what I'm doing and have tried all variants of this that I know to.

CCake how are u using `useHead`

D

deetstrabOP•7/1/24, 11:27 AM

useHead({
  bodyAttrs: {
    // class: displayMobileNav.value ? 'navOpen' : '' // Didn't work
    class: () => displayMobileNav.value ? 'navOpen' : '' // Works like a charm inside the anonymous function
  }
})

useHead({
  bodyAttrs: {
    // class: displayMobileNav.value ? 'navOpen' : '' // Didn't work
    class: () => displayMobileNav.value ? 'navOpen' : '' // Works like a charm inside the anonymous function
  }
})

useHead({
  bodyAttrs: {
    // class: displayMobileNav.value ? 'navOpen' : '' // Didn't work
    class: () => displayMobileNav.value ? 'navOpen' : '' // Works like a charm inside the anonymous function
  }
})

useHead({
  bodyAttrs: {
    // class: displayMobileNav.value ? 'navOpen' : '' // Didn't work
    class: () => displayMobileNav.value ? 'navOpen' : '' // Works like a charm inside the anonymous function
  }
})

D

deetstrabOP•7/1/24, 11:29 AM

I need to understand why this needs to be a function to work? What would be a good resource to read to better grasp this concept? Thanks in advance!

Z

Zampa•7/1/24, 11:29 AM

Is there a reason it has to be body and not just a wrapper div in app.vue?

D

deetstrabOP•7/1/24, 11:29 AM

Thank you all for your helpfulness and thoughtful replies

ZZampa Is there a reason it has to be body and not just a wrapper div in app.vue?

D

deetstrabOP•7/1/24, 11:30 AM

As I see it, yes. I needed to disable scrolling of the website while my mobile nav is open.

ZZampa Is there a reason it has to be body and not just a wrapper div in app.vue?

D

deetstrabOP•7/1/24, 11:31 AM

It's possible a wrapper div would have worked too - this is a pattern I've used in many mobile navs that I've built over the years, though.

Ddeetstrab As I see it, yes. I needed to disable scrolling of the website while my mobile n...

Z

Zampa•7/1/24, 11:36 AM

You could just have a global utility class:

body.noScroll {
  overflow: hidden;
}

body.noScroll {
  overflow: hidden;
}

body.noScroll {
  overflow: hidden;
}

body.noScroll {
  overflow: hidden;
}

and then you can just use a computed property or a watcher to apply/remove

document.body.style.noScroll

document.body.style.noScroll

document.body.style.noScroll

document.body.style.noScroll as needed?

Z

Zampa•7/1/24, 11:38 AM

I do something similar for locking the body when a modal is in place:

ZZampa You could just have a global utility class: ``` body.noScroll { overflow: hidd...

D

deetstrabOP•7/1/24, 11:48 AM

Yes but isn't targeting the DOM nodes like this an anti-pattern in Vue/Nuxt?

D

deetstrabOP•7/1/24, 11:49 AM

That's exactly how I do it in vanilla/es

D

deetstrabOP•7/1/24, 11:49 AM

I just wanted to force myself to do it the Vue/Nuxt way

Z

Zampa•7/1/24, 11:49 AM

it's just adding/removing a class - it's what Vue is doing to the DOM underneath its hood, too.

ZZampa it's just adding/removing a class - it's what Vue is doing to the DOM underneath...

D

deetstrabOP•7/1/24, 11:50 AM

well of course and I see it as that simple too, fwiw - I've just been taught that it's an antipattern. I didn't consider it for that reason, but you're absolutely right - it's a simple solution that works perfectly!

D

deetstrabOP•7/1/24, 11:52 AM

I need to get a better understanding of why this only works within an anonymous function

Z

Zampa•7/1/24, 11:53 AM

Did you try something like:

useHead({
  bodyAttrs: {
    class: computed(() => {
      if (isMobileNavVisible.value) return 'menu-is-open';
      
      return '';
    }),
  },
});

useHead({
  bodyAttrs: {
    class: computed(() => {
      if (isMobileNavVisible.value) return 'menu-is-open';
      
      return '';
    }),
  },
});

useHead({
  bodyAttrs: {
    class: computed(() => {
      if (isMobileNavVisible.value) return 'menu-is-open';
      
      return '';
    }),
  },
});

useHead({
  bodyAttrs: {
    class: computed(() => {
      if (isMobileNavVisible.value) return 'menu-is-open';
      
      return '';
    }),
  },
});

D

deetstrabOP•7/1/24, 11:53 AM

no, I was (formerly) just using a ternary eval

Z

Zampa•7/1/24, 11:54 AM

the "computed" part of that would be necessary

D

deetstrabOP•7/1/24, 12:03 PM

I really appreciate your help and conversation

thank you, my friend

Z

Zampa•7/1/24, 12:14 PM

H

harlan•7/1/24, 1:02 PM

if you don't wrap with a function or computed the value gets resolved immediately, meaning you're providing a literal to useHead which it can't bind reactivity to

H

harlan•7/1/24, 1:03 PM

alternatively you can avoid the function syntax if you provide the ref explicitely like so

useHead({
  bodyAttrs: {
    class: { 
      navOpen: displayMobileNav
    }
  }
})

useHead({
  bodyAttrs: {
    class: { 
      navOpen: displayMobileNav
    }
  }
})

useHead({
  bodyAttrs: {
    class: { 
      navOpen: displayMobileNav
    }
  }
})

useHead({
  bodyAttrs: {
    class: { 
      navOpen: displayMobileNav
    }
  }
})

H

harlan•7/1/24, 1:04 PM

this will work the same as the Vue template

F

FiveDigitLP•7/2/24, 10:10 PM

I hate to piggy-back on this, but at the same time I am dealing with something very similar. The primary difference being that I don't even have any sort of conditional for the class.

My goal is to have a body class that shows up on some pages and not on others. I thought it would be simple enough if I set

bodyAttrs

bodyAttrs

bodyAttrs

bodyAttrs differently between pages, but that doesn't seem to be doing it. I have tried both setting the value

bodyAttrs: { class: }

bodyAttrs: { class: }

bodyAttrs: { class: }

bodyAttrs: { class: } to a

ref

ref

ref

ref and adding an anonymous function as above, but the class still seems to stick between pages. Any ideas??

Here's what I have for my pricing page:

const bodyClasses = ref('background-glow')

useHead({
    title: pageTitle,
    meta: [
        { name: 'description', content: pageDescription }
    ],
    bodyAttrs: {
        class: () => bodyClasses.value
    }
})

const bodyClasses = ref('background-glow')

useHead({
    title: pageTitle,
    meta: [
        { name: 'description', content: pageDescription }
    ],
    bodyAttrs: {
        class: () => bodyClasses.value
    }
})

const bodyClasses = ref('background-glow')

useHead({
    title: pageTitle,
    meta: [
        { name: 'description', content: pageDescription }
    ],
    bodyAttrs: {
        class: () => bodyClasses.value
    }
})

const bodyClasses = ref('background-glow')

useHead({
    title: pageTitle,
    meta: [
        { name: 'description', content: pageDescription }
    ],
    bodyAttrs: {
        class: () => bodyClasses.value
    }
})

And here's another page:

const bodyClasses = ref('')

useHead({
    titleTemplate: null,
    title: pageTitle,
    meta: [
        { name: 'description', content: pageDescription }
    ],
    bodyAttrs: {
        class: () => bodyClasses.value
    }
})

const bodyClasses = ref('')

useHead({
    titleTemplate: null,
    title: pageTitle,
    meta: [
        { name: 'description', content: pageDescription }
    ],
    bodyAttrs: {
        class: () => bodyClasses.value
    }
})

const bodyClasses = ref('')

useHead({
    titleTemplate: null,
    title: pageTitle,
    meta: [
        { name: 'description', content: pageDescription }
    ],
    bodyAttrs: {
        class: () => bodyClasses.value
    }
})

const bodyClasses = ref('')

useHead({
    titleTemplate: null,
    title: pageTitle,
    meta: [
        { name: 'description', content: pageDescription }
    ],
    bodyAttrs: {
        class: () => bodyClasses.value
    }
})

The title and page description changes, so I'm not sure why the

bodyAttrs

bodyAttrs

bodyAttrs

bodyAttrs doesn't.

FFiveDigitLP I hate to piggy-back on this, but at the same time I am dealing with something v...

C

Cake•7/2/24, 10:33 PM

try

useHead({
    bodyAttrs:() => ({
        class: bodyClasses.value
    })
})

useHead({
    bodyAttrs:() => ({
        class: bodyClasses.value
    })
})

useHead({
    bodyAttrs:() => ({
        class: bodyClasses.value
    })
})

useHead({
    bodyAttrs:() => ({
        class: bodyClasses.value
    })
})

CCake try ```ts useHead({ bodyAttrs:() => ({ class: bodyClasses.value ...

F

FiveDigitLP•7/3/24, 12:59 PM

Thanks! That didn't seem to work.

At this point, I think it might have something to do with the way I have my page routes set up. For some reason, I have a

software.vue

software.vue

software.vue

software.vue page set up in the root of my

pages

pages

pages

pages folder in addition to having the nested routes under

/software

/software

/software

/software. I remember reading in the documentation during the early stages of my project about this being an option, but I don't remember why exactly I chose this structure as I think it has caused more headaches than it's worth.

M

manniL•7/3/24, 1:46 PM

this was fixed recently in unhead FYI

M

manniL•7/3/24, 1:46 PM

https://github.com/nuxt/nuxt/issues/26586

GitHub

Body style background image does not update when theme changes · Is...

Environment Operating System: Darwin Node Version: v21.6.2 Nuxt Version: 3.11.1 CLI Version: 3.11.1 Nitro Version: 2.9.5 Package Manager: yarn@1.22.21 Builder: - User Config: devtools, typescript, ...

MmanniL https://github.com/nuxt/nuxt/issues/26586

F

FiveDigitLP•7/3/24, 2:08 PM

Wait. You mean to tell me this is a bug and I'm not crazy??

MmanniL this was fixed recently in unhead FYI

F

FiveDigitLP•7/5/24, 9:41 PM

I manually updated to the latest version and it still doesn't seem to work...

M

manniL•7/5/24, 9:44 PM

also cleared lock file and all?

M

manniL•7/5/24, 9:44 PM

then please file a bug report if possible (similar to that one or easier)

H

harlan•7/6/24, 2:58 AM

your best bet is to make a minimal reproduction in Stackblitz and we can either guide you in the right direction or fix the bug you've ran into

H

harlan•7/6/24, 2:58 AM

afaik this shouldn't be an unhead bug in the latest

MmanniL also cleared lock file and all?

F

FiveDigitLP•7/8/24, 4:43 PM

I'm sorry for the ignorance, but what do you mean by this? The package-lock file??

D

deetstrabOP•7/18/24, 4:05 PM

you can do a nuxi upgrade with the force param to HARD UPGRADE

give that a shot

D

deetstrabOP•7/18/24, 4:06 PM

npx nuxi upgrade -f

npx nuxi upgrade -f

npx nuxi upgrade -f

npx nuxi upgrade -f