Nuxt•3mo ago

Autoimport components in module

I am writing a module that adds several components like Form, Question, Button etc. The module is configured to add auto-import components with addComponentsDir with a prefix (say My). So I can use MyForm and MyQuestion in the Nuxt app and it works fine! However I can't seem to understand how I can use autoimport in the module itself. So I want to import Question in Button but still keep the prefix variable through ModuleOptions and Question component overwriteable in the final app. How can I achieve this?

18 Replies

kapa.ai•3mo ago

Hi @snakemastr508. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- In Nuxt, when you use addComponentsDir in your module to auto-import components with a prefix (e.g., MyForm, MyQuestion), these components become available for auto-import in the Nuxt app that uses your module. However, auto-imports are only available to the consuming Nuxt application, not within the module's own runtime code. This means that inside your module's own components (e.g., Button.vue inside your module), you cannot rely on Nuxt's auto-import mechanism to resolve other components like Question.vue—you must import them explicitly. Why? - Auto-imports are a build-time feature for the Nuxt app, not for the module's own source code. The module's components are bundled before being registered with Nuxt, so they don't benefit from the consuming app's auto-imports or prefixes. - Prefixing and overwriting: The prefix (e.g., My) is only applied when the components are registered in the consuming app. Inside your module, you should reference components by their local file names or paths. How to structure your module 1. Explicit imports within your module:
In your module's components, import sibling components directly using relative paths:

   <!-- Button.vue inside your module -->
   <script setup>
   import Question from './Question.vue'
   </script>
   <template>
     <div>
       <Question />
     </div>
   </template>

   <!-- Button.vue inside your module -->
   <script setup>
   import Question from './Question.vue'
   </script>
   <template>
     <div>
       <Question />
     </div>
   </template>

This ensures your module works independently of the consuming app's configuration. 2. Allowing overwrites in the consuming app:
If you want the consuming app to be able to overwrite components (e.g., provide its own MyQuestion), you can: - Document that users can override components by placing a component with the same name in their own ~/components directory, and ensure your module's components are registered with a prefix. - Use dependency injection or provide/inject for more advanced scenarios, but this is not handled automatically by Nuxt's auto-import system. 3. Dynamic prefix via ModuleOptions:
The prefix is only relevant for the consuming app. Inside your module, you cannot dynamically import components based on the prefix, because the prefix is only applied at registration time in the Nuxt app, not in your module's source code. Summary - Inside your module: Always use explicit imports for your own components. - In the consuming app: Components are auto-imported with the prefix you specify via addComponentsDir, and can be overwritten by the user by providing a component with the same name and prefix in their own project. This is the recommended and supported approach according to the Nuxt documentation on custom directories and auto-imports and registering components in modules. If you need more advanced runtime resolution or dynamic imports based on user configuration, you would need to implement your own logic, but this is not covered by Nuxt's auto-import system.

I'm sorry, but there is no built-in way for a Nuxt module to use the consuming app's auto-imported components (with prefix and overwrites) inside the module's own components at build time. Explicit imports are required within the module itself.

Custom Directories | Library Authors ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

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

snakemastr508OP•3mo ago

@kapa.ai So how would I import Question if I want to use it recursively (in itself). Like

<!-- Question.vue -->
<template>
  <div>
    <label> label for single question </label>
    <div>
      <Question v-for="question in subQuestions" />
    </div>
  </div>
</template>

<!-- Question.vue -->
<template>
  <div>
    <label> label for single question </label>
    <div>
      <Question v-for="question in subQuestions" />
    </div>
  </div>
</template>

kapa.ai•3mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- To use a component recursively in Vue (and thus in Nuxt), you do not need to explicitly import it within its own file. Vue automatically registers a component so it can reference itself by its own name in the template. This means your example will work as expected:

<!-- Question.vue -->
<template>
  <div>
    <label> label for single question </label>
    <div>
      <Question v-for="question in subQuestions" />
    </div>
  </div>
</template>

<!-- Question.vue -->
<template>
  <div>
    <label> label for single question </label>
    <div>
      <Question v-for="question in subQuestions" />
    </div>
  </div>
</template>

No explicit import is needed for recursive self-reference. This is standard Vue behavior and is not affected by Nuxt's auto-import system. The component can reference itself by its PascalCase name in the template, and Vue will resolve it correctly. The Nuxt documentation does not mention any special requirements for recursive components—just use the component's own name in the template as shown above, and it will work as expected components directory. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

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

snakemastr508OP•3mo ago

@kapa.ai But if I register Question.vue inside the module, I do get Failed to resolve component: Question when using it in my application

kapa.ai•3mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- If you register Question.vue inside your module using addComponentsDir, and then use <Question /> recursively within itself, it should work as expected for recursion within the component itself—Vue will resolve the self-reference automatically, as long as the component's name matches the file name (Question.vue → <Question />) and the file is correctly registered as a component. However, if you try to use <Question /> in your application (outside the module), and you have registered the module's components with a prefix (e.g., My), then you must use the prefixed name in your app, such as <MyQuestion />. The unprefixed <Question /> will not be auto-imported in the consuming app if a prefix is set during registration Custom Directories. Summary: - Recursive usage inside Question.vue: <Question /> works without import. - Usage in your app: Use the prefixed name (e.g., <MyQuestion />) if you registered with a prefix. If you see "Failed to resolve component: Question" in your app, it likely means you are using the unprefixed name, but the component was registered with a prefix. Use the correct prefixed name in your templates. If you are still seeing this error for recursion within the component itself, double-check that the file is named Question.vue and that the <Question /> tag matches the PascalCase name, as this is standard Vue behavior and should work without explicit import components directory. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

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

snakemastr508OP•3mo ago

