Nuxt•4y ago

How to apply initial data attributes to body?

Hello, I was using I think nuxt rc 13 and to set data attribute on body tag I used bodyAttrs like so

useHead({
  bodyAttrs: {
    'data-is-nav-open': 'false',
  },
})

useHead({
  bodyAttrs: {
    'data-is-nav-open': 'false',
  },
})

But after updating to Nuxt 3.0.0 (at least that's when I think it broke, pretty sure it worked earlier) it no longer does anything. Any idea how to apply initial data attribute to body tag?

asasinmodeOP•11/17/22, 9:38 PM

I put this in defineNuxtConfig and while class and favicon work fine, data doesn't. What Nuxt version do you have your snippet running on if I may ask?

asasinmodeOP•11/17/22, 9:41 PM

Nothing here

asasinmodeOP•11/17/22, 9:42 PM

works :////

asasinmodeOP•11/17/22, 9:42 PM

Looks like setting value to 'false' is the problem

asasinmodeOP•11/17/22, 9:42 PM

this works fine too

asasinmodeOP•11/17/22, 9:44 PM

Leaves it empty

asasinmodeOP•11/17/22, 9:44 PM

Damn looks like and it is :/

asasinmodeOP•11/17/22, 9:47 PM

Better than yes/no i guess. Thanks for help

harlan•11/18/22, 5:26 AM

false

false

value within the DOM context means that the attribute shouldn't be shown

The absence of the attribute means its value is false.

https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute#javascript

Element.setAttribute() - Web APIs | MDN

Sets the value of an attribute on the specified element. If
the attribute already exists, the value is updated; otherwise a new attribute is added
with the specified name and value.

harlan•11/18/22, 5:27 AM

so either check that the attribute doesn't exist instead of checking for false

harlan•11/18/22, 5:27 AM

or change the values as posted above

Hharlan a `false` value within the DOM context means that the attribute shouldn't be sho...

asasinmodeOP•11/18/22, 7:10 AM

I mean sure but I can set it to 'false' with and css doesn't work when it's just not there

harlan•11/19/22, 4:18 AM

Use a not css selector?

harlan•11/19/22, 4:19 AM

Feel free to open an issue and the logic may get updated