[bug] If use custom prefix some components will not be called.

[yeonjulee1005]

Environment

• Operating System: Darwin
• Node Version: v20.0.0
• Nuxt Version: 3.13.2
• CLI Version: 3.15.0
• Nitro Version: 2.10.0
• Package Manager: [email protected]
• Builder: -
• User Config: default
• Runtime Modules: @nuxt/[email protected], @nuxtjs/[email protected], @nuxt/[email protected], @nuxt/[email protected], @nuxt/[email protected], @nuxtjs/[email protected], @nuxtjs/[email protected], @nuxtjs/[email protected], @nuxtjs/[email protected], [email protected], @vueuse/[email protected], @pinia/[email protected], @pinia-plugin-persistedstate/[email protected], @stefanobartoletti/[email protected]
• Build Modules: -

Version

3.0.0-alpha.7

Reproduction

https://github.com/yeonjulee1005/ui/tree/bug/costum-prefix

Description

If use custom prefix
like:

U -> DD

---

nuxt.config.ts

ui: {
    prefix: 'DD'
  },

After that, when you run the project, an error like the one below appears in the terminal.

Since there seemed to be an issue with stackblitz not working,
I forked the nuxt/ui repository and uploaded reproduction to my repository.

Please check /playground/app.vue and /playground/index.vue and /playground/nuxt.config.ts

i want use my custom prefix 🥲
please check it! 🙏🏻

Additional context

[If Change Custom Prefix like XXXButton]
https://github.com/user-attachments/assets/ac8e222b-65a8-491d-ab24-de99ea3ca3de

[Dosen't change prefix like UButton]
https://github.com/user-attachments/assets/1067e80b-803f-4b74-9d94-18cc35fc7995

Logs

[Vue warn]: Failed to resolve component: UAvatar
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
  at <Button label="setti" id="radix-vue-dropdown-menu-trigger-v-0-0" type="button"  ... >
  at <PrimitiveSlot id="radix-vue-dropdown-menu-trigger-v-0-0" type="button" aria-haspopup="menu"  ... >
  at <Primitive id="radix-vue-dropdown-menu-trigger-v-0-0" type="button" as-child=true  ... >
  at <PrimitiveSlot >
  at <Primitive ref=fn<s> as=undefined as-child=true >
  at <PopperAnchor asChild=true element=undefined as=undefined >
  at <MenuAnchor as-child="" >
  at <DropdownMenuTrigger key=0 as-child="" disabled=false >
  at <PopperRoot>
  at <MenuRoot open=false onUpdate:open=fn dir="ltr"  ... >
  at <DropdownMenuRoot modal=true open=false onUpdate:open=fn >
  at <DropdownMenu open=false onUpdate:open=fn<onUpdate:open> items= [ [ { label: '설정', icon: 'i-lucide-settings-2', kbds: [Array], to: '/settings' },
    { label: '테마변경', icon: 'i-lucide-palette', children: [Array] } ],
  [ { label: '문의하기',
      icon: 'i-lucide-message-circle-more',
      kbds: [Array],
      to: '/settings/inquiry' },
    { label: '요금제 변경', icon: 'i-lucide-crown', kbds: [Array], to: '/settings/plan' } ],
  [ { label: '로그인', icon: 'i-lucide-log-in', kbds: [Array], to: '/login' } ] ]  ... >
  at <Header>
  at <Default ref=Ref< undefined > >
  at <LayoutLoader key="default" layoutProps= { ref:
   RefImpl {
     dep:
      Dep {
        computed: undefined,
        version: 0,
        activeLink: undefined,
        subs: undefined,
        map: undefined,
        key: undefined,
        sc: 0,
        subsHead: undefined },
     __v_isRef: true,
     __v_isShallow: false,
     _rawValue: undefined,
     _value: undefined } } name="default" >
  at <NuxtLayoutProvider layoutProps= { ref:
   RefImpl {
     dep:
      Dep {
        computed: undefined,
        version: 0,
        activeLink: undefined,
        subs: undefined,
        map: undefined,
        key: undefined,
        sc: 0,
        subsHead: undefined },
     __v_isRef: true,
     __v_isShallow: false,
     _rawValue: undefined,
     _value: undefined } } key="default" name="default"  ... >
  at <NuxtLayout>
  at <ToastProvider swipe-direction="right" duration=5000 >
  at <Toaster key=0 position="bottom-right" expand=true  ... >
  at <TooltipProvider>
  at <ConfigProvider use-id=fn<use-id> >
  at <App toaster= { position: 'bottom-right', expand: true, duration: 5000 } >
  at <App>
  at <NuxtRoot>


 WARN  [Vue warn]: Failed to resolve component: ULinkBase
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
  at <Link type="button" disabled=false class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]"  ... >
  at <Button label="setti" id="radix-vue-dropdown-menu-trigger-v-0-0" type="button"  ... >
  at <PrimitiveSlot id="radix-vue-dropdown-menu-trigger-v-0-0" type="button" aria-haspopup="menu"  ... >
  at <Primitive id="radix-vue-dropdown-menu-trigger-v-0-0" type="button" as-child=true  ... >
  at <PrimitiveSlot >
  at <Primitive ref=fn<s> as=undefined as-child=true >
  at <PopperAnchor asChild=true element=undefined as=undefined >
  at <MenuAnchor as-child="" >
  at <DropdownMenuTrigger key=0 as-child="" disabled=false >
  at <PopperRoot>
  at <MenuRoot open=false onUpdate:open=fn dir="ltr"  ... >
  at <DropdownMenuRoot modal=true open=false onUpdate:open=fn >
  at <DropdownMenu open=false onUpdate:open=fn<onUpdate:open> items= [ [ { label: '설정', icon: 'i-lucide-settings-2', kbds: [Array], to: '/settings' },
    { label: '테마변경', icon: 'i-lucide-palette', children: [Array] } ],
  [ { label: '문의하기',
      icon: 'i-lucide-message-circle-more',
      kbds: [Array],
      to: '/settings/inquiry' },
    { label: '요금제 변경', icon: 'i-lucide-crown', kbds: [Array], to: '/settings/plan' } ],
  [ { label: '로그인', icon: 'i-lucide-log-in', kbds: [Array], to: '/login' } ] ]  ... >
  at <Header>
  at <Default ref=Ref< undefined > >
  at <LayoutLoader key="default" layoutProps= { ref:
   RefImpl {
     dep:
      Dep {
        computed: undefined,
        version: 0,
        activeLink: undefined,
        subs: undefined,
        map: undefined,
        key: undefined,
        sc: 0,
        subsHead: undefined },
     __v_isRef: true,
     __v_isShallow: false,
     _rawValue: undefined,
     _value: undefined } } name="default" >
  at <NuxtLayoutProvider layoutProps= { ref:
   RefImpl {
     dep:
      Dep {
        computed: undefined,
        version: 0,
        activeLink: undefined,
        subs: undefined,
        map: undefined,
        key: undefined,
        sc: 0,
        subsHead: undefined },
     __v_isRef: true,
     __v_isShallow: false,
     _rawValue: undefined,
     _value: undefined } } key="default" name="default"  ... >
  at <NuxtLayout>
  at <ToastProvider swipe-direction="right" duration=5000 >
  at <Toaster key=0 position="bottom-right" expand=true  ... >
  at <TooltipProvider>
  at <ConfigProvider use-id=fn<use-id> >
  at <App toaster= { position: 'bottom-right', expand: true, duration: 5000 } >
  at <App>
  at <NuxtRoot>

[benjamincanac]

There was some imports missing indeed, thanks for the report! 😊