How to import component from inside the directory in NuxtJS 3?

How to import component from inside the directory in NuxtJS 3? so for example, I have a component SplashScreen on folder components/partials.
Solution:
import MyComponent from '~/components/other/component.vue'; import MyComponent from '#imports';...
Jump to solution
3 Replies
kapa.ai
kapa.ai2mo ago
Hi @Adnan Erlansyah. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- In Nuxt 3, components are automatically imported from the components directory, including those in subdirectories. For your specific case with a SplashScreen component inside the components/partials folder, you can use it directly in your templates without explicitly importing it. Here's how you can use the component:
<template>
<PartialsSlashScreen />
</template>
<template>
<PartialsSlashScreen />
</template>
The component name is automatically generated based on its file path. In this case, "Partials" comes from the subdirectory name, and "SplashScreen" from the component file name. If you prefer to use a different naming convention, you can customize the auto-import behavior in your nuxt.config.ts file. For example, to remove the "Partials" prefix:
export default defineNuxtConfig({
components: [
{
path: '~/components',
pathPrefix: false,
},
],
})
export default defineNuxtConfig({
components: [
{
path: '~/components',
pathPrefix: false,
},
],
})
With this configuration, you could use the component simply as:
<template>
<SplashScreen />
</template>
<template>
<SplashScreen />
</template>
For more detailed information on component auto-imports and customization, you can refer to the Nuxt 3 Components documentation. Nuxt 3 Auto Imports documentation also provides additional insights into how auto-imports work in Nuxt 3. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai2mo ago
<@1079709612078534676> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Solution
Mittchel
Mittchel4w ago
import MyComponent from '~/components/other/component.vue'; import MyComponent from '#imports';

Did you find this page helpful?