Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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.

CleanShot 2021-06-08 at 22 41 56

Issue Analytics

State:
Created 2 years ago
Reactions:19
Comments:14 (2 by maintainers)

Top GitHub Comments

12reactions

RobinMalfaitcommented, Jun 10, 2021

@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.

4reactions

rynzcommented, Jun 10, 2021

Fixed in #607

Top Results From Across the Web

IntelliJ IDEA 2021.2.1 (212.5080.55 build) Release Notes

No subsystem Bug IDEA‑274142 Exception IDEA‑274385 Bug IDEA‑275004 Android Bug IDEA‑273440

TinyMCE 6.3

The Inline CSS plugin takes a TinyMCE document, and processes it such that the previously separate CSS is applied inline to each HTML...

Changelog - Shoelace

Changelog. Shoelace follows Semantic Versioning. Breaking changes in components with the Stable badge will not be accepted until the next major version.

Smooth Scrolling | CSS-Tricks

Here's the code to perform a smooth page scroll to an anchor on the same page. It has some logic built in to...

Chapter 4: Make typical components accessible

But a modal is more than a dialog that renders everything but itself inactive. The other part of creating an accessible modal is...