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
...

[MihaLike]

So the solution is? It would be great if shadcn added "prefix" settings for components.

[sadeghbarati]

If you using Nuxt you can use shadcn-nuxt which has prefix option

If you using in Vue projects (not Nuxt) use unplugin-vue-components‍ like I explained above

[MihaLike]

May be i didnt get something, but -
unplugin-vue-components‍ is adding feature that we can not write smth like import { Button } from './ui' in <script setup>, but use Button component "globally" without import.
But the problem is when we do npx shadcn-vue@latest add button we get the
ui/button folder with Button.vue file inside.
And the cool thing is to add prefix for e.x. "App" and get
app-button folder with AppButton.vue inside.
And for now even with unplugin-vue-components‍ we must set in linter settings 'vue/multi-word-component-names': 'off', for all project, because we will have an error in Button.vue file.
If i didnt get your solution, pls advice how to manage it.

[sadeghbarati]

https://stackblitz.com/edit/vitejs-vite-rwlvdb8u

Components that are added from shadcn-vue registry are always have simple naming like Button not UiButton or AppButton
The CLI yet doesn't have this feature to create the components with prefix

I configured the unplugin-vue-components in the Stackblitz it's minimal example just for testing unplugin
And I faced exact same issue we had in Nuxt, I created an issue in unplugin-vue-components you can follow it unplugin/unplugin-vue-components#884

---

and for the that eslint rule you need to turn it off