Multi word component names.

[bastiaan1321]

According to the official vue 3 docs, we should use multi word component names. I have to add a bunch of ignores to my eslinter to be able to use it in my build. Is there a reason shadcn-vue is not using multi word names?

docs:
https://vuejs.org/style-guide/rules-essential.html#use-multi-word-component-names

[sadeghbarati]

You can use unplugin-vue-components or Nuxt auto-import feature and add the prefix to the component in order to have multi-word name component

Sometimes it would be helpful if you break the eslint rules

BTW can you name those components?

[ysk3a]

hi,
any plans for adding a default prefix or an shadcn-vue's own unplugin-vue-components resolver like https://www.radix-vue.com/overview/installation.html#unplugin-vue-components that could be added soon?

For example, lets just say, i am using radix-vue and prime-vue which i could add something like

        PrimeVueResolver(
          {
            prefix: 'Prime'
          }
        ),
        RadixVueResolver(
          {
            prefix: 'Radix'
          }
        ),

but there doesn't seem to any option for shadcn-vue doc.

---

BTW can you name those components?

after a brief look at the doc, it seems to be all component that are only one word. for example popover and button are documented as one word and thus the component name ends up being <Popover>... where as multi word like navigation-menu has no problem showing up as <NavigationMenu>

[sadeghbarati]

I'll create a starter that explains how to use unplugin

[ysk3a]

I sincerely appreciate for your time and help. Thanks.
I look forward to the example.

[sadeghbarati]

After testing unplugin-vue-components‍, I realized that it is very different from @nuxt/kit

I also encountered this issue. unplugin-vue-components only watches for components we add, and then registers the global component types. However, @nuxt/kit automatically adds component types for auto-imports in development startup and watch the new changes.

unplugin/unplugin-vue-components#736

---

In shadcn-vue you guys can use components/ui folder and use this

Components({
  dts: 'src/components.d.ts',
  collapseSamePrefixes: true,
  directoryAsNamespace: true
}),

Dialog
DialogClose
DialogContent
...

will become

UiDialog
UiDialogClose
UiDialogContent
...