@kapa.ai Will this also work with prefixPath? E.g. my Question file is actually Form/Question/index.vue. Do I need to refer it as FormQuestion?

kapa.ai•3mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Yes, if your file is located at Form/Question/index.vue and you are using Nuxt's default component auto-import behavior (with pathPrefix: true, which is the default), you will need to refer to the component as <FormQuestion /> in your templates. This is because Nuxt generates the component name based on the directory structure and filename, concatenating the path segments in PascalCase components directory. For example, with this structure:

components/
  Form/
    Question/
      index.vue

components/
  Form/
    Question/
      index.vue

You would use:

<FormQuestion />

<FormQuestion />

If you want to use just <Question />, you can set pathPrefix: false in your component registration in nuxt.config.ts:

export default defineNuxtConfig({
  components: [
    {
      path: '~/components',
      pathPrefix: false,
    },
  ],
})

export default defineNuxtConfig({
  components: [
    {
      path: '~/components',
      pathPrefix: false,
    },
  ],
})

With pathPrefix: false, Form/Question/index.vue would be available as <Question /> components directory. So, by default, yes, you need to refer to it as <FormQuestion /> unless you change the pathPrefix option. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

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

snakemastr508OP•3mo ago

@kapa.ai But it's not resolving when in a compiled Nuxt module

kapa.ai•3mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- If your component (e.g., Form/Question/index.vue) is registered via a Nuxt module using addComponentsDir with the default pathPrefix: true, then the component should be auto-imported as <FormQuestion /> in the consuming Nuxt app. This naming convention is confirmed in the Nuxt documentation, which states that the component name is based on its directory structure and filename, with path segments concatenated in PascalCase components directory. However, if you are experiencing issues where <FormQuestion /> is not being resolved when the component is part of a compiled Nuxt module, there are a few important considerations: 1. Auto-imports are for the consuming app:
The auto-imported component names (with or without prefix/pathPrefix) are only available in the consuming Nuxt application, not within the module’s own source code. Inside your module, you must use explicit imports for sibling components. 2. Component registration in modules:
When you use addComponentsDir in your module, ensure you are providing the correct path and options. For example:

   addComponentsDir({
     path: resolver.resolve('./components'),
     prefix: 'My', // or no prefix if you want <FormQuestion />
     pathPrefix: true // default
   })

   addComponentsDir({
     path: resolver.resolve('./components'),
     prefix: 'My', // or no prefix if you want <FormQuestion />
     pathPrefix: true // default
   })

This will register Form/Question/index.vue as <MyFormQuestion /> if you use a prefix, or <FormQuestion /> if not. 3. Usage in the consuming app:
In your Nuxt app, you must use the name as registered (e.g., <FormQuestion /> or <MyFormQuestion />). If you use a different name, Nuxt will not resolve it. 4. Module build and compatibility:
If your module is pre-compiled or built with a tool like @nuxt/module-builder, ensure that the components directory is included in the published package and that the paths are correct @nuxt/module-builder. If you have followed these steps and <FormQuestion /> is still not resolved in the consuming app, the knowledge sources do not provide further troubleshooting steps for this specific scenario. There may be an issue with how the module is built or published, or with the configuration of addComponentsDir. In summary:
- Yes, with pathPrefix: true, you should use <FormQuestion />. - If it is not resolving in a compiled Nuxt module, double-check your module's build and registration process. - The knowledge sources do not provide more detailed troubleshooting for this specific issue. If you need more help, you may want to check for errors in your module's build output or consult the Nuxt community for module-specific issues @nuxt/module-builder. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

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

snakemastr508OP•3mo ago

@kapa.ai Thank you. Adding the prefix in the component did resolve the component. This does however prevents my prefix from being variable through options.

kapa.ai•3mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- You're correct—when you hardcode the prefix in your component usage (e.g., <MyFormQuestion />), it prevents the prefix from being dynamic or configurable via module options. This is a limitation of how Nuxt's auto-import and prefixing system works: the prefix is only applied at registration time in the consuming Nuxt app, not within your module's own source code. The knowledge sources confirm that: - The prefix is set when registering components with addComponentsDir in your module, and this affects how components are auto-imported in the consuming app components API. - Inside your module, you must use explicit imports or the exact component name as it will be registered, which means you cannot dynamically change the prefix in your module's own templates or code custom directories. There is no documented way in the official Nuxt sources to make the prefix variable within your module's own components. The prefix is only configurable for the consuming app, not for internal module usage. If you need the prefix to be dynamic within your module, the knowledge sources do not provide a solution for this scenario. You would need to use explicit imports or settle on a fixed prefix for your module's internal usage.

I'm sorry, but the knowledge sources do not describe a way to make the component prefix variable within your module's own components. The prefix is only configurable for the consuming app at registration time, not dynamically within the module itself components API custom directories.

---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

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

White Cat•2mo ago

It looks like you've set up addComponentsDir correctly for the consuming app, but you're running into the limitation that auto-imported components aren't available inside your module itself — this is expected. Auto-imports only apply to the consuming app, not the module's internal code. So inside your module, you need to use explicit imports like: import Question from './Question.vue' even if you use a prefix in the consuming app like <MyQuestion />. Prefixes are only applied at registration time for auto-imports — they don’t affect internal usage or file resolution. For recursive usage inside Question.vue (like <Question v-for="..." />), that should work automatically as long as: the component file is named Question.vue and you're using <Question /> in PascalCase. As for making the prefix dynamic inside your module, unfortunately Nuxt doesn't currently support that. There’s no way to access the registered prefix during build-time or use it dynamically in templates. If you want full flexibility, consider making components replaceable via provide/inject, or allow users to override specific components with a slot-based pattern or defineNuxtPlugin.

Gaming

Programming

Autoimport components in module

Did you find this page helpful?