arco-design-nuxt-module

Arco Design Nuxt Module

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

npx nuxi@latest module add arco-design-nuxt-module

[!NOTE] If you do not have @arco-design/web-vue installed, please install it first

pnpm install @arco-design/web-vue

• 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|lib)/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(index.less or css/arco.css)
   *
   * Recommended just directly import index.less or css/arco.css in your project and disable `importStyle` rather than using this option
   *
   * 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[]

  /**
   * import from es or lib
   *
   * @default 'es'
   *
   */
  importFrom: 'es' | 'lib'
}

That's it! You can now use Arco Design Nuxt Module in your Nuxt app ✨

Other

• Release Notes
• Demo
• Online playground

Credits

Thanks to:

• heavily inspired by element-plus-nuxt
• Arco Design
• Nuxt