\n\n# Element Plus Nuxt\n\n> [Element Plus](https://element-plus.org) module for [Nuxt](https://nuxt.com)\n\n## Features\n\n- Automatically import components and styles on demand.\n- Automatically import directives and styles on demand.\n- Automatically import icons from [@element-plus/icons-vue](https://github.com/element-plus/element-plus-icons).\n- Automatically import of ElMessage, ElNotification and other methods.\n- Automatically inject the ID_INJECTION_KEY and ZINDEX_INJECTION_KEY into Vue.\n- Automatically inject the teleport markup into the correct location in the final page HTML.\n\n## Installation\n\n> [!WARNING]\n> Since the [dayjs](https://github.com/iamkun/dayjs) used internally by element-plus is not a [JavaScript modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules), in order to ensure that it can be converted into a JavaScript modules before startup, you need to add a `.npmrc` file to the root directory of the project and add the following configuration:\n> ```\n> shamefully-hoist=true\n> node-linker=hoisted\n> ```\n> Or install the `dayjs` dependency separately.\n\n```bash\nnpx nuxi@latest module add element-plus\n# or\nnpm i element-plus @element-plus/nuxt -D\n```\n\n## Configuration\n\n> [!WARNING]\n> At present, the method cannot automatically obtain the context, and you need to manually configure [installMethods](#installmethods) in the options.\n\n```ts\nexport default defineNuxtConfig({\n modules: [\n '@element-plus/nuxt'\n ],\n elementPlus: { /** Options */ }\n})\n```\n\n## Usage\n\n```vue\n\n button\n button\n lazy button\n\n```\n\nReference [Nuxt documentation](https://nuxt.com/docs/guide/directory-structure/components) and [playground](./playground/app.vue) use.\n\n## Options\n\n### importStyle\n\n- Type: `'css' | 'scss' | boolean`\n- Default: `css`\n\nimport style css or sass(scss) with components, disable automatically import styles with `false`.\n\n### themes\n\n- Type: `array`\n\nA list of themes that require import styles automatically.\n\ne.g. `['dark']`\n\n### icon\n\n- Type: `string | false`\n- Default: `ElIcon`\n\nIcon prefix name, disable automatically import icon with `false`.\n\n### installMethods\n\n- Type: `array`\n\nList of methods that need to be installed.\n\ne.g. `['ElLoading', 'ElMessage', 'ElMessageBox', 'ElNotification']`\n\n### namespace\n\n- Type: `string`\n- Default: `el`\n\nWhen you change the global namespace, you must change it here as well.\n\n### defaultLocale\n\n- Type: `string`\n\nReplace default locale, you can find locale list [here](https://github.com/element-plus/element-plus/tree/dev/packages/locale/lang)\n\ne.g. `'zh-cn'`\n\n### cache\n\n- Type: `boolean`\n- Default: `false`\n\nWhether to cache the element-plus components and directives. **Only effective in development mode**.\n\nIf you enable this feature, you will get faster loading speed in development mode.\n\n### themeChalk\n\n- Type: `object`\n\nConfigure SCSS variables for generating custom themes. **Only effective when `importStyle` is `scss`**.\n\ne.g.\n\n```ts\n{\n $colors: {\n primary: { base: 'rgba(107,33,168, 1)' }\n },\n dark: {\n $colors: {\n primary: { base: 'rgb(242, 216, 22)' }\n }\n }\n}\n```\n\n### globalConfig\n\n- Type: `object`\n\nSet global configuration, such as modifying the default `size` and `z-index` of the component.\n\ne.g. `{ size: 'small', zIndex: 3000 }`\n\n### injectionID\n\n- Type: `object`\n- Default: `{ prefix: 1024, current: 0 }`\n\nAutomatically inject the ID_INJECTION_KEY into Vue.\n\n### injectionZIndex\n\n- Type: `object`\n- Default: `{ current: 0 }`\n\nAutomatically inject the Z_INDEX_INJECTION_KEY into Vue.\n\n### appendTo\n\n- Type: `array`\n\nWhen you modify the `append-to` props in all based on ElTooltip components, you need to add the value here.\n\n### components\n\n- Type: `array`\n\nIf there are components that are not imported automatically from Element Plus, you need to add the component name here.\n\ne.g. `['ElSubMenu']`\n\n### subComponents\n\n- Type: `object`\n\nA map of components that the definition file of subComponent is in its parent component.\n\n### directives\n\n- Type: `object`\n\nIf there are directives that are not imported automatically from Element Plus, you need to add the directive name here.\n\n### imports\n\n- Type: `array`\n\nIf you wish to add automatically import content from Element Plus, you can add it here.\n\ne.g. \n\n```ts\n[\n ['useLocale', 'es/hooks/use-locale/index.mjs'],\n [['castArray', 'unique'], 'es/utils/arrays.mjs']\n],\n```\n\n### baseImports\n\n- Type: `array`\n\nList of imports that will be imported whether if autoImports is disabled.\n\n### noStylesComponents\n\n- Type: `array`\n\nWhen a component incorrectly loads styles, you need to add the component name here.\n\n### include\n\n- Type: `array`\n- Default: `[ /\\.vue$/, /\\.vue\\?vue/, /\\.vue\\?v=/, /\\.((c|m)?j|t)sx?$/]`\n\nInclude files that need to automatically import styles.\n\n### exclude\n\n- Type: `array`\n- Default: `[/[\\\\/]node_modules[\\\\/]/, /[\\\\/]\\.git[\\\\/]/, /[\\\\/]\\.nuxt[\\\\/]/]`\n\nExclude files that do not require the automatic import of styles.\n\n## Template\n\n[element-plus-nuxt-starter](https://github.com/element-plus/element-plus-nuxt-starter)\n\n## Development\n\n- Run `pnpm i` to install the dependencies.\n- Run `pnpm dev:prepare` to generate type stubs.\n- Run `pnpm dev` to start playground in development mode.\n- Run `pnpm dev:build` to build playground.\n- Run `pnpm dev:start` to locally preview playground.\n- Run `pnpm build` to build this project.","users":{}}
![](\"https://user-images.githubusercontent.com/10731096/95823103-9ce15780-0d5f-11eb-8010-1bd1b5910d4f.png\")
\n![](\"https://img.shields.io/npm/v/@element-plus/nuxt.svg\")
\n ![](\"https://img.shields.io/npm/dm/@element-plus/nuxt.svg\")
\n