Arco Design Nuxt Module

Arco Design VueのためのNuxtモジュール。コンポーネント、アイコンなどを自動的にインポートします。

機能

✨ コンポーネントの自動インポート
✨ アイコンの自動インポート
✨ Message、Notificationの自動インポート
✨フックの自動インポート
✨ロケールフックの自動インポート
🔹 カスタムプレフィックスをサポート

クイックセットアップ

プロジェクトに`arco-design-nuxt-module`依存関係を追加します（プロジェクトに`@arco-design/web-vue`が必要です）

# Using pnpm
pnpm add -D arco-design-nuxt-module

# Using yarn
yarn add --dev arco-design-nuxt-module

# Using npm
npm install --save-dev arco-design-nuxt-module

`nuxt.config.ts`の`modules`セクションに`arco-design-nuxt-module`を追加します。

export default defineNuxtConfig({
  modules: [
    'arco-design-nuxt-module'
  ]
})

オプション

モジュールをカスタマイズする必要がある場合は、`nuxt.config.ts`で`arco`を設定できます。

例

export default defineNuxtConfig({
  arco: {
    importPrefix: 'A',
    hookPrefix: 'Arco',
    locales: ['getLocale'],
    localePrefix: 'Arco',
  },
})

完全な型定義

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(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[]

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

これで完了です！NuxtアプリでArco Design Nuxt Moduleを使用できます ✨

その他

クレジット

謝辞

大きく影響を受けたプロジェクト: element-plus-nuxt
Arco Design
Nuxt