arco-design-nuxt-module

arco-design-nuxt-module

Nuxt Module for Arco Design Vue. Automatically import components, icons and more.

npm versionnpm downloadsLicense

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

  1. 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
  1. Add arco-design-nuxt-module to the modules section of nuxt.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: