Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking β€œSign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(Button): replace ULink with dynamic component rendering #3066

Open
wants to merge 2 commits into
base: v3
Choose a base branch
from

Conversation

fech-dev
Copy link

πŸ”— Linked issue

Resolves #3037

❓ 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 Button component utilizes the Link component to render as a button. However, this causes an issue when using the Button with Vue's Transition or TransitionGroup components. Since the NuxtLink component, used by the Link component, renders a fragment, it prevents the Transition component from animating its child elements.

To address this, I've implemented Vue's dynamic component. When the to prop is provided, it renders a Link component; otherwise, it renders a native button.

πŸ“ Checklist

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

Sorry, something went wrong.

Copy link

pkg-pr-new bot commented Jan 10, 2025

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

commit: fc6b905

@benjamincanac benjamincanac added the v3 #1289 label Jan 13, 2025
@benjamincanac
Copy link
Member

@fech-dev Thanks for trying to solve this but I don't think this is the correct solution as the problem will persist on the Link component. We have to understand why this happens when using <NuxtLink> with custom prop πŸ€”

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
v3 #1289
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Unable to animate Button with Transition component
2 participants