fix(carousel): resolve fade plugin failure during page transitions

[mikenewbon]

• Replace computedAsync with manual plugin loading using ref + watch
• Add retry logic with exponential backoff for dynamic import failures
• Fix fade transitions breaking after page navigation with pageTransition enabled
• Maintain all existing plugin functionality while improving reliability

Fixes issue where carousel fade property stopped working after page navigation when page transitions were configured in Nuxt applications.

🔗 Linked issue

Resolves #4379

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

The Nuxt UI Carousel component's fade property would stop working after page navigation when pageTransition was enabled in Nuxt applications. This bug manifested as:

• Fade transitions worked correctly on initial page load
• After navigating between pages, fade functionality broke completely
• Carousel would revert to slide animations instead of fade transitions
• No console errors were displayed, making it difficult to debug

This issue only occurred when both conditions were met:

1. Carousel component had fade prop enabled
2. Page transitions were configured using definePageMeta({ pageTransition: ... })

Root Cause Analysis

The bug was caused by VueUse's computedAsync failing during page transitions in Nuxt:

1. Dynamic Import Timing Issues: The carousel used computedAsync to dynamically import Embla Carousel plugins (including embla-carousel-fade)
2. Page Transition Interference: When page transitions occurred, the Vue component context was torn down and recreated
3. Silent Failures: During this transition, computedAsync's dynamic imports would fail silently
4. Plugin Loss: The fade plugin failed to load, causing plugins.value to become an empty array
5. Carousel Reinitializes: The carousel would reinitialize without the fade plugin, reverting to slide behavior

Technical Solution

Replaced the unreliable computedAsync approach with a robust manual implementation:

Before (Problematic):

const plugins = computedAsync<EmblaPluginType[]>(async () => {
  // Dynamic imports that failed during page transitions
  if (props.fade) {
    const FadePlugin = await import('embla-carousel-fade').then(r => r.default)
    plugins.push(FadePlugin(/* options */))
  }
  return plugins
})

After (Fixed):

const plugins = ref<EmblaPluginType[]>([])

const loadPlugins = async (retryCount = 0) => {
  try {
    // Same plugin loading logic with retry mechanism
    if (props.fade) {
      const FadePlugin = await import('embla-carousel-fade').then(r => r.default)
      pluginList.push(FadePlugin(/* options */))
    }
    plugins.value = pluginList
  } catch (error) {
    // Retry with exponential backoff
    if (retryCount < 3) {
      setTimeout(() => loadPlugins(retryCount + 1), Math.pow(2, retryCount) * 100)
    }
  }
}

// Load on mount and when props change
onMounted(() => loadPlugins())
watch([/* plugin props */], () => loadPlugins())

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[pkg-pr-new]

npm i https://pkg.pr.new/@nuxt/ui@4380

commit: ed8dd45

[mikenewbon]

Just want to say, what a cool project to contribute to! It's my first time here and I'm a little worried my solution is a bandaid and I should have followed the breadcrumbs further back - but I really appreciate this pipeline that lets me install the built package on my project. Hope I can contribute further in the future.