1---
2name: built-in-components
3description: NuxtLink, NuxtPage, NuxtLayout, and other built-in Nuxt components
4---
5 
6# Built-in Components
7 
8Nuxt provides several built-in components for common functionality.
9 
10## NuxtLink
11 
12Optimized link component with prefetching:
13 
14```vue
15<template>
16  <!-- Basic usage -->
17  <NuxtLink to="/about">About</NuxtLink>
18 
19  <!-- With route object -->
20  <NuxtLink :to="{ name: 'posts-id', params: { id: 1 } }">Post 1</NuxtLink>
21 
22  <!-- External link (opens in new tab) -->
23  <NuxtLink to="https://nuxt.com" external>Nuxt</NuxtLink>
24 
25  <!-- Disable prefetching -->
26  <NuxtLink to="/heavy-page" :prefetch="false">Heavy Page</NuxtLink>
27 
28  <!-- Replace history instead of push -->
29  <NuxtLink to="/page" replace>Replace</NuxtLink>
30 
31  <!-- Custom active class -->
32  <NuxtLink
33    to="/dashboard"
34    active-class="text-primary"
35    exact-active-class="font-bold"
36  >
37    Dashboard
38  </NuxtLink>
39</template>
40```
41 
42## NuxtPage
43 
44Renders the current page component (used in layouts):
45 
46```vue
47<!-- app/app.vue -->
48<template>
49  <NuxtLayout>
50    <NuxtPage />
51  </NuxtLayout>
52</template>
53```
54 
55With page transitions:
56 
57```vue
58<template>
59  <NuxtPage :transition="{ name: 'fade', mode: 'out-in' }" />
60</template>
61```
62 
63Pass props to page:
64 
65```vue
66<template>
67  <NuxtPage :page-key="route.fullPath" :foobar="123" />
68</template>
69```
70 
71## NuxtLayout
72 
73Controls layout rendering:
74 
75```vue
76<!-- app/app.vue -->
77<template>
78  <NuxtLayout>
79    <NuxtPage />
80  </NuxtLayout>
81</template>
82```
83 
84Dynamic layout:
85 
86```vue
87<template>
88  <NuxtLayout :name="layout">
89    <NuxtPage />
90  </NuxtLayout>
91</template>
92 
93<script setup>
94const layout = computed(() => isAdmin ? 'admin' : 'default')
95</script>
96```
97 
98Layout with transitions:
99 
100```vue
101<template>
102  <NuxtLayout :transition="{ name: 'slide', mode: 'out-in' }">
103    <NuxtPage />
104  </NuxtLayout>
105</template>
106```
107 
108## NuxtLoadingIndicator
109 
110Progress bar for page navigation:
111 
112```vue
113<!-- app/app.vue -->
114<template>
115  <NuxtLoadingIndicator
116    color="repeating-linear-gradient(to right, #00dc82 0%, #34cdfe 50%, #0047e1 100%)"
117    :height="3"
118    :duration="2000"
119    :throttle="200"
120  />
121  <NuxtLayout>
122    <NuxtPage />
123  </NuxtLayout>
124</template>
125```
126 
127## NuxtErrorBoundary
128 
129Catch and handle errors in child components:
130 
131```vue
132<template>
133  <NuxtErrorBoundary @error="handleError">
134    <ComponentThatMightFail />
135 
136    <template #error="{ error, clearError }">
137      <div class="error">
138        <p>Something went wrong: {{ error.message }}</p>
139        <button @click="clearError">Try again</button>
140      </div>
141    </template>
142  </NuxtErrorBoundary>
143</template>
144 
145<script setup>
146function handleError(error) {
147  console.error('Error caught:', error)
148}
149</script>
150```
151 
152## ClientOnly
153 
154Render content only on client-side:
155 
156```vue
157<template>
158  <ClientOnly>
159    <!-- Browser-only component -->
160    <BrowserOnlyChart :data="chartData" />
161 
162    <template #fallback>
163      <p>Loading chart...</p>
164    </template>
165  </ClientOnly>
166</template>
167```
168 
169## DevOnly
170 
171Render content only in development:
172 
173```vue
174<template>
175  <DevOnly>
176    <DebugPanel />
177  </DevOnly>
178</template>
179```
180 
181## NuxtIsland
182 
183Server components (experimental):
184 
185```vue
186<template>
187  <NuxtIsland name="HeavyComponent" :props="{ data: complexData }" />
188</template>
189```
190 
191Islands 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).
192 
193## NuxtImg and NuxtPicture
194 
195Optimized images (requires `@nuxt/image` module):
196 
197```vue
198<template>
199  <!-- Basic optimized image -->
200  <NuxtImg src="/images/hero.jpg" width="800" height="600" />
201 
202  <!-- Responsive with srcset -->
203  <NuxtImg
204    src="/images/hero.jpg"
205    sizes="sm:100vw md:50vw lg:400px"
206    :modifiers="{ format: 'webp' }"
207  />
208 
209  <!-- Art direction with picture -->
210  <NuxtPicture
211    src="/images/hero.jpg"
212    :img-attrs="{ alt: 'Hero image' }"
213  />
214</template>
215```
216 
217## Teleport
218 
219Render content outside component tree:
220 
221```vue
222<template>
223  <button @click="showModal = true">Open Modal</button>
224 
225  <Teleport to="body">
226    <div v-if="showModal" class="modal">
227      <p>Modal content</p>
228      <button @click="showModal = false">Close</button>
229    </div>
230  </Teleport>
231</template>
232```
233 
234For SSR, use `<ClientOnly>` with Teleport:
235 
236```vue
237<template>
238  <ClientOnly>
239    <Teleport to="#teleports">
240      <Modal />
241    </Teleport>
242  </ClientOnly>
243</template>
244```
245 
246## NuxtRouteAnnouncer
247 
248Accessibility: automatically announces page changes (from the page `<title>`) to screen readers:
249 
250```vue
251<!-- app/app.vue -->
252<template>
253  <NuxtRouteAnnouncer />
254  <NuxtLayout>
255    <NuxtPage />
256  </NuxtLayout>
257</template>
258```
259 
260## NuxtAnnouncer
261 
262Accessibility: 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+):
263 
264```vue
265<!-- app/app.vue -->
266<template>
267  <NuxtAnnouncer />
268  <NuxtLayout>
269    <NuxtPage />
270  </NuxtLayout>
271</template>
272```
273 
274```vue
275<script setup lang="ts">
276const { polite, assertive } = useAnnouncer()
277assertive('Error: form is invalid') // interrupts immediately
278</script>
279```
280 
281Props: `politeness` (`polite` | `assertive` | `off`, default `polite`), `atomic` (default `true`). Use `<NuxtRouteAnnouncer>` for route changes, `<NuxtAnnouncer>` for everything else.
282 
283<!-- 
284Source references:
285- https://nuxt.com/docs/4.x/api/components/nuxt-link
286- https://nuxt.com/docs/4.x/api/components/nuxt-page
287- https://nuxt.com/docs/4.x/api/components/nuxt-layout
288- https://nuxt.com/docs/4.x/api/components/client-only
289- https://nuxt.com/docs/4.x/api/components/nuxt-announcer
290- https://nuxt.com/docs/4.x/api/components/nuxt-island
291-->
292