N
Nuxt•3mo ago
lkjimy

Manual import inside pages and components

If i'm organizing components in the pages folder, following Alexander's video: https://www.youtube.com/watch?v=aAjfywmbfkM 
components: [
  {
    path: '#layers/my-layer/pages',
    pattern: '**/_components/**',
    pathPrefix: false
  }
],

pages: {
  pattern: ['**/*.vue', '!**/_components/**']
}
components: [
  {
    path: '#layers/my-layer/pages',
    pattern: '**/_components/**',
    pathPrefix: false
  }
],

pages: {
  pattern: ['**/*.vue', '!**/_components/**']
}
Can a page manually import the components from it's _components folder, instead of auto importing it globally? And, can components in the _components folder import each other manually? I tried relative paths, with no success.
Alexander Lichter
YouTube
Components in a DIFFERENT FOLDER?
Component belong into the components folder, right? WRONG! You can put them somewhere else too if you want - with just a few adjustments in Nuxt.js --- Links and Resources 🔗 Nuxt.js Issue about component grouping https://github.com/nuxt/nuxt/issues/28894 🔗 Josh's blog post https://deltener.com/blog/nuxt-enterprise-patterns-component-mana...
2 Replies
kapa.ai
kapa.ai•3mo ago
Hi @lkjimy. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the available knowledge sources, here’s what can be confirmed: Manual Import from _components in Pages - You can explicitly import components from the #components alias, which is Nuxt’s way to access auto-registered components. For example: 
  import { MyComponent } from '#components'
  
  import { MyComponent } from '#components'
This works for components that Nuxt has registered via its auto-import system, including those added through custom components configuration. However, this does not cover manual relative imports from arbitrary folders unless those folders are part of the build process or are registered as component directories by Nuxt.
Direct Imports - If you want to bypass Nuxt’s auto-importing and use classic relative imports (e.g., import MyComponent from './_components/MyComponent.vue'), this should work in standard Vue projects. However, in Nuxt, if the directory is not included in the build (e.g., not in components or pages), or if there are path resolution issues (especially with layers or custom aliases), you may encounter problems. The knowledge sources do not provide explicit confirmation that relative imports from a custom _components folder inside pages will always work, especially when using layers or custom configuration. Manual Import Between Components in _components - Similarly, components inside the _components folder should be able to import each other using relative paths, as long as the folder is accessible and the import path is correct. However, if you are using Nuxt layers or custom aliases, you may need to use fully resolved paths or ensure your build setup recognizes these folders. The documentation notes that relative paths can be problematic in layers and suggests using resolved paths as a workaround in some cases
Relative Paths and Aliases. Summary - Manual imports using relative paths from a custom _components folder inside pages are not explicitly guaranteed to work in all Nuxt setups, especially with layers or custom aliases. If you encounter issues, try using fully resolved paths or ensure your custom directory is properly registered and accessible to the build system. - Manual imports using the #components alias are supported for components registered with Nuxt’s auto-import system. - Components in _components can import each other manually if the import paths are correct and the folder is accessible, but issues may arise with layers or custom setups. If you are experiencing issues with relative imports, it may be due to how Nuxt resolves paths in layers or the specifics of your project structure. The knowledge sources do not provide a definitive solution for this scenario, so further troubleshooting or adjustments to your configuration may be necessary. If you need to ensure reliability, consider registering your _components directory with Nuxt’s components configuration and use the #components alias for imports, or use fully resolved paths as suggested in the documentation for layers.
The knowledge sources do not contain enough information to guarantee that manual relative imports from a custom _components folder inside pages will always work in Nuxt, especially when using layers. For more complex setups, refer to the official documentation on Relative Paths and Aliases and Direct Imports.
---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•3mo ago
<@126052960038944768> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?