Nuxt•3d ago

Importing components in app.config.ts

Hello! I am developing @norbiros/nuxt-auto-form. Based on a zod schema I can generate an @nuxt/ui form. Currently I have a system where in app.config.ts you can customize default components like this:

    components: {
      email: () => ({ component: "UInput", componentProps: { type: 'color' } }),
    },

    components: {
      email: () => ({ component: "UInput", componentProps: { type: 'color' } }),
    },

It only works for global components! It wasn't an issue when you could just create Input.global.vue, but when you want to use different NuxtUI component it doesn't work. I tried doing stuff like: - importing it from #components, but it doesn't work because we are in a normal ts file - importing it from '@nuxt/ui/components/Input.vue' - I get Expression expected (Note that you need plugins to import files that are not JavaScript) So how to solve it?

17 Replies

kapa.ai•3d ago

Hi @Norbiros. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- You cannot import Vue components directly in app.config.ts in Nuxt. This is a known limitation because app.config.ts is processed by Nitro, which does not support Vue component imports or auto-imports in that context. Attempting to import from #components or directly from a Vue file will not work and will result in errors. This is explicitly documented:

You cannot import Vue components directly in app.config.ts.<br> Some auto-imports are not available in the Nitro context.<br> These limitations occur because Nitro processes the app config without full Vue component support.

See: Known Limitations – app.config.ts While there are workarounds using Vite plugins in the Nitro config, this approach is not recommended and may lead to unexpected behavior and bugs. In summary:
There is currently no supported way to import or reference non-global Vue components in app.config.ts. You are limited to referencing global components by name (as strings), and cannot import or use component objects directly in this file. This is a technical limitation of how Nuxt and Nitro process the app config. If you need more dynamic or fine-grained component customization, you will need to move that logic out of app.config.ts and into a context where Vue components can be imported and used, such as a plugin or a regular Vue file. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3d ago

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

NorbirosOP•3d ago

@kapa.ai give me solutions to this problem, take into consideration stuff like DX

kapa.ai•3d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- This is a well-known limitation in Nuxt: you cannot import or use Vue components directly in app.config.ts because it is processed by Nitro, which does not support Vue component imports or auto-imports in that context. This means your current approach—referencing components by importing them or using non-global components—will not work in app.config.ts and is not supported by Nuxt as of v3.3. The only supported way is to reference global components by their string name, as you have already discovered. Attempting to import from #components or directly from a Vue file will result in errors, as documented in the official guide Known Limitations – app.config.ts. Given these constraints, here are the solutions available based on the knowledge sources: 1. Use Global Components Only Continue to use global components and reference them by their string name in app.config.ts. This is the only officially supported method for component references in this file. While this may not be ideal for DX (developer experience), it is the most stable and compatible approach. 2. Move Customization Logic Out of app.config.ts If you need more flexibility (such as using non-global or dynamically imported components), move your component customization logic out of app.config.ts and into a context where Vue components can be imported and used, such as a plugin or a regular Vue file. This allows you to leverage the full power of Vue's import system and Nuxt's auto-imports, improving DX. 3. Use the ui Prop or class Prop for Per-Component Customization For Nuxt UI components, you can use the ui prop or class prop to customize the appearance and behavior of components on a per-instance basis, which can help reduce the need for global overrides and improve DX Config – Nuxt UI Theme. 4. Avoid Workarounds with Vite Plugins in Nitro While it is technically possible to use Vite plugins in the Nitro config to try to work around this limitation, the documentation strongly advises against this due to the risk of unexpected behavior and bugs Known Limitations – app.config.ts. --- Summary:
There is no supported way to import or use non-global Vue components in app.config.ts. For the best developer experience, keep component references in app.config.ts limited to global components by name, and move any advanced logic to plugins or Vue files where imports are supported. This is a current technical limitation of Nuxt and Nitro, and there is no workaround documented in the official sources. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3d ago

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

NorbirosOP•3d ago

@kapa.ai But I am module author and I want to give proper solution to developers. Telling them hey use Vite Plugins doesnt sound like a good idea. Can I maybe expect strings here and try to auto import them by hand?

kapa.ai•3d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- You are correct—recommending Vite plugins for this use case is not a good idea, and the Nuxt documentation explicitly discourages it due to potential bugs and instability Known Limitations – app.config.ts. What you can do as a module author: - Expect strings in app.config.ts:
Yes, you can design your module so that users provide component names as strings in app.config.ts. This is the only supported way to reference components in this file. - Auto-import by hand in runtime/plugin code:
You can then, in your module/plugin code (where Vue imports are allowed), resolve these string names to actual component objects using Nuxt's auto-imported components or by importing from #components. For example, you could provide a composable or plugin that, given a string, resolves the component at runtime using resolveComponent or by importing from #components. This pattern is supported and aligns with Nuxt's recommendations for dynamic components Dynamic Components – Nuxt Components.

  // In your plugin or composable
  import { resolveComponent } from 'vue'

  export function getComponentByName(name: string) {
    return resolveComponent(name)
  }

  // In your plugin or composable
  import { resolveComponent } from 'vue'

  export function getComponentByName(name: string) {
    return resolveComponent(name)
  }

