feat(PageSection): give links and features to slots #4810

Barbapapazes · 2025-08-23T10:31:54Z

🔗 Linked issue

❓ 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

Hello 👋,

When creating a page with UI layout components, I often start simple like:

<template>
  <UPageSection
    orientation="horizontal"
    title="Engage Your Audience"
    description="Share a single QR code to give your audience seamless access to everything they need - your profile, interactive features, live Q&A, and instant feedback."
    :links="[
      {
        label: 'Create Your Own',
        href: register().url,
      },
      {
        label: 'The Presentation Card',
        href: 'https://docs.inalia.app/presentation',
        target: '_blank',
        color: 'neutral',
        variant: 'ghost',
      },
    ]"
  />
</template>

And then, I want to add animations to the links using Motion. So I have to refactor the component and to extract the links to a separate variable:

<script setup>
const links = [
  {
    label: 'Create Your Own',
    href: register().url,
  },
  {
    label: 'The Presentation Card',
    href: 'https://docs.inalia.app/presentation',
    target: '_blank',
    color: 'neutral',
    variant: 'ghost',
  },
]
</script>

<template>
  <UPageSection
    orientation="horizontal"
    title="Engage Your Audience"
    description="Share a single QR code to give your audience seamless access to everything they need - your profile, interactive features, live Q&A, and instant feedback."
  >
    <template #links>
      <Motion v-for="link in links" :key="link.label">
        <!-- ... -->
      </Motion>
    </template>
  </UPageSection>
</template>

This is annoying when building a page with multiple sections like this cause the script will be polluted with repetitive code that was, at first, collocated with the corresponding section.

By passing the links to the UPageSection component, we can keep the script clean and the template readable as follows:

<template>
  <UPageSection
    orientation="horizontal"
    title="Engage Your Audience"
    description="Share a single QR code to give your audience seamless access to everything they need - your profile, interactive features, live Q&A, and instant feedback."
    :links="[
      {
        label: 'Create Your Own',
        href: register().url,
      },
      {
        label: 'The Presentation Card',
        href: 'https://docs.inalia.app/presentation',
        target: '_blank',
        color: 'neutral',
        variant: 'ghost',
      },
    ]"
  >
    <template #links={ links }>
      <Motion v-for="link in links" :key="link.label">
        <!-- ... -->
      </Motion>
    </template>
  </UPageSection>
</template>

📝 Checklist

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

pkg-pr-new · 2025-09-06T22:22:01Z

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

commit: aa5ce5c

benjamincanac

I agree this could be a nice addition. However, this needs to be typed and done in all components that share the same behavior for consistency.

Let me know if you want us to take over.

Barbapapazes requested a review from benjamincanac as a code owner August 23, 2025 10:31

vercel bot deployed to Preview August 23, 2025 10:39 View deployment

HugoRCD approved these changes Aug 25, 2025

View reviewed changes

benjamincanac added the v4 #4488 label Aug 25, 2025

benjamincanac force-pushed the v4 branch 4 times, most recently from b742c6e to 61b603f Compare September 1, 2025 12:34

Barbapapazes force-pushed the feat/page-section branch from e1e243f to 3a7a451 Compare September 6, 2025 22:13

feat: restore

48011e9

Barbapapazes force-pushed the feat/page-section branch from aadb75e to 48011e9 Compare September 6, 2025 22:16

Merge branch 'v4' into feat/page-section

aa5ce5c

benjamincanac force-pushed the v4 branch 2 times, most recently from 3f0c24a to c9ba808 Compare September 23, 2025 11:06

benjamincanac requested changes Oct 22, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(PageSection): give links and features to slots #4810

feat(PageSection): give links and features to slots #4810

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

feat(PageSection): give links and features to slots #4810

Are you sure you want to change the base?

feat(PageSection): give links and features to slots #4810

Conversation

🔗 Linked issue

❓ Type of change

📚 Description

📝 Checklist

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants