[Slideover/Modal] Enter transition not working

[fabianbeier]

Environment

• Operating System: Darwin
• Node Version: v18.18.2
• Nuxt Version: 3.13.1
• CLI Version: 3.13.1
• Nitro Version: 2.9.7
• Package Manager: [email protected]
• Builder: -
• User Config: devtools, modules, eslint, runtimeConfig, site, mdc, image, components, strapi, i18n, vite, routeRules, formkit, compatibilityDate
• Runtime Modules: @nuxtjs/[email protected], @nuxt/[email protected], @vueuse/[email protected], @nuxtjs/[email protected], @nuxt/[email protected], @nuxt/[email protected], @nuxtjs/[email protected], @formkit/[email protected], [email protected], nuxt3-interpolation/index.cjs, [email protected], [email protected], @nuxtjs/[email protected], @formkit/[email protected], @nuxt/[email protected]
• Build Modules: -

Version

v2.18.4

Reproduction

https://stackblitz.com/edit/github-dbk9vy?file=app.vue

Description

Enter transition of sliderover Module not working properly. Instant appearing of elements (with sometimes slight but too quick transitions). Exit transition works fine.

Tried on Chrome, Firefox & Safari on Mac.

Additional context

No response

Logs

No response

[bikalpabhurtel]

I'm encountering this issue too. The entry transition of Modal is also not working.

Environment

• Operating System: Ubuntu 22.04 LTS
• Node Version: v20.14.0
• Nuxt Version: 3.13.1
• CLI Version: 3.13.1
• Nitro Version: 2.9.7
• Package Manager: [email protected]

[KonradDRAST]

Same here. App was working fine a few weeks back, but I updated packages this morning and suddenly entry transition is gone.

My Env:

• Operating System: Windows_NT
• Node Version: v20.10.0
• Nuxt Version: 3.13.1
• CLI Version: 3.13.1
• Nitro Version: 2.9.7
• Package Manager: [email protected]

---

[gilguo95]

Same here. The enter transition is either NOT WORKING AT ALL or VERY GLITCHY WITH FLICKERS. But I found that the situation only happens on chrome (macOS version, iOS version is fine). It also works fine on safari. Maybe it's a chrome bug?

Env:

• Operating System: macOS 14.5
• Node Version: v20.13.0
• Nuxt Version: 3.13.1 (compatibilityVersion: 4)
• CLI Version: 3.12.0
• Nitro Version: 2.9.7
• Package Manager: [email protected]
• Chrome: 128.0.6613.120

[benjamincanac]

Could you please tell me if using [email protected] fixes the issue? You can set it in your resolutions to try it out.

[createwithjames]

I'm experiencing the same issue for both Slideovers and Modals

Env:

• Operating System: macOS 14.5
• Node Version: v18.19.1
• Nuxt Version: 3.13.0
• CLI Version: 3.12.0
• Nitro Version: 2.9.7
• Package Manager: [email protected]
• Chrome: 128.0.6613.120

[fabianbeier]

@benjamincanac Changed reproduction to 3.13.0. Unfortunately the bug persists. Also tried out 3.12.4 which used to work 2-3 weeks ago but doesn't now.

[Tragio]

Seems to be related to Headless UI -> tailwindlabs/headlessui#3456 since the Nuxt UI is using TransitionRoot and others under the hood.

[benjamincanac]

Thanks @Tragio for the investigation, seems to be related to Vue 3.5 then. We'll have to wait for a fix from Headless UI.

[mtzrmzia]

Is there any workaround? I just downgrade to 3.4.x and Nuxt 3.13.0 but then i got an error.. so doesn't work

[NasrALdaya]

I am experiencing the same issue after upgrading to Nuxt 3.13.1

[hoachnt]

Same guys. I thought it was my fault, but after I saw your comments guys maybe it's not my fault

[Lauwisme]

Can confirm that downgrading vue (in my case to 3.4.27) solved the issue with enter transitions

[mtzrmzia]

Can confirm that downgrading vue (in my case to 3.4.27) solved the issue with enter transitions

No working for me:

  "dependencies": {
    "@nuxt/ui": "^2.18.4",
    "nuxt": "^3.13.0",
    "vue": "3.4.38",
  },

I'm getting this error:
Slideover.vue:1 Uncaught (in promise) SyntaxError: The requested module '/_nuxt/node_modules/vue/dist/vue.runtime.esm-bundler.js?v=f75796e0' does not provide an export named 'useId' (at Slideover.vue:1:209)

[IJsLauw]

"dependencies": { "@nuxt/ui": "^2.18.4", "nuxt": "3.11.2", "vue": "3.4.27", }, "overrides": { "vue": "3.4.27" }

This is what's working for me, fwiw.

[schillerenrico]

not working on the official nuxt ui site either https://ui.nuxt.com/components/slideover

[benjamincanac]

@schillerenrico I recently updated the docs to Nuxt 3.13.2 so this makes sense.