Element Plus module for Nuxt
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.
'css' | 'scss' | boolean
css
import style css or sass(scss) with components, disable automatically import styles with false
.
array
A list of themes that require import styles automatically.
e.g. ['dark']
string | false
ElIcon
Icon prefix name, disable automatically import icon with false
.
string
el
When you change the global namespace, you must change it here as well.
object
{ prefix: 1024, current: 0 }
Automatically inject the ID_INJECTION_KEY into Vue.
object
{ current: 0 }
Automatically inject the Z_INDEX_INJECTION_KEY into Vue.
array
When you modify the append-to
props in all based on ElTooltip components, you need to add the value here.
array
If there are components that are not imported automatically from Element Plus, you need to add the component name here.
e.g. ['ElSubMenu']
object
A map of components that the definition file of subComponent is in its parent component.
object
If there are directives that are not imported automatically from Element Plus, you need to add the directive name here.
array
If you wish to add automatically import content from Element Plus, you can add it here.
array
When a component incorrectly loads styles, you need to add the component name here.
array
[ /\.vue$/, /\.vue\?vue/, /\.vue\?v=/, /\.((c|m)?j|t)sx?$/]
Include files that need to automatically import styles.
array
[/[\\/]node_modules[\\/]/, /[\\/]\.git[\\/]/, /[\\/]\.nuxt[\\/]/]
Exclude files that do not require the automatic import of styles.
pnpm i
to install the dependencies.pnpm dev:prepare
to generate type stubs.pnpm dev
to start playground in development mode.pnpm dev:build
to build playground.pnpm dev:start
to locally preview playground.pnpm build
to build this project.