{"id":26362956,"url":"https://github.com/wiidede/arco-design-nuxt-module","last_synced_at":"2025-08-29T14:36:55.762Z","repository":{"id":189125437,"uuid":"680068509","full_name":"wiidede/arco-design-nuxt-module","owner":"wiidede","description":"Nuxt Module for Arco Design Vue. Automatically import components, icons and more.","archived":false,"fork":false,"pushed_at":"2025-02-17T02:23:24.000Z","size":911,"stargazers_count":25,"open_issues_count":1,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-08-11T17:43:52.052Z","etag":null,"topics":["arco-design-vue","nuxt-module"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/arco-design-nuxt-module","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wiidede.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-08-18T09:09:09.000Z","updated_at":"2025-07-18T06:22:24.000Z","dependencies_parsed_at":"2025-02-17T03:23:07.624Z","dependency_job_id":"bae0e4b0-3ead-48ef-a0e3-5afe60085c5d","html_url":"https://github.com/wiidede/arco-design-nuxt-module","commit_stats":null,"previous_names":["wiidede/arco-design-nuxt-module"],"tags_count":22,"template":false,"template_full_name":null,"purl":"pkg:github/wiidede/arco-design-nuxt-module","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wiidede%2Farco-design-nuxt-module","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wiidede%2Farco-design-nuxt-module/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wiidede%2Farco-design-nuxt-module/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wiidede%2Farco-design-nuxt-module/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wiidede","download_url":"https://codeload.github.com/wiidede/arco-design-nuxt-module/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wiidede%2Farco-design-nuxt-module/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":272702518,"owners_count":24979081,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-29T02:00:10.610Z","response_time":87,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["arco-design-vue","nuxt-module"],"created_at":"2025-03-16T18:19:58.250Z","updated_at":"2025-08-29T14:36:55.724Z","avatar_url":"https://github.com/wiidede.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\u003cimg height=\"100px\" width=\"100px\" src='https://github.com/wiidede/arco-design-nuxt-module/raw/main/arco-design-nuxt-module.svg' alt=\"Arco Design Nuxt Module Logo\"\u003e\n\u003ch1\u003eArco Design Nuxt Module\u003c/p\u003e\n\u003c/div\u003e\n\n[![npm version][npm-version-src]][npm-version-href]\n[![npm downloads][npm-downloads-src]][npm-downloads-href]\n[![License][license-src]][license-href]\n\nNuxt Module for Arco Design Vue. Automatically import components, icons and more.\n\n## Features\n\n\u003c!-- Highlight some of the features your module provide here --\u003e\n- ✨ auto import components\n- ✨ auto import icons\n- ✨ auto import Message, Notification\n- ✨ auto import hooks\n- ✨ auto import locale hooks\n- 🔹 support custom prefix above\n\n## Quick Setup\n\n1. Add `arco-design-nuxt-module` dependency to your project\n\n```bash\nnpx nuxi@latest module add arco-design-nuxt-module\n```\n\n\u003e [!NOTE]\n\u003e If you do not have `@arco-design/web-vue` installed, please install it first\n\u003e\n\u003e `pnpm install @arco-design/web-vue`\n\n2. Add `arco-design-nuxt-module` to the `modules` section of `nuxt.config.ts`\n\n```js\nexport default defineNuxtConfig({\n  modules: [\n    'arco-design-nuxt-module'\n  ]\n})\n```\n\n## Options\n\nIf you need to customize the module, you can set `arco` in `nuxt.config.ts`\n\n### Example\n\n```ts\nexport default defineNuxtConfig({\n  arco: {\n    importPrefix: 'A',\n    hookPrefix: 'Arco',\n    locales: ['getLocale'],\n    localePrefix: 'Arco',\n  },\n})\n```\n\n### Full Type\n\n```ts\ninterface Options {\n  /**\n   * A list of components that need to be automatically imported.\n   *\n   * @default * all component from '@arco-design/web-vue/'\n   *\n   * @example\n   * ```ts\n   *  ['Button']\n   * ```\n   */\n  components: false | string[]\n\n  /**\n   * Prefix of the component name.\n   *\n   * @default 'A'\n   */\n  componentPrefix: string\n\n  /**\n   * A list of icons component that need to be automatically imported.\n   *\n   * @default * all icons from '@arco-design/web-vue/(es|lib)/icon'\n   *\n   * @example\n   * ```ts\n   *  ['IconArrowDown']\n   * ```\n   */\n  icons: false | string[]\n\n  /**\n   * Prefix of the icon component name.\n   *\n   * @default ''\n   */\n  iconPrefix: string\n\n  /**\n   * A map of components that the definition file of subComponent is in its parent component.\n   * Normally, you don't need to set it.\n   */\n  subComponents: Record\u003cstring, string[]\u003e\n\n  /**\n   * A list of imports(with style auto import) that need to be automatically imported.\n   *\n   * @default\n   * ```ts\n   *  ['Notification', 'Message']\n   * ```\n   */\n  imports: false | ('Notification' | 'Message')[]\n\n  /**\n   * Prefix of the import name.\n   *\n   * @default ''\n   */\n  importPrefix: string\n\n  /**\n   * When you need to add automatically import locale function from Arco Design Vue, you can add it here.\n   *\n   * @default false\n   *\n   * @example\n   * ```ts\n   *  ['useLocale', 'getLocale', 'addI18nMessages']\n   * ```\n   *\n   */\n  locales: false | ('useLocale' | 'getLocale' | 'addI18nMessages')[]\n\n  /**\n   * Prefix of the locale name.\n   *\n   * @default ''\n   *\n   * @example\n   * 'A' -\u003e 'useALocale'\n   */\n  localePrefix: string\n\n  /**\n   * When you need to add automatically import hooks from Arco Design Vue, you can add it here.\n   *\n   * @default\n   * ```ts\n   * ['useFormItem']\n   * ```\n   *\n   */\n  hooks: false | ('useFormItem')[]\n\n  /**\n   * Prefix of the hook name.\n   *\n   * @default ''\n   *\n   * @example 'A' -\u003e 'useAFormItem'\n   */\n  hookPrefix: string\n\n  /**\n   * import style css or less with components\n   *\n   * @default 'css'\n   *\n   * Disable automatically import styles with `false`\n   */\n  importStyle: 'css' | 'less' | boolean\n\n  /**\n   * use arco design theme.\n   *\n   * @default undefined\n   *\n   * @example '@arco-themes/vue-digitforce'\n   *\n   * It will full import the theme style file(index.less or css/arco.css)\n   *\n   * Recommended just directly import index.less or css/arco.css in your project and disable `importStyle` rather than using this option\n   *\n   * for more detail about theme, see https://arco.design/docs/designlab/use-theme-package\n   */\n  theme: string\n\n  /**\n   * A list of component names that have no styles, so resolving their styles file should be prevented\n   *\n   * @default\n   * ```ts\n   * ['ConfigProvider', 'Icon']\n   * ```\n   */\n  noStylesComponents: string[]\n\n  /**\n   * import from es or lib\n   *\n   * @default 'es'\n   *\n   */\n  importFrom: 'es' | 'lib'\n}\n```\n\nThat's it! You can now use Arco Design Nuxt Module in your Nuxt app ✨\n\n## Other\n\n- [Release Notes](https://github.com/wiidede/arco-design-nuxt-module/releases)\n- [Demo](https://github.com/wiidede/arco-nuxt-demo)\n- [Online playground](https://stackblitz.com/github/wiidede/arco-nuxt-demo?file=pages%2Findex.vue)\n\u003c!-- - [📖 \u0026nbsp;Documentation](https://example.com) --\u003e\n\n## Credits\n\nThanks to:\n\n- heavily inspired by [element-plus-nuxt](https://github.com/element-plus/element-plus-nuxt)\n- [Arco Design](https://arco.design)\n- [Nuxt][nuxt-href]\n\n\u003c!-- Badges --\u003e\n[npm-version-src]: https://img.shields.io/npm/v/arco-design-nuxt-module/latest.svg?style=flat\u0026colorA=18181B\u0026colorB=28CF8D\n[npm-version-href]: https://npmjs.com/package/arco-design-nuxt-module\n\n[npm-downloads-src]: https://img.shields.io/npm/dm/arco-design-nuxt-module.svg?style=flat\u0026colorA=18181B\u0026colorB=28CF8D\n[npm-downloads-href]: https://npmjs.com/package/arco-design-nuxt-module\n\n[license-src]: https://img.shields.io/npm/l/arco-design-nuxt-module.svg?style=flat\u0026colorA=18181B\u0026colorB=28CF8D\n[license-href]: https://npmjs.com/package/arco-design-nuxt-module\n\n[nuxt-href]: https://nuxt.com\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwiidede%2Farco-design-nuxt-module","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwiidede%2Farco-design-nuxt-module","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwiidede%2Farco-design-nuxt-module/lists"}