Home

Awesome

<p align="center"> <img width="300px" src="https://user-images.githubusercontent.com/10731096/95823103-9ce15780-0d5f-11eb-8010-1bd1b5910d4f.png"> </p> <p align="center"> <a href="https://www.npmjs.com/package/@element-plus/nuxt"> <img src="https://img.shields.io/npm/v/@element-plus/nuxt.svg"> </a> <a href="https://npmcharts.com/compare/@element-plus/nuxt?minimal=true"> <img src="https://img.shields.io/npm/dm/@element-plus/nuxt.svg"> </a> </p>

Element Plus Nuxt

Element Plus module for Nuxt

Features

Installation

[!WARNING] Since the dayjs used internally by element-plus is not a JavaScript 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:

shamefully-hoist=true

Or install the dayjs dependency separately.

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 */ }
})

Usage

<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.

Options

importStyle

import style css or sass(scss) with components, disable automatically import styles with false.

themes

A list of themes that require import styles automatically.

e.g. ['dark']

icon

Icon prefix name, disable automatically import icon with false.

namespace

When you change the global namespace, you must change it here as well.

defaultLocale

Replace default locale, you can find locale list here

e.g. 'zh-cn'

globalConfig

Set global configuration, such as modifying the default size and z-index of the component.

e.g. { size: 'small', zIndex: 3000 }

injectionID

Automatically inject the ID_INJECTION_KEY into Vue.

injectionZIndex

Automatically inject the Z_INDEX_INJECTION_KEY into Vue.

appendTo

When you modify the append-to props in all based on ElTooltip components, you need to add the value here.

components

If there are components that are not imported automatically from Element Plus, you need to add the component name here.

e.g. ['ElSubMenu']

subComponents

A map of components that the definition file of subComponent is in its parent component.

directives

If there are directives that are not imported automatically from Element Plus, you need to add the directive name here.

imports

If you wish to add automatically import content from Element Plus, you can add it here.

e.g.

[
  ['useLocale', 'es/hooks/use-locale/index.mjs'],
  [['castArray', 'unique'], 'es/utils/arrays.mjs']
],

noStylesComponents

When a component incorrectly loads styles, you need to add the component name here.

include

Include files that need to automatically import styles.

exclude

Exclude files that do not require the automatic import of styles.

Template

element-plus-nuxt-starter

Development