Nuxt•4d ago

How to make PageCard clickable except the footer

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>

      <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>

6 Replies

kapa.ai•4d ago

Hi @Nya. 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>

<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: ----------------------

kapa.ai•4d ago

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

NyaOP•4d ago

@kapa.ai that's not work for me

kapa.ai•4d ago

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>

<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: ----------------------

kapa.ai•4d ago

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

HugoRCD•3d ago

You can apply a z-index on the button https://github.com/nuxt/ui-pro/issues/1102

Gaming

Programming

How to make PageCard clickable except the footer

Did you find this page helpful?