Nuxt•2y ago

How to dynamically set body class?

let isDrawerOpen = $ref(false)

useHead({
  bodyAttrs: {
    class: isDrawerOpen ? 'overflow-hidden' : 'none',
  },
})

let isDrawerOpen = $ref(false)

useHead({
  bodyAttrs: {
    class: isDrawerOpen ? 'overflow-hidden' : 'none',
  },
})

toggling isDrawerOpen has no effect, class "none" added all the time.

15 Replies

Unknown User•2y ago

Message Not Public

Alexander KimOP•2y ago

nah, i'm using reactivity transform, it works this way. The problem is useHead called only once, so it doesn't change when my reactive ref variable changes.

Unknown User•2y ago

Message Not Public

Alexander KimOP•2y ago

any ideas?

Unknown User•2y ago

Message Not Public

Alexander KimOP•2y ago

thought about it, but isn't it ugly?

Unknown User•2y ago

Message Not Public

Alexander KimOP•2y ago

seems like i have no other way, thanks

Unknown User•2y ago

Message Not Public

Alexander KimOP•2y ago

yeah, i kinda recall it worked in Nuxt2 i could just call this.head but it was a bit hacky seems like no one has idea about that lol

Unknown User•2y ago

Message Not Public

harlan•2y ago

useHead is fully reactive

harlan•2y ago

see here for class usage https://unhead.harlanzw.com/guide/guides/class-attr

Class Attribute · Unhead

Learn how to use the class attribute with Unhead.

harlan•2y ago

the issue is that you're resolving the ref value as part of the argument

let isDrawerOpen = ref(false)

useHead({
  bodyAttrs: {
    class: () => isDrawerOpen.value ? 'overflow-hidden' : 'none',
  },
})

let isDrawerOpen = ref(false)

useHead({
  bodyAttrs: {
    class: () => isDrawerOpen.value ? 'overflow-hidden' : 'none',
  },
})

that should work

Unknown User•2y ago

Message Not Public

Gaming

Programming

How to dynamically set body class?