fix(Link): missing relative import

[yeonjulee1005]

🔗 Linked issue

#2515 #2471 1a93d13

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

The bug that occurred when modifying Custom Prefix that I previously reported (#2515) still issue occur in alpha.8 version, so it has been corrected.

import ULinkBase from './LinkBase.vue' was missing at ULink.

Please refer to the video for more details.

The video records bugs that appear when converting prefix to DB and normal operation when importing import ULinkBase from './LinkBase.vue' information.

2024-11-10.11.39.46.mov

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

Logs

[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 <DBLink ref_for=true active=undefined activeClass=undefined  ... >
  at <Primitive as-child=false as="li" data-menu-item=""  ... >
  at <NavigationMenuItem key="list-0-40" as="li" value="40"  ... >
  at <Primitive class="isolate min-w-0 flex items-center" as-child=false as="ul"  ... >
  at <Primitive ref=fn<s> style= { position: 'relative' } >
  at <NavigationMenuList class="isolate min-w-0 flex items-center" >
  at <Primitive ref=fn<s> aria-label="Main" as="nav"  ... >
  at <NavigationMenuRoot orientation="horizontal" delayDuration=0 onUpdate:modelValue=fn  ... >
  at <DBNavigationMenu items= [ { label: 'Accordion', to: '/components/accordion' },
  { label: 'Alert', to: '/components/alert' },
  { label: 'Avatar', to: '/components/avatar' },
  { label: 'Badge', to: '/components/badge' },
  { label: 'Breadcrumb', to: '/components/breadcrumb' },
  { label: 'Button', to: '/components/button' },
  { label: 'ButtonGroup', to: '/components/button-group' },
  { label: 'Card', to: '/components/card' },
  { label: 'Carousel', to: '/components/carousel' },
  { label: 'Checkbox', to: '/components/checkbox' },
  { label: 'Chip', to: '/components/chip' },
  { label: 'Collapsible', to: '/components/collapsible' },
  { label: 'ContextMenu', to: '/components/context-menu' },
  { label: 'CommandPalette', to: '/components/command-palette' },
  { label: 'Drawer', to: '/components/drawer' },
  { label: 'DropdownMenu', to: '/components/dropdown-menu' },
  { label: 'Form', to: '/components/form' },
  { label: 'FormField', to: '/components/form-field' },
  { label: 'Input', to: '/components/input' },
  { label: 'InputMenu', to: '/components/input-menu' },
  { label: 'Kbd', to: '/components/kbd' },
  { label: 'Link', to: '/components/link' },
  { label: 'Modal', to: '/components/modal' },
  { label: 'NavigationMenu', to: '/components/navigation-menu' },
  { label: 'Pagination', to: '/components/pagination' },
  { label: 'Popover', to: '/components/popover' },
  { label: 'Progress', to: '/components/progress' },
  { label: 'RadioGroup', to: '/components/radio-group' },
  { label: 'Select', to: '/components/select' },
  { label: 'SelectMenu', to: '/components/select-menu' },
  { label: 'Separator', to: '/components/separator' },
  { label: 'Shortcuts', to: '/components/shortcuts' },
  { label: 'Skeleton', to: '/components/skeleton' },
  { label: 'Slideover', to: '/components/slideover' },
  { label: 'Slider', to: '/components/slider' },
  { label: 'Switch', to: '/components/switch' },
  { label: 'Tabs', to: '/components/tabs' },
  { label: 'Table', to: '/components/table' },
  { label: 'Textarea', to: '/components/textarea' },
  { label: 'Toast', to: '/components/toast' },
  { label: 'Tooltip', to: '/components/tooltip' } ] orientation="horizontal" class="lg:hidden border-b border-[var(--ui-border)] overflow-x-auto" >
  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>

[yeonjulee1005]

additionally,
also I find issue at src/runtime/components/DropdownMenu.vue , and
src/runtime/components/ContextMenuContent.vue

Please check the log history below. 🙏🏻

log

[Vue warn]: Failed to resolve component: UDropdownMenuContent
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
  at <DBDropdownMenuContent class="bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] min-w-48" ui= { base: [Function (anonymous)],
  content: [Function (anonymous)],
  arrow: [Function (anonymous)],
  group: [Function (anonymous)],
  label: [Function (anonymous)],
  separator: [Function (anonymous)],
  item: [Function (anonymous)],
  itemLeadingIcon: [Function (anonymous)],
  itemLeadingAvatar: [Function (anonymous)],
  itemLeadingAvatarSize: [Function (anonymous)],
  itemTrailing: [Function (anonymous)],
  itemTrailingIcon: [Function (anonymous)],
  itemTrailingKbds: [Function (anonymous)],
  itemTrailingKbdsSize: [Function (anonymous)],
  itemLabel: [Function (anonymous)],
  itemLabelExternalIcon: [Function (anonymous)] } ui-override=undefined  ... >
  at <PopperRoot>
  at <MenuRoot open=false onUpdate:open=fn dir="ltr"  ... >
  at <DropdownMenuRoot modal=true onUpdate:open=fn >
  at <DBDropdownMenu items= [ { color: 'primary', icon: 'i-lucide-swatch-book', label: 'primary' },
  { color: 'secondary', icon: 'i-lucide-swatch-book', label: 'secondary' },
  { color: 'success', icon: 'i-lucide-swatch-book', label: 'success' },
  { color: 'info', icon: 'i-lucide-swatch-book', label: 'info' },
  { color: 'warning', icon: 'i-lucide-swatch-book', label: 'warning' },
  { color: 'error', icon: 'i-lucide-swatch-book', label: 'error' },
  { color: 'neutral', icon: 'i-lucide-swatch-book', label: 'neutral' } ] size="md" arrow=""  ... >
  at <DropdownMenu onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > >
  at <Anonymous key="/components/dropdown-menu" vnode= { __v_isVNode: true,
  __v_skip: true,
  type:
   { __name: 'dropdown-menu',
     setup: [Function (anonymous)],
     ssrRender: [Function: _sfc_ssrRender],
     __file:
      '/Users/dewdew/Documents/Development/nuxt-contributing/ui/playground/app/pages/components/dropdown-menu.vue' },
  props:
   { onVnodeUnmounted: [Function: onVnodeUnmounted],
     ref:
      RefImpl {
        dep: [Dep],
        __v_isRef: true,
        __v_isShallow: false,
        _rawValue: undefined,
        _value: undefined } },
  key: null,
  ref:
   { i:
      { uid: 2812,
        vnode: [Object],
        type: [Object],
        parent: [Object],
        appContext: [Object],
        root: [Object],
        next: null,
        subTree: [Object],
        effect: null,
        update: null,
        job: null,
        scope: [EffectScope],
        render: [Function (anonymous)],
        proxy: [Object],
        exposed: null,
        exposeProxy: null,
        withProxy: null,
        provides: [Object <Complex prototype>],
        ids: [Array],
        accessCache: [Object: null prototype] {},
        renderCache: [],
        components: null,
        directives: null,
        propsOptions: [Array],
        emitsOptions: null,
        emit: [Function: bound emit],
        emitted: null,
        propsDefaults: [Object: null prototype] {},
        inheritAttrs: false,
        ctx: [Object],
        data: {},
        props: [Object],
        attrs: {},
        slots: [Object],
        refs: {},
        setupState: {},
        setupContext: [Object],
        suspense: null,
        suspenseId: 0,
        asyncDep: null,
        asyncResolved: false,
        isMounted: false,
        isUnmounted: false,
        isDeactivated: false,
        bc: null,
        c: null,
        bm: null,
        m: null,
        bu: null,
        u: null,
        um: null,
        bum: null,
        da: null,
        a: null,
        rtg: null,
        rtc: null,
        ec: null,
        sp: null },
     r:
      RefImpl {
        dep: [Dep],
        __v_isRef: true,
        __v_isShallow: false,
        _rawValue: undefined,
        _value: undefined },
     k: undefined,
     f: false },
  scopeId: null,
  slotScopeIds: null,
  children: null,
  component: null,
  suspense: null,
  ssContent: null,
  ssFallback: null,
  dirs: null,
  transition: null,
  el: null,
  anchor: null,
  target: null,
  targetStart: null,
  targetAnchor: null,
  staticCount: 0,
  shapeFlag: 4,
  patchFlag: 0,
  dynamicProps: null,
  dynamicChildren: null,
  appContext: null,
  ctx:
   <ref *1> {
     uid: 2812,
     vnode:
      { __v_isVNode: true,
        __v_skip: true,
        type: [Object],
        props: [Object],
        key: null,
        ref: null,
        scopeId: null,
        slotScopeIds: null,
        children: [Object],
        component: [Circular *1],
        suspense: null,
        ssContent: null,
        ssFallback: null,
        dirs: null,
        transition: null,
        el: null,
        anchor: null,
        target: null,
        targetStart: null,
        targetAnchor: null,
        staticCount: 0,
        shapeFlag: 36,
        patchFlag: 0,
        dynamicProps: null,
        dynamicChildren: null,
        appContext: null,
        ctx: [Object] },
     type:
      { name: 'RouterView',
        inheritAttrs: false,
        props: [Object],
        compatConfig: [Object],
        setup: [Function: setup] },
     parent:
      { uid: 2811,
        vnode: [Object],
        type: [Object],
        parent: [Object],
        appContext: [Object],
        root: [Object],
        next: null,
        subTree: [Object],
        effect: null,
        update: null,
        job: null,
        scope: [EffectScope],
        render: [Function (anonymous)],
        proxy: [Object],
        exposed: [Object],
        exposeProxy: null,
        withProxy: null,
        provides: [Object <Complex prototype>],
        ids: [Array],
        accessCache: [Object: null prototype] {},
        renderCache: [],
        components: null,
        directives: null,
        propsOptions: [Array],
        emitsOptions: null,
        emit: [Function: bound emit],
        emitted: null,
        propsDefaults: [Object: null prototype] {},
        inheritAttrs: false,
        ctx: [Object],
        data: {},
        props: [Object],
        attrs: {},
        slots: {},
        refs: {},
        setupState: {},
        setupContext: [Object],
        suspense: null,
        suspenseId: 0,
        asyncDep: null,
        asyncResolved: false,
        isMounted: false,
        isUnmounted: false,
        isDeactivated: false,
        bc: null,
        c: null,
        bm: null,
        m: null,
        bu: null,
        u: null,
        um: null,
        bum: null,
        da: null,
        a: null,
        rtg: null,
        rtc: null,
        ec: null,
        sp: null },
     appContext:
      { app: [Object],
        config: [Object],
        mixins: [],
        components: [Object],
        directives: {},
        provides: [Object: null prototype],
        optionsCache: [WeakMap],
        propsCache: [WeakMap],
        emitsCache: [WeakMap] },
     root:
      <ref *2> {
        uid: 1886,
        vnode: [Object],
        type: [Object],
        parent: null,
        appContext: [Object],
        root: [Circular *2],
        next: null,
        subTree: null,
        effect: null,
        update: null,
        job: null,
        scope: [EffectScope],
        render: [Function: NOOP],
        proxy: {},
        exposed: {},
        exposeProxy: null,
        withProxy: null,
        provides: [Object <Complex prototype>],
        ids: [Array],
        accessCache: [Object: null prototype] {},
        renderCache: [],
        components: null,
        directives: null,
        propsOptions: [],
        emitsOptions: null,
        emit: [Function: bound emit],
        emitted: null,
        propsDefaults: [Object: null prototype] {},
        inheritAttrs: undefined,
        ctx: {},
        data: {},
        props: {},
        attrs: {},
        slots: {},
        refs: {},
        setupState: [Object],
        setupContext: [Object],
        suspense: null,
        suspenseId: 0,
        asyncDep: null,
        asyncResolved: false,
        isMounted: false,
        isUnmounted: false,
        isDeactivated: false,
        bc: null,
        c: null,
        bm: null,
        m: null,
        bu: null,
        u: null,
        um: null,
        bum: null,
        da: null,
        a: null,
        rtg: null,
        rtc: null,
        ec: [Array],
        sp: null,
        devtoolsRawSetupState: [Object] },
     next: null,
     subTree:
      { __v_isVNode: true,
        __v_skip: true,
        type: [Object],
        props: [Object],
        key: null,
        ref: null,
        scopeId: null,
        slotScopeIds: null,
        children: [Object],
        component: null,
        suspense: null,
        ssContent: [Object],
        ssFallback: [Object],
        dirs: null,
        transition: null,
        el: null,
        anchor: null,
        target: null,
        targetStart: null,
        targetAnchor: null,
        staticCount: 0,
        shapeFlag: 160,
        patchFlag: 0,
        dynamicProps: null,
        dynamicChildren: null,
        appContext: null,
        ctx: [Object] },
     effect: null,
     update: null,
     job: null,
     scope:
      EffectScope {
        detached: true,
        _active: true,
        effects: [],
        cleanups: [],
        _isPaused: false,
        parent: undefined },
     render: [Function (anonymous)],
     proxy: { name: [Getter/Setter], route: [Getter/Setter] },
     exposed: null,
     exposeProxy: null,
     withProxy: null,
     provides:
      Object <Object <Complex prototype>> {
        [Symbol(router view depth)]: [ComputedRefImpl],
        [Symbol(router view location matched)]: [ComputedRefImpl],
        [Symbol(router view location)]: [ComputedRefImpl] },
     ids: [ '', 4, 3 ],
     accessCache: [Object: null prototype] {},
     renderCache: [],
     components: null,
     directives: null,
     propsOptions: [ [Object], [Array] ],
     emitsOptions: null,
     emit: [Function: bound emit],
     emitted: null,
     propsDefaults: [Object: null prototype] {},
     inheritAttrs: false,
     ctx: { name: [Getter/Setter], route: [Getter/Setter] },
     data: {},
     props: { route: undefined, name: 'default' },
     attrs: {},
     slots: { default: [Function] },
     refs: {},
     setupState: {},
     setupContext: { attrs: [Getter], slots: [Getter], emit: [Getter], expose: [Function: expose] },
     suspense: null,
     suspenseId: 0,
     asyncDep: null,
     asyncResolved: false,
     isMounted: false,
     isUnmounted: false,
     isDeactivated: false,
     bc: null,
     c: null,
     bm: null,
     m: null,
     bu: null,
     u: null,
     um: null,
     bum: null,
     da: null,
     a: null,
     rtg: null,
     rtc: null,
     ec: null,
     sp: null } } route= { fullPath: '/components/dropdown-menu',
  hash: '',
  query: {},
  name: 'components-dropdown-menu',
  path: '/components/dropdown-menu',
  params: {},
  matched:
   [ { path: '/components/dropdown-menu',
       redirect: undefined,
       name: 'components-dropdown-menu',
       meta: {},
       aliasOf: undefined,
       beforeEnter: undefined,
       props: [Object],
       children: [],
       instances: {},
       leaveGuards: Set(0) {},
       updateGuards: Set(0) {},
       enterCallbacks: {},
       components: [Object] } ],
  meta: {},
  redirectedFrom: undefined,
  href: '/components/dropdown-menu' }  ... >
  at <RouterView name=undefined route=undefined >
  at <NuxtPage>
  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>

log

[Vue warn]: Failed to resolve component: UContextMenuContent
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
  at <DBContextMenuContent class="bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] min-w-48" ui= { base: [Function (anonymous)],
  content: [Function (anonymous)],
  group: [Function (anonymous)],
  label: [Function (anonymous)],
  separator: [Function (anonymous)],
  item: [Function (anonymous)],
  itemLeadingIcon: [Function (anonymous)],
  itemLeadingAvatar: [Function (anonymous)],
  itemLeadingAvatarSize: [Function (anonymous)],
  itemTrailing: [Function (anonymous)],
  itemTrailingIcon: [Function (anonymous)],
  itemTrailingKbds: [Function (anonymous)],
  itemTrailingKbdsSize: [Function (anonymous)],
  itemLabel: [Function (anonymous)],
  itemLabelExternalIcon: [Function (anonymous)] } ui-override=undefined  ... >
  at <PopperRoot>
  at <MenuRoot open=false onUpdate:open=fn dir="ltr"  ... >
  at <ContextMenuRoot modal=true onUpdate:open=fn >
  at <DBContextMenu items= [ { color: 'primary', icon: 'i-lucide-swatch-book', label: 'primary' },
  { color: 'secondary', icon: 'i-lucide-swatch-book', label: 'secondary' },
  { color: 'success', icon: 'i-lucide-swatch-book', label: 'success' },
  { color: 'info', icon: 'i-lucide-swatch-book', label: 'info' },
  { color: 'warning', icon: 'i-lucide-swatch-book', label: 'warning' },
  { color: 'error', icon: 'i-lucide-swatch-book', label: 'error' },
  { color: 'neutral', icon: 'i-lucide-swatch-book', label: 'neutral' } ] class="min-w-48" size="md" >
  at <ContextMenu onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > >
  at <Anonymous key="/components/context-menu" vnode= { __v_isVNode: true,
  __v_skip: true,
  type:
   { __name: 'context-menu',
     setup: [Function (anonymous)],
     ssrRender: [Function: _sfc_ssrRender],
     __file:
      '/Users/dewdew/Documents/Development/nuxt-contributing/ui/playground/app/pages/components/context-menu.vue' },
  props:
   { onVnodeUnmounted: [Function: onVnodeUnmounted],
     ref:
      RefImpl {
        dep: [Dep],
        __v_isRef: true,
        __v_isShallow: false,
        _rawValue: undefined,
        _value: undefined } },
  key: null,
  ref:
   { i:
      { uid: 2936,
        vnode: [Object],
        type: [Object],
        parent: [Object],
        appContext: [Object],
        root: [Object],
        next: null,
        subTree: [Object],
        effect: null,
        update: null,
        job: null,
        scope: [EffectScope],
        render: [Function (anonymous)],
        proxy: [Object],
        exposed: null,
        exposeProxy: null,
        withProxy: null,
        provides: [Object <Complex prototype>],
        ids: [Array],
        accessCache: [Object: null prototype] {},
        renderCache: [],
        components: null,
        directives: null,
        propsOptions: [Array],
        emitsOptions: null,
        emit: [Function: bound emit],
        emitted: null,
        propsDefaults: [Object: null prototype] {},
        inheritAttrs: false,
        ctx: [Object],
        data: {},
        props: [Object],
        attrs: {},
        slots: [Object],
        refs: {},
        setupState: {},
        setupContext: [Object],
        suspense: null,
        suspenseId: 0,
        asyncDep: null,
        asyncResolved: false,
        isMounted: false,
        isUnmounted: false,
        isDeactivated: false,
        bc: null,
        c: null,
        bm: null,
        m: null,
        bu: null,
        u: null,
        um: null,
        bum: null,
        da: null,
        a: null,
        rtg: null,
        rtc: null,
        ec: null,
        sp: null },
     r:
      RefImpl {
        dep: [Dep],
        __v_isRef: true,
        __v_isShallow: false,
        _rawValue: undefined,
        _value: undefined },
     k: undefined,
     f: false },
  scopeId: null,
  slotScopeIds: null,
  children: null,
  component: null,
  suspense: null,
  ssContent: null,
  ssFallback: null,
  dirs: null,
  transition: null,
  el: null,
  anchor: null,
  target: null,
  targetStart: null,
  targetAnchor: null,
  staticCount: 0,
  shapeFlag: 4,
  patchFlag: 0,
  dynamicProps: null,
  dynamicChildren: null,
  appContext: null,
  ctx:
   <ref *1> {
     uid: 2936,
     vnode:
      { __v_isVNode: true,
        __v_skip: true,
        type: [Object],
        props: [Object],
        key: null,
        ref: null,
        scopeId: null,
        slotScopeIds: null,
        children: [Object],
        component: [Circular *1],
        suspense: null,
        ssContent: null,
        ssFallback: null,
        dirs: null,
        transition: null,
        el: null,
        anchor: null,
        target: null,
        targetStart: null,
        targetAnchor: null,
        staticCount: 0,
        shapeFlag: 36,
        patchFlag: 0,
        dynamicProps: null,
        dynamicChildren: null,
        appContext: null,
        ctx: [Object] },
     type:
      { name: 'RouterView',
        inheritAttrs: false,
        props: [Object],
        compatConfig: [Object],
        setup: [Function: setup] },
     parent:
      { uid: 2935,
        vnode: [Object],
        type: [Object],
        parent: [Object],
        appContext: [Object],
        root: [Object],
        next: null,
        subTree: [Object],
        effect: null,
        update: null,
        job: null,
        scope: [EffectScope],
        render: [Function (anonymous)],
        proxy: [Object],
        exposed: [Object],
        exposeProxy: null,
        withProxy: null,
        provides: [Object <Complex prototype>],
        ids: [Array],
        accessCache: [Object: null prototype] {},
        renderCache: [],
        components: null,
        directives: null,
        propsOptions: [Array],
        emitsOptions: null,
        emit: [Function: bound emit],
        emitted: null,
        propsDefaults: [Object: null prototype] {},
        inheritAttrs: false,
        ctx: [Object],
        data: {},
        props: [Object],
        attrs: {},
        slots: {},
        refs: {},
        setupState: {},
        setupContext: [Object],
        suspense: null,
        suspenseId: 0,
        asyncDep: null,
        asyncResolved: false,
        isMounted: false,
        isUnmounted: false,
        isDeactivated: false,
        bc: null,
        c: null,
        bm: null,
        m: null,
        bu: null,
        u: null,
        um: null,
        bum: null,
        da: null,
        a: null,
        rtg: null,
        rtc: null,
        ec: null,
        sp: null },
     appContext:
      { app: [Object],
        config: [Object],
        mixins: [],
        components: [Object],
        directives: {},
        provides: [Object: null prototype],
        optionsCache: [WeakMap],
        propsCache: [WeakMap],
        emitsCache: [WeakMap] },
     root:
      <ref *2> {
        uid: 2010,
        vnode: [Object],
        type: [Object],
        parent: null,
        appContext: [Object],
        root: [Circular *2],
        next: null,
        subTree: null,
        effect: null,
        update: null,
        job: null,
        scope: [EffectScope],
        render: [Function: NOOP],
        proxy: {},
        exposed: {},
        exposeProxy: null,
        withProxy: null,
        provides: [Object <Complex prototype>],
        ids: [Array],
        accessCache: [Object: null prototype] {},
        renderCache: [],
        components: null,
        directives: null,
        propsOptions: [],
        emitsOptions: null,
        emit: [Function: bound emit],
        emitted: null,
        propsDefaults: [Object: null prototype] {},
        inheritAttrs: undefined,
        ctx: {},
        data: {},
        props: {},
        attrs: {},
        slots: {},
        refs: {},
        setupState: [Object],
        setupContext: [Object],
        suspense: null,
        suspenseId: 0,
        asyncDep: null,
        asyncResolved: false,
        isMounted: false,
        isUnmounted: false,
        isDeactivated: false,
        bc: null,
        c: null,
        bm: null,
        m: null,
        bu: null,
        u: null,
        um: null,
        bum: null,
        da: null,
        a: null,
        rtg: null,
        rtc: null,
        ec: [Array],
        sp: null,
        devtoolsRawSetupState: [Object] },
     next: null,
     subTree:
      { __v_isVNode: true,
        __v_skip: true,
        type: [Object],
        props: [Object],
        key: null,
        ref: null,
        scopeId: null,
        slotScopeIds: null,
        children: [Object],
        component: null,
        suspense: null,
        ssContent: [Object],
        ssFallback: [Object],
        dirs: null,
        transition: null,
        el: null,
        anchor: null,
        target: null,
        targetStart: null,
        targetAnchor: null,
        staticCount: 0,
        shapeFlag: 160,
        patchFlag: 0,
        dynamicProps: null,
        dynamicChildren: null,
        appContext: null,
        ctx: [Object] },
     effect: null,
     update: null,
     job: null,
     scope:
      EffectScope {
        detached: true,
        _active: true,
        effects: [],
        cleanups: [],
        _isPaused: false,
        parent: undefined },
     render: [Function (anonymous)],
     proxy: { name: [Getter/Setter], route: [Getter/Setter] },
     exposed: null,
     exposeProxy: null,
     withProxy: null,
     provides:
      Object <Object <Complex prototype>> {
        [Symbol(router view depth)]: [ComputedRefImpl],
        [Symbol(router view location matched)]: [ComputedRefImpl],
        [Symbol(router view location)]: [ComputedRefImpl] },
     ids: [ '', 3, 1 ],
     accessCache: [Object: null prototype] {},
     renderCache: [],
     components: null,
     directives: null,
     propsOptions: [ [Object], [Array] ],
     emitsOptions: null,
     emit: [Function: bound emit],
     emitted: null,
     propsDefaults: [Object: null prototype] {},
     inheritAttrs: false,
     ctx: { name: [Getter/Setter], route: [Getter/Setter] },
     data: {},
     props: { route: undefined, name: 'default' },
     attrs: {},
     slots: { default: [Function] },
     refs: {},
     setupState: {},
     setupContext: { attrs: [Getter], slots: [Getter], emit: [Getter], expose: [Function: expose] },
     suspense: null,
     suspenseId: 0,
     asyncDep: null,
     asyncResolved: false,
     isMounted: false,
     isUnmounted: false,
     isDeactivated: false,
     bc: null,
     c: null,
     bm: null,
     m: null,
     bu: null,
     u: null,
     um: null,
     bum: null,
     da: null,
     a: null,
     rtg: null,
     rtc: null,
     ec: null,
     sp: null } } route= { fullPath: '/components/context-menu',
  hash: '',
  query: {},
  name: 'components-context-menu',
  path: '/components/context-menu',
  params: {},
  matched:
   [ { path: '/components/context-menu',
       redirect: undefined,
       name: 'components-context-menu',
       meta: {},
       aliasOf: undefined,
       beforeEnter: undefined,
       props: [Object],
       children: [],
       instances: {},
       leaveGuards: Set(0) {},
       updateGuards: Set(0) {},
       enterCallbacks: {},
       components: [Object] } ],
  meta: {},
  redirectedFrom: undefined,
  href: '/components/context-menu' }  ... >
  at <RouterView name=undefined route=undefined >
  at <NuxtPage>
  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>

It's occur in src/runtime/components/DropdownMenuContent.vue at line108 ~ 127.
It's occur in src/runtime/components/ContextMenuContent.vue at line102 ~ 118.

I want fix it. but I have no idea 🥲

However, if hide both components's code, the problem shown in the log mentioned above is resolved.😇

I guess Use the change prefix option is most important feature in this module.

[pkg-pr-new]

pnpm add https://pkg.pr.new/@nuxt/ui@2588

commit: af720f6

[benjamincanac]

Thanks! I've fixed the ContextMenu and DropdownMenu imports in 47f58f5..

[yeonjulee1005]

@benjamincanac
Thank you for solving the issue I couldn't solve it!
I checked src/runtime/components/DropdownMenu.vue, and
src/runtime/components/ContextMenuContent.vue issue clear!! ✨