UCarousel fade transitions break after page navigation with pageTransition

[mikenewbon]

Environment

• Operating System: Darwin
• Node Version: v22.13.0
• Nuxt Version: 3.17.5
• CLI Version: 3.25.1
• Nitro Version: 2.11.12
• Package Manager: pnpm@10.10.0
• Builder: -
• User Config: modules, devtools, supabase, runtimeConfig, security, css, uiPro, routeRules, future, compatibilityDate, nitro, content, eslint
• Runtime Modules: @nuxt/eslint@1.4.1, @nuxt/image@1.10.0, @nuxt/ui-pro@3.1.3, @nuxt/content@3.6.0, @vueuse/nuxt@13.4.0, nuxt-og-image@5.1.7, @nuxtjs/supabase@1.5.2, nuxt-security@2.2.0
• Build Modules: -

Is this bug related to Nuxt or Vue?

Nuxt

Version

v3.1.3

Reproduction

Steps to Reproduce:

1. Load the StackBlitz demo: https://stackblitz.com/edit/nuxtui-carousel-fade-bug
2. Click the tabs on the carousel - notice the smooth fade transitions ✅
3. Navigate to "Page 2" using the button
4. Try clicking tabs on either page - fade transitions no longer work ❌
5. The carousel now uses slide animations instead of fade

Description

I noticed that when using page transitions, the fade property of the <UCarousel> component stops working after navigating between pages. The carousel reverts to slide animations instead of fade transitions. Removing the page transitions restores correct functionality.

I looked into it with the help of Claude and found the bug was caused by VueUse's computedAsync failing during page transitions in Nuxt. I will open a PR to fix this issue!

Additional context

Expected Behavior:

Carousel fade transitions should continue working after page navigation with transitions.

Actual Behavior:

Carousel fade transitions stop working and revert to slide animations after navigating between pages that have pageTransition configured.

Workaround:

Removing pageTransition from definePageMeta() restores fade functionality even after navigation.

Logs