How to apply initial data attributes to body? | Nuxt | Page 1

shadow sky Nov 17, 2022, 9:19 PM

#

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

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?

#

How to apply initial data attributes to body?

timber timber Nov 17, 2022, 9:30 PM

#

export default defineNuxtConfig({
   app: {
        head: {
            bodyAttrs: {
              class: 'loading',
              'data-test': 'test'
            }
         }
    }
});

shadow sky Nov 17, 2022, 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?

app: {
  head: {
    link: [{ rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' }],
    bodyAttrs: {
      'class': 'font-sans',
      'data-is-nav-open': 'false',
    },
  },
},

timber timber Nov 17, 2022, 9:40 PM

#

data works for me on nuxt 3

#

does 'data-test': 'test' work?

shadow sky Nov 17, 2022, 9:41 PM

#

Nothing here 😦

#

'data-test': 'test' works :////

#

Looks like setting value to 'false' is the problem

#

'data-is-nav-open': 'test' this works fine too

timber timber Nov 17, 2022, 9:42 PM

#

it's probably interpreting it as being false which unsets it

#

what about 'true'

shadow sky Nov 17, 2022, 9:44 PM

#

Leaves it empty

#

Damn looks like yes and no it is :/

timber timber Nov 17, 2022, 9:46 PM

#

could also do data-nav=open/closed

shadow sky Nov 17, 2022, 9:47 PM

#

Better than yes/no i guess. Thanks for help ❤️

timber timber Nov 17, 2022, 9:48 PM

#

👍

toxic stream Nov 18, 2022, 5:26 AM

#

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.

#

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

#

or change the values as posted above

timber timber Nov 18, 2022, 5:42 AM

#

right but it's a string, not actually a boolean, so i understand the confusion

shadow sky Nov 18, 2022, 7:10 AM

#

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

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

toxic stream Nov 19, 2022, 4:18 AM

#

Use a not css selector?

#How to apply initial data attributes to body?