N
Nuxt•3y ago
asasinmode

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?
9 Replies
asasinmode
asasinmodeOP•3y ago
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? 
app: {
  head: {
    link: [{ rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' }],
    bodyAttrs: {
      'class': 'font-sans',
      'data-is-nav-open': 'false',
    },
  },
},
app: {
  head: {
    link: [{ rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' }],
    bodyAttrs: {
      'class': 'font-sans',
      'data-is-nav-open': 'false',
    },
  },
},
asasinmode
asasinmodeOP•3y ago
Nothing here 😦
No description
asasinmode
asasinmodeOP•3y ago
'data-test': 'test' works ://// Looks like setting value to 'false' is the problem 'data-is-nav-open': 'test' this works fine too Leaves it empty
asasinmode
asasinmodeOP•3y ago
No description
asasinmode
asasinmodeOP•3y ago
Damn looks like yes and no it is :/ Better than yes/no i guess. Thanks for help ❤️
harlan
harlan•3y ago
a 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
harlan•3y ago
so either check that the attribute doesn't exist instead of checking for false or change the values as posted above
asasinmode
asasinmodeOP•3y ago
I mean sure but I can set it to 'false' with document.body.dataset.isNavOpen = 'false' and css body[data-is-nav-open='false'] doesn't work when it's just not there
harlan
harlan•3y ago
Use a not css selector? Feel free to open an issue and the logic may get updated

Did you find this page helpful?