/nuxt

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>

Islands render in their own isolated Vue app keyed on props (for cacheability). useRoute() and other vue-router composables inside an island reflect the island's own request, not the current page — pass route info in via props or the context prop. Props/context are sent as GET query params (may appear in logs/CDN caches).

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: automatically announces page changes (from the page <title>) to screen readers:

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

NuxtAnnouncer

Accessibility: a hidden live region for manual announcements of dynamic content (form validation, toasts, loading). Add it once, then drive it with the useAnnouncer composable (Nuxt 4.4.2+):

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

<script setup lang="ts">
const { polite, assertive } = useAnnouncer()
assertive('Error: form is invalid') // interrupts immediately
</script>

Props: politeness (polite | assertive | off, default polite), atomic (default true). Use <NuxtRouteAnnouncer> for route changes, <NuxtAnnouncer> for everything else.