Nuxt•7mo ago•

26 replies

Importing components in app.config.ts

Hello! I am developing

@norbiros/nuxt-auto-form

@norbiros/nuxt-auto-form

. Based on a zod schema I can generate an

@nuxt/ui

@nuxt/ui

form.

Currently I have a system where in

app.config.ts

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

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

#components

, but it doesn't work because we are in a normal ts file
- importing it from

'@nuxt/ui/components/Input.vue'

'@nuxt/ui/components/Input.vue'

I get  Expression expected (Note that you need plugins to import files that are not JavaScript)

I get  Expression expected (Note that you need plugins to import files that are not JavaScript)

So how to solve it?