Nuxt•2y ago

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

I have a component with a boolean ref. As long as

myBool.value === true

myBool.value === true

, I'd like to bind a class name to

<body>

<body>

.

I've attempted to use the

useMeta

useMeta

and

useMetaSafe

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.

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

works to set the initial value of , , etc -- but none of these properties appear to be reactive.

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

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

how are u using

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

You should use:

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

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

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

@deetstrab try with a composable for the class

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

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

It says it is reactive, though?

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

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`

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

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!

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?

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?

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?

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

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

You could just have a global utility class:

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

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

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

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

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

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

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

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

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

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!

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

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

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

Did you try something like:

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

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

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

the "computed" part of that would be necessary

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

I really appreciate your help and conversation

thank you, my friend

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

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

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

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

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

this will work the same as the Vue template

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 differently between pages, but that doesn't seem to be doing it. I have tried both setting the value to a

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:

And here's another page:

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

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

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

try

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

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 page set up in the root of my folder in addition to having the nested routes under . 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.

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

this was fixed recently in unhead FYI

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