Nuxt•5w ago

Where to keep page-specific components without exposing them as routes

Hello, where should I store components that are only relevant to a specific page. I cannot find documentation about this. The /components directory exposes the components to your entire application via auto-imports, and the /pages directory can lead to unwanted routes. Is there a convention for where to place this category of component?

2 Replies

kapa.ai•5w ago

Hi @scottbedard. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Nuxt’s official documentation does not prescribe a strict convention for colocating page-specific components (i.e., components only used by a single page and not meant to be globally auto-imported). By default, components placed in the /components directory are auto-imported and available throughout your app, while files in /pages are treated as routes and exposed as such Nuxt components directory. However, there is a community-supported pattern for colocating components within the /pages directory, often by placing them in a subdirectory (like _partials or components) inside the relevant page folder. These are then imported manually in the page file, so they are not auto-imported globally or exposed as routes. This approach is discussed in a GitHub issue and a related YouTube video, where the following configuration is suggested to support auto-importing only from specific subfolders (such as /pages/**/components/**), but you can also simply import them directly as needed GitHub Issue: Components Inside Pages Directory:

// nuxt.config.ts
export default defineNuxtConfig({
  components: [
    '~/components',
    {
      path: '~/pages',
      pattern: '**/components/**',
      pathPrefix: false
    }
  ]
})

// nuxt.config.ts
export default defineNuxtConfig({
  components: [
    '~/components',
    {
      path: '~/pages',
      pattern: '**/components/**',
      pathPrefix: false
    }
  ]
})

Alternatively, you can skip auto-import and just use direct imports in your page:

<script setup>
import MyPageSpecificComponent from './components/MyPageSpecificComponent.vue'
</script>

<script setup>
import MyPageSpecificComponent from './components/MyPageSpecificComponent.vue'
</script>

Summary:
- Place page-specific components in a subfolder (e.g., components or _partials) inside your page’s directory. - Import them directly in your page file to avoid global exposure and unwanted routes. - Optionally, configure Nuxt to auto-import from these subfolders if you want, but manual import is simplest and safest. The knowledge sources do not mention a strict convention, but this approach is widely used and supported by the community GitHub Issue: Components Inside Pages Directory. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5w ago

<@465216770869821480> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

Where to keep page-specific components without exposing them as routes

Did you find this page helpful?