N
Nuxt•2d ago
Adnan Erlansyah

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.
2 Replies
kapa.ai
kapa.ai•2d 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.ai•2d ago
<@1079709612078534676> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?