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 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
- 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|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'
}
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