diff --git a/docs/content/overview/installation.md b/docs/content/overview/installation.md index 1646e145e..274c8f386 100644 --- a/docs/content/overview/installation.md +++ b/docs/content/overview/installation.md @@ -33,6 +33,8 @@ Radix Vue also has resolver for the popular [unplugin-vue-components](https://gi In `vite.config.ts`, import `radix-vue/resolver`, and configure as such and it will auto-imports all the components from Radix Vue. +You can also use it for [Namespaced components](../guides/namespaced-components.md). + ```ts{2,10 } import Component from 'unplugin-vue-components/vite' import RadixVueResolver from 'radix-vue/resolver' @@ -46,7 +48,8 @@ export default defineConfig({ RadixVueResolver() // RadixVueResolver({ - // prefix: '' // use the prefix option to add Prefix to the imported components + // prefix: '', // use the prefix option to add Prefix to the imported components + // namespaced: false // set to true if you want to use namespaced components // }) ], }), diff --git a/packages/plugins/src/resolver/index.ts b/packages/plugins/src/resolver/index.ts index 998b78041..a6856f886 100644 --- a/packages/plugins/src/resolver/index.ts +++ b/packages/plugins/src/resolver/index.ts @@ -1,5 +1,6 @@ import { type ComponentResolver } from 'unplugin-vue-components' import { components } from '../../../radix-vue/constant/components' +import * as NamespacedComponents from '../namespaced' export interface ResolverOptions { /** @@ -8,20 +9,30 @@ export interface ResolverOptions { * @defaultValue "" */ prefix?: string + /** + * Enable the use of namespaced components + * + * @defaultValue false + */ + namespaced?: boolean } export default function (options: ResolverOptions = {}): ComponentResolver { - const { prefix = '' } = options + const { prefix = '', namespaced = false } = options return { type: 'component', resolve: (name: string) => { if (name.toLowerCase().startsWith(prefix.toLowerCase())) { - const componentName = name.substring(prefix.length) - if (Object.values(components).flat().includes(componentName)) { + const componentName = name.split('.')[0] + const importName = componentName.substring(prefix.length) + const isNamespacedComponent = Object.keys(NamespacedComponents).includes(importName) + const isComponent = Object.values(components).flat().includes(importName) + if (isNamespacedComponent || isComponent) { return { - name: componentName, - from: 'radix-vue', + name: importName, + as: componentName, + from: isNamespacedComponent && namespaced ? 'radix-vue/namespaced' : 'radix-vue', } } }