Setting the file. One moment.
Subchapter 4.13
references/features-components-autoimport.mdMarkdown5 KBView on GitHub
Nuxt automatically imports Vue components from app/components/ directory.
components/
├── Button.vue → <Button />
├── Card.vue → <Card />
└── AppHeader.vue → <AppHeader /><template>
<!-- No imports needed -->
<AppHeader />
<Card>
<Button>Click me</Button>
</Card>
</template>Component names include directory path:
components/
├── base/
│ └── Button.vue → <BaseButton />
├── form/
│ ├── Input.vue → <FormInput />
│ └── Select.vue → <FormSelect />
└── ui/
└── modal/
└── Dialog.vue → <UiModalDialog />// nuxt.config.ts
export default defineNuxtConfig({
components: [
{
path: '~/components',
pathPrefix: false, // Use filename only
},
],
})With pathPrefix: false:
components/base/Button.vue → <Button />Prefix with Lazy for dynamic imports:
<script setup lang="ts">
const showChart = ref(false)
</script>
<template>
<!-- Component code loaded only when rendered -->
<LazyHeavyChart v-if="showChart" />
<button @click="showChart = true">Show Chart</button>
</template>Benefits:
Control when lazy components become interactive:
Hydrate when component enters viewport:
<template>
<LazyComments hydrate-on-visible />
</template>Hydrate when browser is idle:
<template>
<LazyAnalytics hydrate-on-idle />
</template>Hydrate on user interaction:
<template>
<!-- Hydrates on click, focus, or pointerenter -->
<LazyDropdown hydrate-on-interaction />
<!-- Specific event -->
<LazyTooltip hydrate-on-interaction="mouseover" />
</template>Hydrate when media query matches:
<template>
<LazyMobileMenu hydrate-on-media-query="(max-width: 768px)" />
</template>Hydrate after delay (milliseconds):
<template>
<LazyAds :hydrate-after="3000" />
</template>Hydrate on condition:
<script setup lang="ts">
const isReady = ref(false)
</script>
<template>
<LazyEditor :hydrate-when="isReady" />
</template>Never hydrate (static only):
<template>
<LazyStaticFooter hydrate-never />
</template><template>
<LazyChart hydrate-on-visible @hydrated="onChartReady" />
</template>
<script setup>
function onChartReady() {
console.log('Chart is now interactive')
}
</script>components/
└── BrowserChart.client.vue<template>
<!-- Only rendered in browser -->
<BrowserChart />
</template>components/
└── ServerMarkdown.server.vue<template>
<!-- Rendered on server, not hydrated -->
<ServerMarkdown :content="markdown" />
</template>Requires experimental flag:
// nuxt.config.ts
export default defineNuxtConfig({
experimental: {
componentIslands: true,
},
})components/
├── Comments.client.vue # Browser version
└── Comments.server.vue # SSR versionServer version renders during SSR, client version takes over after hydration.
<script setup lang="ts">
import { SomeComponent } from '#components'
const dynamicComponent = resolveComponent('MyButton')
</script>
<template>
<component :is="dynamicComponent" />
<component :is="SomeComponent" />
</template>Bypass auto-imports when needed:
<script setup lang="ts">
import { LazyMountainsList, NuxtLink } from '#components'
</script>// nuxt.config.ts
export default defineNuxtConfig({
components: [
{ path: '~/components/ui', prefix: 'Ui' },
{ path: '~/components/forms', prefix: 'Form' },
'~/components', // Default, should come last
],
})Register globally (creates async chunks):
// nuxt.config.ts
export default defineNuxtConfig({
components: {
global: true,
dirs: ['~/components'],
},
})Or use .global.vue suffix:
components/
└── Icon.global.vue → Available globally// nuxt.config.ts
export default defineNuxtConfig({
components: {
dirs: [], // Disable auto-imports
},
})Register components from npm package:
// my-ui-lib/nuxt.ts
import { addComponentsDir, createResolver, defineNuxtModule } from '@nuxt/kit'
export default defineNuxtModule({
setup() {
const resolver = createResolver(import.meta.url)
addComponentsDir({
path: resolver.resolve('./components'),
prefix: 'MyUi',
})
},
})