Element Plus module for Nuxt
- Automatically import components and styles on demand.
- Automatically import directives and styles on demand.
- Automatically import icons from @element-plus/icons-vue.
- Automatically import of ElMessage, ElNotification and other methods.
- Automatically inject the ID_INJECTION_KEY and ZINDEX_INJECTION_KEY into Vue.
- Automatically inject the teleport markup into the correct location in the final page HTML.
npx nuxi@latest module add element-plus
# or
npm i element-plus @element-plus/nuxt -D
export default defineNuxtConfig({
modules: [
'@element-plus/nuxt'
],
elementPlus: { /** Options */ }
})
<template>
<el-button @click="ElMessage('hello')">button</el-button>
<ElButton :icon="ElIconEditPen" type="success">button</ElButton>
<LazyElButton type="warning">lazy button</LazyElButton>
</template>
Reference Nuxt documentation and playground use.
- Type:
'css' | 'scss' | boolean
- Default:
css
import style css or sass(scss) with components, disable automatically import styles with false
.
- Type:
array
A list of themes that require import styles automatically.
e.g. ['dark']
- Type:
string | false
- Default:
ElIcon
Icon prefix name, disable automatically import icon with false
.
- Type:
string
- Default:
el
When you change the global namespace, you must change it here as well.
- Type:
string
Replace default locale, you can find locale list here
- Type:
object
- Default:
{ prefix: 1024, current: 0 }
Automatically inject the ID_INJECTION_KEY into Vue.
- Type:
object
- Default:
{ current: 0 }
Automatically inject the Z_INDEX_INJECTION_KEY into Vue.
- Type:
array
When you modify the append-to
props in all based on ElTooltip components, you need to add the value here.
- Type:
array
If there are components that are not imported automatically from Element Plus, you need to add the component name here.
e.g. ['ElSubMenu']
- Type:
object
A map of components that the definition file of subComponent is in its parent component.
- Type:
object
If there are directives that are not imported automatically from Element Plus, you need to add the directive name here.
- Type:
array
If you wish to add automatically import content from Element Plus, you can add it here.
- Type:
array
When a component incorrectly loads styles, you need to add the component name here.
- Type:
array
- Default:
[ /\.vue$/, /\.vue\?vue/, /\.vue\?v=/, /\.((c|m)?j|t)sx?$/]
Include files that need to automatically import styles.
- Type:
array
- Default:
[/[\\/]node_modules[\\/]/, /[\\/]\.git[\\/]/, /[\\/]\.nuxt[\\/]/]
Exclude files that do not require the automatic import of styles.
- Run
pnpm i
to install the dependencies. - Run
pnpm dev:prepare
to generate type stubs. - Run
pnpm dev
to start playground in development mode. - Run
pnpm dev:build
to build playground. - Run
pnpm dev:start
to locally preview playground. - Run
pnpm build
to build this project.