Components

Overriding Layer Components

To customize any layer component, create a file with the same name and path in your app:

layer/app/components/section/Hero.vue    ← Layer default
app/components/section/Hero.vue          ← Your override (takes priority)

Your component completely replaces the layer's version. See Nuxt Layers for more on component overriding.

Creating Custom Sections

Add new sections by creating components in app/components/section/:

<script setup lang="ts">
defineProps<{
  headline?: string
  items?: { name: string; quote: string }[]
}>()
</script>

<template>
  <SectionWrapper section-id="testimonials">
    <template #title>
      {{ headline }}
    </template>
    <!-- Your testimonials UI -->
  </SectionWrapper>
</template>

Then use in Markdown:

::section-testimonials
---
headline: What People Say
items:
  - name: Jane
    quote: This changed how I validate ideas.
---
::

SectionWrapper

Always wrap section components in SectionWrapper. It provides:

• data-testid="section-{sectionId}" — For automated testing
• aria-labelledby — Accessibility landmark linking to heading
• section_view event — Auto-tracked when the section enters the viewport

<SectionWrapper section-id="my-section">
  <template #title>
    Section Heading
  </template>
  <!-- Content -->
</SectionWrapper>

data-testid Convention

All key components have data-testid attributes for testing:

Sections (auto-set by SectionWrapper):

section-hero, section-benefits, section-faq, etc.

Convert components (set on root element):

convert-form, convert-external, convert-internal,
convert-pricing, convert-social, convert-social-share, convert-rss

These are used for automated testing and agent navigability verification.

Component Complexity Budget

Foundry follows strict component limits:

When overriding components, you're free to ignore these limits in your app — but they're good guidelines for maintainability.

Useful Layer Components

Some components are designed to be used directly in your templates:

See the Components Reference for complete props and usage.