Files

T

fargo 1a822493ba format: apply repo prettier (3.8.1) to the folded skills tree

963 markdown files reformatted with the repository's pinned prettier so
pnpm format:check covers the folded tree like every other repo file.

The formatter's embedded-language pass also normalized code fences
(TS semicolons, closed HTML tags in examples, lowercased CSS hex colors,
one renumbered list that skipped an index). Alphanumeric token deltas vs
the fold commit were audited file-by-file; all are formatter-equivalent
markup normalizations plus the four sanitized skills.

2026-08-19 14:37:17 -05:00

4.5 KiB

Raw Blame History

name, description

name	description
built-in-components	NuxtLink, NuxtPage, NuxtLayout, and other built-in Nuxt components

Built-in Components

Nuxt provides several built-in components for common functionality.

NuxtLink

Optimized link component with prefetching:

<template>
  <!-- Basic usage -->
  <NuxtLink to="/about">About</NuxtLink>

  <!-- With route object -->
  <NuxtLink :to="{ name: 'posts-id', params: { id: 1 } }">Post 1</NuxtLink>

  <!-- External link (opens in new tab) -->
  <NuxtLink to="https://nuxt.com" external>Nuxt</NuxtLink>

  <!-- Disable prefetching -->
  <NuxtLink to="/heavy-page" :prefetch="false">Heavy Page</NuxtLink>

  <!-- Replace history instead of push -->
  <NuxtLink to="/page" replace>Replace</NuxtLink>

  <!-- Custom active class -->
  <NuxtLink to="/dashboard" active-class="text-primary" exact-active-class="font-bold">
    Dashboard
  </NuxtLink>
</template>

NuxtPage

Renders the current page component (used in layouts):

<!-- app/app.vue -->
<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

With page transitions:

<template>
  <NuxtPage :transition="{ name: 'fade', mode: 'out-in' }" />
</template>

Pass props to page:

<template>
  <NuxtPage :page-key="route.fullPath" :foobar="123" />
</template>

NuxtLayout

Controls layout rendering:

<!-- app/app.vue -->
<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

Dynamic layout:

<template>
  <NuxtLayout :name="layout">
    <NuxtPage />
  </NuxtLayout>
</template>

<script setup>
const layout = computed(() => (isAdmin ? 'admin' : 'default'));
</script>

Layout with transitions:

<template>
  <NuxtLayout :transition="{ name: 'slide', mode: 'out-in' }">
    <NuxtPage />
  </NuxtLayout>
</template>

NuxtLoadingIndicator

Progress bar for page navigation:

<!-- app/app.vue -->
<template>
  <NuxtLoadingIndicator
    color="repeating-linear-gradient(to right, #00dc82 0%, #34cdfe 50%, #0047e1 100%)"
    :height="3"
    :duration="2000"
    :throttle="200"
  />
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

NuxtErrorBoundary

Catch and handle errors in child components:

<template>
  <NuxtErrorBoundary @error="handleError">
    <ComponentThatMightFail />

    <template #error="{ error, clearError }">
      <div class="error">
        <p>Something went wrong: {{ error.message }}</p>
        <button @click="clearError">Try again</button>
      </div>
    </template>
  </NuxtErrorBoundary>
</template>

<script setup>
function handleError(error) {
  console.error('Error caught:', error);
}
</script>

ClientOnly

Render content only on client-side:

<template>
  <ClientOnly>
    <!-- Browser-only component -->
    <BrowserOnlyChart :data="chartData" />

    <template #fallback>
      <p>Loading chart...</p>
    </template>
  </ClientOnly>
</template>

DevOnly

Render content only in development:

<template>
  <DevOnly>
    <DebugPanel />
  </DevOnly>
</template>

NuxtIsland

Server components (experimental):

<template>
  <NuxtIsland name="HeavyComponent" :props="{ data: complexData }" />
</template>

NuxtImg and NuxtPicture

Optimized images (requires @nuxt/image module):

<template>
  <!-- Basic optimized image -->
  <NuxtImg src="/images/hero.jpg" width="800" height="600" />

  <!-- Responsive with srcset -->
  <NuxtImg
    src="/images/hero.jpg"
    sizes="sm:100vw md:50vw lg:400px"
    :modifiers="{ format: 'webp' }"
  />

  <!-- Art direction with picture -->
  <NuxtPicture src="/images/hero.jpg" :img-attrs="{ alt: 'Hero image' }" />
</template>

Teleport

Render content outside component tree:

<template>
  <button @click="showModal = true">Open Modal</button>

  <Teleport to="body">
    <div v-if="showModal" class="modal">
      <p>Modal content</p>
      <button @click="showModal = false">Close</button>
    </div>
  </Teleport>
</template>

For SSR, use <ClientOnly> with Teleport:

<template>
  <ClientOnly>
    <Teleport to="#teleports">
      <Modal />
    </Teleport>
  </ClientOnly>
</template>

NuxtRouteAnnouncer

Accessibility: announces page changes to screen readers:

<!-- app/app.vue -->
<template>
  <NuxtRouteAnnouncer />
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

4.5 KiB Raw Blame History