arco-design-nuxt-module
Nuxt Module for Arco Design Vue. Automatically import components, icons and more.
Nuxt Module for Arco Design Vue. Automatically import components, icons and more.
Features
- ✨ auto import components
- ✨ auto import icons
- ✨ auto import Message, Notification
- ✨ auto import hooks
- ✨ auto import locale hooks
- 🔹 support custom prefix above
Quick Setup
- Add
arco-design-nuxt-module
dependency to your project(@arco-design/web-vue
is required in your project)
# Using pnpmpnpm add -D arco-design-nuxt-module# Using yarnyarn add --dev arco-design-nuxt-module# Using npmnpm install --save-dev arco-design-nuxt-module
- Add
arco-design-nuxt-module
to themodules
section ofnuxt.config.ts
export default defineNuxtConfig({ modules: [ 'arco-design-nuxt-module' ]})
Options
If you need to customize the module, you can set arco
in nuxt.config.ts
Example
export default defineNuxtConfig({ arco: { importPrefix: 'A', hookPrefix: 'Arco', locales: ['getLocale'], localePrefix: 'Arco', },})
Full Type
interface Options { /** * A list of components that need to be automatically imported. * * @default * all component from '@arco-design/web-vue/' * * @example * ```ts * ['Button'] * ``` */ components: false | string[] /** * Prefix of the component name. * * @default 'A' */ componentPrefix: string /** * A list of icons component that need to be automatically imported. * * @default * all icons from '@arco-design/web-vue/es/icon' * * @example * ```ts * ['IconArrowDown'] * ``` */ icons: false | string[] /** * Prefix of the icon component name. * * @default '' */ iconPrefix: string /** * A map of components that the definition file of subComponent is in its parent component. * Normally, you don't need to set it. */ subComponents: Record<string, string[]> /** * A list of imports(with style auto import) that need to be automatically imported. * * @default * ```ts * ['Notification', 'Message'] * ``` */ imports: false | ('Notification' | 'Message')[] /** * Prefix of the import name. * * @default '' */ importPrefix: string /** * When you need to add automatically import locale function from Arco Design Vue, you can add it here. * * @default false * * @example * ```ts * ['useLocale', 'getLocale', 'addI18nMessages'] * ``` * */ locales: false | ('useLocale' | 'getLocale' | 'addI18nMessages')[] /** * Prefix of the locale name. * * @default '' * * @example * 'A' -> 'useALocale' */ localePrefix: string /** * When you need to add automatically import hooks from Arco Design Vue, you can add it here. * * @default * ```ts * ['useFormItem'] * ``` * */ hooks: false | ('useFormItem')[] /** * Prefix of the hook name. * * @default '' * * @example 'A' -> 'useAFormItem' */ hookPrefix: string /** * import style css or less with components * * @default 'css' * * Disable automatically import styles with `false` */ importStyle: 'css' | 'less' | boolean /** * use arco design theme. * * @default undefined * * @example '@arco-themes/vue-digitforce' * * It will full import the theme style file(theme.less or css/arco.css) * * for more detail about theme, see https://arco.design/docs/designlab/use-theme-package */ theme: string /** * A list of component names that have no styles, so resolving their styles file should be prevented * * @default * ```ts * ['ConfigProvider', 'Icon'] * ``` */ noStylesComponents: string[]}
That's it! You can now use Arco Design Nuxt Module in your Nuxt app ✨
Other
Credits
Thanks to:
- heavily inspired by element-plus-nuxt
- Arco Design
- Nuxt