#How to make PageCard clickable except the footer

9 messages · Page 1 of 1 (latest)

stuck elbow
#

I'm using PageCard with footer like below but I cannot do anything in the button. It always goto the card url

      <UPageCard
        to="https://github.com"
        target="_blank"
        title="GitHub"
      >
        <template #footer>
          <UButton
            icon="i-simple-icons-github"
            @click.stop.prevent="
              () => {
                alert(10000);
              }
            "
          >
            I wanna click here
          </UButton>
        </template>
      </UPageCard>
weak idolBOT
#

Hi @stuck elbow. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Use the footer slot’s own click handler with event modifiers to stop the card’s link navigation from handling clicks inside the footer.

In your example, add both .stop and .prevent on the button (or a wrapper in the footer) so the event doesn’t bubble to UPageCard’s internal NuxtLink:

<UPageCard
  to="<https://github.com/keebdex/keebdex">
  target="_blank"
  title="Keebdex"
>
  <template #footer>
    <div @click.stop.prevent>
      <UButton
        icon="i-simple-icons-github"
        @click="
          () => {
            alert(10000)
          }
        "
      >
        I wanna click here
      </UButton>
    </div>
  </template>
</UPageCard>

Rationale:

  • UPageCard accepts NuxtLink props (to/target) and becomes a clickable card. Use slots like footer to place interactive content. Stopping and preventing the click in that slot prevents the card’s link from triggering, similar to the recommended pattern for nested links where you avoid nested anchors and use a non-link element with @click.prevent/.stop instead (PageCard API/slots, Button as link props, and the nested-link guidance/workaround: use a div with @click.prevent inside a link container (Stack Overflow answer)).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@stuck elbow Kapa.ai is still learning and improving, please let me know how I did by reacting below.

stuck elbow
#

@weak idol that's not work for me

weak idolBOT
#

Let me check the knowledge base for you again. One moment! :books:

#

Try moving the stop/prevent to the footer slot container (so every click in the footer is ignored by the card link), and ensure the button itself is not rendered as a link.

Example:

<UPageCard
  to="<https://github.com/keebdex/keebdex">
  target="_blank"
  title="Keebdex"
>
  <template #footer>
    <!-- Stop and prevent at the footer root -->
    <div @click.stop.prevent>
      <UButton
        color="neutral"
        variant="outline"
        :to="undefined"         <!-- ensure it's not a link -->
        @click="() => alert(10000)"
      >
        I wanna click here
      </UButton>
    </div>
  </template>
</UPageCard>

Why: PageCard turns the whole card into a NuxtLink when you pass to/target. Interactions inside slots are allowed, but you must stop the click from bubbling to the card link (same pattern as avoiding nested links; use a non-link element with @click.stop.prevent) (PageCard slots/API, nested link workaround).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@stuck elbow Kapa.ai is still learning and improving, please let me know how I did by reacting below.

radiant talon
#

You can apply a z-index on the button