[Bug]: Vue 3.1: CSS classes aren't applied as expected (MenuItem, Switch, and possibly others)

[hognevevle]

What package within Headless UI are you using?

@headlessui/vue

What version of that package are you using?

v1.2.0

What browser are you using?

Chrome

Reproduction repository

https://github.com/hognevevle/headlessui-bug/tree/missing-classes

Describe your issue

This error appears when after the latest package upgrades done in the linked repo. In the prior commit, everything works OK.

In the inspector, I see that the class attribute is empty. As soon as you hover the item, however, the classes will appear as they should.

Might be worth mentioning that in my other project (where I have vue-router installed), a router-link will render properly. So it appears to depend on the kind of child.

[hognevevle]

I've narrowed it down a bit. There seems to be a breaking change in Vue 3.1. Everything works fine with 3.0.11, but as soon as I bump to 3.1.0 or 3.1.1 this issue appears.

[rynz]

There looks to be a few issues with HeadlessUI x Vue 3.1+.
Eg:

<Switch
    v-model="enable"
    :class="[
      ...classButton,
      'relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500',
    ]"
>
  ...

The :class will not be applied until <Switch /> is clicked. Works okay in v3.0.11.

[LaravelFreelancerNL]

I can confirm this for the listbox component as well.
Neither static nor dynamically set classes are applied. The latter only when triggering the active state which will set all the appropriate classes in the following example:

:class="[
	active
		? 'text-white bg-primary-600'
		: 'text-gray-900',
	'cursor-default select-none relative py-2 pl-3 pr-9'
]"

[rynz]

Fixed in #607

[liho00]

Fixed in #607

the class only applied when i hover...
fixed? im using latest version 1.2.0, still got this issue... Could u update in a tag?

[RobinMalfait]

@liho00 This should be fixed, and will be available in the next release.
You can already try it using npm install @headlessui/vue@dev or yarn add @headlessui/vue@dev.

[liho00]

npm install @headlessui/vue@dev

yup the solution is in the dev branch, thanks its working now!

[johanvanhelden]

Thanks, I was going crazy thinking I implemented it the wrong way :-)

[RALMAZ]

Thanks for fix

[johanvanhelden]

@RobinMalfait do you happen to know when the next release is planned?

[schmoove]

Relieved I'm not the only one experiencing this– thought I was going crazy. Thanks for fixing!

[johanvanhelden]

I just updated headlessui/vue and it seems to be fixed! 🎈

[olivoil]

Hi! I'm seeing this issue with Listbox on 1.4.0 and dev and vue 3.2.2

[vesper8]

Still seeing this.. :class not being applied for me on heroicons using Vue 3.2.33, on the application shells from Tailwind UI