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 
191## NuxtImg and NuxtPicture
192 
193Optimized images (requires `@nuxt/image` module):
194 
195```vue
196<template>
197  <!-- Basic optimized image -->
198  <NuxtImg src="/images/hero.jpg" width="800" height="600" />
199 
200  <!-- Responsive with srcset -->
201  <NuxtImg
202    src="/images/hero.jpg"
203    sizes="sm:100vw md:50vw lg:400px"
204    :modifiers="{ format: 'webp' }"
205  />
206 
207  <!-- Art direction with picture -->
208  <NuxtPicture
209    src="/images/hero.jpg"
210    :img-attrs="{ alt: 'Hero image' }"
211  />
212</template>
213```
214 
215## Teleport
216 
217Render content outside component tree:
218 
219```vue
220<template>
221  <button @click="showModal = true">Open Modal</button>
222 
223  <Teleport to="body">
224    <div v-if="showModal" class="modal">
225      <p>Modal content</p>
226      <button @click="showModal = false">Close</button>
227    </div>
228  </Teleport>
229</template>
230```
231 
232For SSR, use `<ClientOnly>` with Teleport:
233 
234```vue
235<template>
236  <ClientOnly>
237    <Teleport to="#teleports">
238      <Modal />
239    </Teleport>
240  </ClientOnly>
241</template>
242```
243 
244## NuxtRouteAnnouncer
245 
246Accessibility: announces page changes to screen readers:
247 
248```vue
249<!-- app/app.vue -->
250<template>
251  <NuxtRouteAnnouncer />
252  <NuxtLayout>
253    <NuxtPage />
254  </NuxtLayout>
255</template>
256```
257 
258<!-- 
259Source references:
260- https://nuxt.com/docs/api/components/nuxt-link
261- https://nuxt.com/docs/api/components/nuxt-page
262- https://nuxt.com/docs/api/components/nuxt-layout
263- https://nuxt.com/docs/api/components/client-only
264-->
265