v-show not working with nuxt UI component

[roseyda]

Environment

• OS: tested on macOS (with nuxtUI v3+) and StackBlitz (with nuxtUI 2+)

Is this bug related to Nuxt or Vue?

Nuxt

Version

^3.1.3

Reproduction

https://stackblitz.com/edit/nuxt-ui-bhmakssh?file=app.vue

Description

While toogling visibility of a nuxt UI component with v-if work perfectly, toggling visibility with v-show does not work as expected (style="display: none;" remaine applied)

Additional context

No response

Logs

[benjamincanac]

Your reproduction uses Nuxt UI v2 but you specified v3 in the issue body, which is it?

[roseyda]

@benjamincanac , you're totaly right, the stackblitz playground (which is a fork of nuxtUI playground) use the v2+ of nuxtUI.
I tried to upgrade to latest version of nuxt and nuxtUI and got the following error :
ERROR Pre-transform error: Cannot apply unknown utility class font-sans. Are you using CSS modules or similar and missing @reference? https://tailwindcss.com/docs/functions-and-directives#reference-directive Plugin: @tailwindcss/vite:generate:serve

However, on my personnal project, I'm currently using latest version of nuxt and nuxtUI, and I'm facing the same behavior.
Here after is the package.json of my project :
{ "name": "planning-infirmier", "version": "1.11.0", "private": true, "type": "module", "scripts": { "build": "nuxt build", "dev": "nuxt dev", "generate": "nuxt generate", "preview": "nuxt preview", "postinstall": "nuxt prepare", "lint": "eslint .", "lint:fix": "eslint --fix .", "format": "prettier --write .", "db:generate": "drizzle-kit generate" }, "dependencies": { "@iconify-json/lucide": "^1.2.49", "@iconify-json/simple-icons": "^1.2.38", "@nuxt/icon": "^1.13.0", "@nuxt/image": "^1.10.0", "@nuxt/ui": "^3.1.3", "@nuxthub/core": "^0.9.0", "@nuxtjs/i18n": "^9.5.5", "@paralleldrive/cuid2": "^2.2.2", "@pinia/nuxt": "^0.11.1", "@vite-pwa/nuxt": "^1.0.4", "@vueuse/nuxt": "^13.3.0", "date-fns": "^4.1.0", "drizzle-kit": "^0.31.1", "drizzle-orm": "^0.44.2", "h3-zod": "^0.5.3", "nuxt": "^3.17.5", "nuxt-auth-utils": "^0.5.20", "pinia": "^3.0.3", "tailwindcss": "^4.1.10", "vue": "^3.5.16", "zod": "^3.25.64" }, "devDependencies": { "@nuxt/eslint": "^1.4.1", "eslint": "^9.29.0", "eslint-config-prettier": "^10.1.5", "eslint-plugin-prettier": "^5.4.1", "eslint-plugin-vue": "^10.2.0", "prettier": "^3.5.3", "prettier-plugin-tailwindcss": "^0.6.12", "typescript": "^5.8.3", "wrangler": "^4.20.0" }, "volta": { "node": "22.14.0" } }

If I can help debugging or fixing this issue, feel free to let me know

[roseyda]

Update:
I just made a new reproduction projetc base on Nuxt UI v3 stater : https://stackblitz.com/edit/github-hitsapfi-b2mkjav6?file=app%2Fpages%2Findex.vue

I upgraded to the latest packages version and the bug is reproducible (button <UButton v-show="display">v-show => display = true</UButton> is never displayed