Multipurpose button
So I had this working with Nuxt 2 but it broke upgrading to Nuxt 3.
https://thenextbit.de/en/blog/multipurpose-buttons-with-tailwind
The article is already a few years old, and now every <BaseButton> I make becomes a "button" and doesn't look if it has "to" (to become a <NuxtLink> or "href" for <a>.
How can I fix it or is there a workaround?
Create multipurpose buttons with Nuxt & Tailwind
I'll show you the concept of creating a reusable button component for your next Nuxt project with Tailwind CSS in just a few steps.
6 Replies
replace 'nuxt-link' with
resolveComponent('nuxt-link') 🙂Thank you for finding the source! Here it is if someone wants it: https://nuxt.com/docs/guide/directory-structure/components#dynamic-components Also, I needed to resolveComponent on the script setup on top, if i did it directly in the
:is="to ? resolveComponent('nuxt-link') : href ? 'a' : 'button'" was not working for me.FYI: you can also use NuxtLink with
href now
(for external links)
so NuxtLink or button is enoughYep, did not know that. Still finding new things every day. Thank you again!
So like this?
:is="to || href ? nuxtLink : 'button'" I believe something might not be right because I get the console warning that both 'to' and 'href' cannot be used together.you'd bind
to to to || href tooI feel like this is a
defineProps error, previously in Nuxt 2 with default: null it would not render the 'to' or 'href' if it was empty. But maybe now it does and thats whats giving the console warning? Idk maybe I'm just saying stupid things but cant make it work hahaha.