Nuxt•3y 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?

9 Replies

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',
    },
  },
},

asasinmodeOP•3y ago

Nothing here 😦

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

asasinmodeOP•3y ago

Damn looks like yes and no it is :/ Better than yes/no i guess. Thanks for help ❤️

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•3y ago

so either check that the attribute doesn't exist instead of checking for false or change the values as posted above

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•3y ago

Use a not css selector? Feel free to open an issue and the logic may get updated

Gaming

Programming

How to apply initial data attributes to body?