Failed to resolve component in Vue Template

[rpiechowicz]

Environment

---

• Operating System: Darwin
• Node Version: v22.13.1
• Nuxt Version: -
• CLI Version: 3.21.1
• Nitro Version: -
• Package Manager: npm@10.9.2
• Builder: -
• User Config: -
• Runtime Modules: -
• Build Modules: -

---

Is this bug related to Nuxt or Vue?

Vue

Version

3.0.0-alpha.12

Reproduction

https://codesandbox.io/p/devbox/purple-water-45l2vr

Description

In the Vue application when using the example of how to use the Table component, errors appear with [Vue warn]: Failed to resolve component: by which the code cannot be compiled correctly.

The exact issue here is for example: const UButton = resolveComponent('UButton')

In the reproduction link is the described issue for clear

Additional context

No response

Logs

[vitalijalbu]

I have the same issue to render badges or buttons inside the table (columns are separated in a new file, but also in same file doesn't work).
any overrites??
please is too urgent

[vitalijalbu]

    {
        accessorKey: 'status',
        header: t('pages.users.fields.email'),
        cell: ({ row }) => {
          return h('span', {
            class: 'inline-flex items-center text-xs px-2 py-1 gap-1 bg-(--ui-primary) text-(--ui-bg) font-bold rounded-full'
          }, 'demo')
        }
      },      
    {
        accessorKey: 'status',
        header: t('pages.users.fields.email'),
        cell: ({ row }) => {
          return h(UBadge, {}, 'demo') 
        }
    },   

[n0ar3]

@vitalijalbu could you try to import the components manually just for the workaround before the team fix the issue?

[HugoRCD]

@vitalijalbu So I've started to look at your problem a bit, and indeed we're going to have to find a way to manage the auto-import of components in the event that they're used in a table, as you've done.

Don't use Vue's resolveComponent because it won't find them; it's up to the UI plugin and unplugin's autoImports to do this. However, it only works at the moment if the components are in the template, so as @imamnf said, for the moment you'll have to import the components yourself manually. 😬

[n0ar3]

Note: some of the component's types wouldn't work with hyperscript(h) like UDropdownMenu as mentioned in this issue #2968. I don't know how to implement the workaround that has been provided in the issue since(maybe) the solution only works for nuxt

[vitalijalbu]

I've already solved it guys, basically I created an external component and then imported it:
https://github.com/vitalijalbu/nuxt-ui-starter/blob/63759907c0e17ea6d08dc73897419bf4a927968b/src/columns/user.ts#L8

see Ebadge and EDropdown (e stands for external)

[HugoRCD]

It's good that you've managed to correct your problem, but it would be nice for DX not to have to do a workaround when used in a table. Then we'll see if it's possible 🤔