Then, in your form-rendering logic, you can use this helper to resolve the component name provided in the config. - Document this pattern for your users:
Make it clear in your documentation that users should provide component names as strings in app.config.ts, and your module will handle resolving and rendering the correct component at runtime. Summary:
You cannot import components directly in app.config.ts, but you can accept string names and resolve them to components at runtime in your module/plugin code. This is the recommended and supported approach in Nuxt, and it provides a good developer experience without relying on unsupported workarounds Known Limitations – app.config.ts Dynamic Components – Nuxt Components. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3d ago

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

NorbirosOP•3d ago

@kapa.ai But isn't resolveComponent statically verified? Maybe in app.config.ts I could provide path to the js module from which i can import a component in a vue component

kapa.ai•3d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- You are correct that resolveComponent in Nuxt/Vue is statically analyzed and expects a literal string, not a variable or a dynamic value. The documentation states:

If you are using resolveComponent to handle dynamic components, make sure not to insert anything but the name of the component, which must be a literal string and not be or contain a variable. The string is statically analyzed at the compilation step.

Dynamic Components – Nuxt Components Regarding your idea of providing a path to a JS module in app.config.ts and then importing the component in a Vue component:
The knowledge sources do not explicitly mention supporting this pattern. In fact, they highlight that you cannot import Vue components (or JS modules exporting components) directly in app.config.ts due to Nitro limitations. Attempting to import files that are not JavaScript (like .vue files) in a non-Vue context will result in errors, and even importing from #components is not supported in app.config.ts Known Limitations – app.config.ts. However, if you expect a string path in app.config.ts, you could, in theory, use that string in your runtime/plugin code to dynamically import the component using standard JavaScript dynamic imports (e.g., import(path)). But this approach is not documented or recommended in the official Nuxt sources, and there may be limitations or caveats, especially regarding Vite and Nitro's handling of dynamic imports and file resolution. In summary:
- resolveComponent expects a literal string and is statically analyzed. - You cannot import components or JS modules in app.config.ts. - The knowledge sources do not document or recommend providing a path to a JS module in app.config.ts for later dynamic import in Vue code. - The only officially supported and documented approach is to use global component names as strings in app.config.ts and resolve them at runtime in your Vue/plugin code. If you need more flexibility, you should move the configuration out of app.config.ts and into a context where dynamic imports are fully supported. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3d ago

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

NorbirosOP•3d ago

@kapa.ai move it outside app.config.ts and where?

kapa.ai•3d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- If you need to allow users to specify or import components dynamically (not just by global name), you should move this configuration out of app.config.ts and into a context where Vue component imports are supported. The knowledge sources do not specify a single "best" place, but based on Nuxt conventions, here are supported alternatives: 1. A Nuxt Plugin:
You can create a plugin in the plugins/ directory. Plugins run in a context where you can import Vue components, access runtime config, and perform other setup logic. This is a common place for advanced configuration or dynamic logic in Nuxt apps. 2. A Module Option:
If you are authoring a Nuxt module, you can expose options via the module itself (configured in nuxt.config.ts). These options are available at build time, and you can use them to register components, inject plugins, or alter runtime behavior. You can also expose options to runtime via runtimeConfig if needed Altering Nuxt Configuration. 3. A Custom Composable or Store:
For per-instance or per-page configuration, you can use a composable (in the composables/ directory) or a store (such as Pinia). This allows you to manage and import components dynamically as needed. Summary:
Move your dynamic component configuration to a Nuxt plugin, a module option (set in nuxt.config.ts), or a composable. These contexts support importing and resolving Vue components, unlike app.config.ts, which is limited by Nitro and cannot import components or JS modules Known Limitations – app.config.ts. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3d ago

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

NorbirosOP•3d ago

@kapa.ai I don't think that in nuxt.config.ts I can import .vue or from #imports. Maybe I can create a plugin where I modify the app config

kapa.ai•3d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- You are correct: you cannot import .vue files or use #imports in nuxt.config.ts. This file is processed in a Node.js context, not a Vue context, so Vue component imports are not supported there Known Limitations – app.config.ts. As for modifying the app config from a plugin:
Yes, you can update the app config at runtime from a plugin using the updateAppConfig utility. This allows you to programmatically change the app config during the app's lifecycle, and you can do this in a context where Vue component imports are supported. For example:

// plugins/auto-form.ts
import MyCustomInput from '~/components/MyCustomInput.vue'
import { updateAppConfig } from '#app'

export default defineNuxtPlugin(() => {
  updateAppConfig({
    components: {
      email: {
        component: MyCustomInput,
        componentProps: { type: 'color' }
      }
    }
  })
})

// plugins/auto-form.ts
import MyCustomInput from '~/components/MyCustomInput.vue'
import { updateAppConfig } from '#app'

export default defineNuxtPlugin(() => {
  updateAppConfig({
    components: {
      email: {
        component: MyCustomInput,
        componentProps: { type: 'color' }
      }
    }
  })
})

This approach allows you to import components and update the app config at runtime, which is not possible in app.config.ts itself app.config.ts usage and updateAppConfig. Summary:
- You cannot import .vue files in nuxt.config.ts or app.config.ts. - You can use a plugin to import components and update the app config at runtime using updateAppConfig. - This is the recommended way to handle dynamic or non-global component configuration in Nuxt. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3d ago

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

Gaming

Programming

Importing components in app.config.ts

Did you find this page helpful?