Element Plus Nuxt
Element Plus の Nuxt 用モジュール
機能
- コンポーネントとスタイルをオンデマンドで自動的にインポートします。
- ディレクティブとスタイルをオンデマンドで自動的にインポートします。
- @element-plus/icons-vue からアイコンを自動的にインポートします。
- ElMessage、ElNotification、その他のメソッドを自動的にインポートします。
- ID_INJECTION_KEYとZINDEX_INJECTION_KEYを自動的にVueに注入します。
- テレポートマークアップを最終的なページHTMLの正しい場所に自動的に挿入します。
インストール
!警告 element-plusが内部で使用しているdayjsはJavaScriptモジュールではないため、起動前にJavaScriptモジュールに変換できるように、プロジェクトのルートディレクトリに
.npmrcファイルを追加し、次の構成を追加する必要があります。shamefully-hoist=trueまたは、
dayjs依存関係を個別にインストールします。
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>
Nuxtドキュメントとplaygroundの使用法を参照してください。
オプション
importStyle
- タイプ:
'css' | 'scss' | boolean - デフォルト:
css
コンポーネントでスタイルcssまたはsass(scss)をインポートするか、falseを使用してスタイルの自動インポートを無効にします。
themes
- タイプ:
array
スタイルの自動インポートが必要なテーマのリスト。
例: ['dark']
icon
- タイプ:
string | false - デフォルト:
ElIcon
アイコンのプレフィックス名、falseを使用してアイコンの自動インポートを無効にします。
namespace
- タイプ:
string - デフォルト:
el
グローバル名前空間を変更した場合は、ここでも変更する必要があります。
defaultLocale
- タイプ:
string
デフォルトのロケールを置き換えます。ロケールリストはこちらにあります
例: 'zh-cn'
globalConfig
- タイプ:
object
コンポーネントのデフォルトのsizeやz-indexを変更するなど、グローバルな構成を設定します。
例: { size: 'small', zIndex: 3000 }
injectionID
- タイプ:
object - デフォルト:
{ prefix: 1024, current: 0 }
ID_INJECTION_KEYを自動的にVueに注入します。
injectionZIndex
- タイプ:
object - デフォルト:
{ current: 0 }
Z_INDEX_INJECTION_KEYを自動的にVueに注入します。
appendTo
- タイプ:
array
ElTooltipに基づいたすべてのコンポーネントでappend-toプロパティを変更する場合は、ここに値を追加する必要があります。
components
- タイプ:
array
Element Plusから自動的にインポートされないコンポーネントがある場合は、ここにコンポーネント名を追加する必要があります。
例: ['ElSubMenu']
subComponents
- タイプ:
object
subComponentの定義ファイルが親コンポーネントにあるコンポーネントのマップ。
directives
- タイプ:
object
Element Plusから自動的にインポートされないディレクティブがある場合は、ここにディレクティブ名を追加する必要があります。
imports
- タイプ:
array
Element Plusから自動的にインポートするコンテンツを追加する場合は、ここに追加できます。
例:
[
['useLocale', 'es/hooks/use-locale/index.mjs'],
[['castArray', 'unique'], 'es/utils/arrays.mjs']
],
noStylesComponents
- タイプ:
array
コンポーネントが誤ってスタイルをロードする場合は、ここにコンポーネント名を追加する必要があります。
include
- タイプ:
array - デフォルト:
[ /\.vue$/, /\.vue\?vue/, /\.vue\?v=/, /\.((c|m)?j|t)sx?$/]
スタイルを自動的にインポートする必要があるファイルを含めます。
exclude
- タイプ:
array - デフォルト:
[/[\\/]node_modules[\\/]/, /[\\/]\.git[\\/]/, /[\\/]\.nuxt[\\/]/]
スタイルの自動インポートを必要としないファイルを除外します。
テンプレート
開発
pnpm iを実行して、依存関係をインストールします。pnpm dev:prepareを実行して、型スタブを生成します。pnpm devを実行して、開発モードでplaygroundを起動します。pnpm dev:buildを実行して、playgroundをビルドします。pnpm dev:startを実行して、playgroundをローカルでプレビューします。pnpm buildを実行して、このプロジェクトをビルドします。