Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/element-plus/element-plus-nuxt
Element Plus module for Nuxt
https://github.com/element-plus/element-plus-nuxt
element-plus nuxt
Last synced: 29 days ago
JSON representation
Element Plus module for Nuxt
- Host: GitHub
- URL: https://github.com/element-plus/element-plus-nuxt
- Owner: element-plus
- License: mit
- Created: 2023-01-03T06:35:59.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-04-04T07:29:14.000Z (8 months ago)
- Last Synced: 2024-04-14T09:04:51.774Z (8 months ago)
- Topics: element-plus, nuxt
- Language: TypeScript
- Homepage:
- Size: 281 KB
- Stars: 108
- Watchers: 2
- Forks: 14
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-element-plus - element-plus-nuxt - Element Plus module for Nuxt. (Resources / Official Project)
- awesome-element-plus - element-plus-nuxt - Element Plus module for Nuxt. (Resources / Official Project)
README
# Element Plus Nuxt
> [Element Plus](https://element-plus.org) module for [Nuxt](https://nuxt.com)
## Features
- Automatically import components and styles on demand.
- Automatically import directives and styles on demand.
- Automatically import icons from [@element-plus/icons-vue](https://github.com/element-plus/element-plus-icons).
- 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.
## Installation
> [!WARNING]
> 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:
> ```
> shamefully-hoist=true
> ```
> Or install the `dayjs` dependency separately.
```bash
npx nuxi@latest module add element-plus
# or
npm i element-plus @element-plus/nuxt -D
```
```ts
export default defineNuxtConfig({
modules: [
'@element-plus/nuxt'
],
elementPlus: { /** Options */ }
})
```
## Usage
```vue
button
button
lazy button
```
Reference [Nuxt documentation](https://nuxt.com/docs/guide/directory-structure/components) and [playground](./playground/app.vue) use.
## Options
### importStyle
- Type: `'css' | 'scss' | boolean`
- Default: `css`
import style css or sass(scss) with components, disable automatically import styles with `false`.
### themes
- Type: `array`
A list of themes that require import styles automatically.
e.g. `['dark']`
### icon
- Type: `string | false`
- Default: `ElIcon`
Icon prefix name, disable automatically import icon with `false`.
### namespace
- Type: `string`
- Default: `el`
When you change the global namespace, you must change it here as well.
### defaultLocale
- Type: `string`
Replace default locale, you can find locale list [here](https://github.com/element-plus/element-plus/tree/dev/packages/locale/lang)
e.g. `'zh-cn'`
### globalConfig
- Type: `object`
Set global configuration, such as modifying the default `size` and `z-index` of the component.
e.g. `{ size: 'small', zIndex: 3000 }`
### injectionID
- Type: `object`
- Default: `{ prefix: 1024, current: 0 }`
Automatically inject the ID_INJECTION_KEY into Vue.
### injectionZIndex
- Type: `object`
- Default: `{ current: 0 }`
Automatically inject the Z_INDEX_INJECTION_KEY into Vue.
### appendTo
- Type: `array`
When you modify the `append-to` props in all based on ElTooltip components, you need to add the value here.
### components
- 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']`
### subComponents
- Type: `object`
A map of components that the definition file of subComponent is in its parent component.
### directives
- Type: `object`
If there are directives that are not imported automatically from Element Plus, you need to add the directive name here.
### imports
- Type: `array`
If you wish to add automatically import content from Element Plus, you can add it here.
e.g.
```ts
[
['useLocale', 'es/hooks/use-locale/index.mjs'],
[['castArray', 'unique'], 'es/utils/arrays.mjs']
],
```
### noStylesComponents
- Type: `array`
When a component incorrectly loads styles, you need to add the component name here.
### include
- Type: `array`
- Default: `[ /\.vue$/, /\.vue\?vue/, /\.vue\?v=/, /\.((c|m)?j|t)sx?$/]`
Include files that need to automatically import styles.
### exclude
- Type: `array`
- Default: `[/[\\/]node_modules[\\/]/, /[\\/]\.git[\\/]/, /[\\/]\.nuxt[\\/]/]`
Exclude files that do not require the automatic import of styles.
## Template
[element-plus-nuxt-starter](https://github.com/element-plus/element-plus-nuxt-starter)
## Development
- 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.