Nuxt プロジェクトで PrimeVue をセットアップする。
PrimeVue は、公式の npm レジストリと、公式の nuxt-primevue モジュールでダウンロードできます。
# Using npm
npm install primevue
npm install --save-dev @primevue/nuxt-module
# Using yarn
yarn add primevue
yarn add --dev @primevue/nuxt-module
# Using pnpm
pnpm add primevue
pnpm add -D @primevue/nuxt-module
nuxt.config ファイルで、@primevue/nuxt-module を modules セクションに追加し、モジュールの構成のために primevue オブジェクトを定義します。
export default defineNuxtConfig({
modules: [
'@primevue/nuxt-module'
],
primevue: {
/* Configuration */
}
})
PrimeVue には、スタイル付きとスタイルなしの 2 つのスタイリングモードがあります。始めたばかりの場合は、スタイル付きモードから開始してください。
スタイル付きモードでは、事前にスキンされたコンポーネントが提供され、デフォルトのテーマは、プライマリカラーがエメラルド色のオーラです。詳細については、スタイル付きモードのドキュメントを参照してください。
テーマは PrimeVue にデフォルトで含まれていないため、@primevue/themes アドオンパッケージをインストールしてください。
# Using npm
npm install @primevue/themes
# Using yarn
yarn add @primevue/themes
# Using pnpm
pnpm add @primevue/themes
オーラなどのテーマを使用するようにモジュールを構成します。
import Aura from '@primevue/themes/aura';
export default defineNuxtConfig({
modules: [
'@primevue/nuxt-module'
],
primevue: {
options: {
theme: {
preset: Aura
}
}
}
})
スタイルなしモードでは、コンポーネントに CSS が含まれていないため、コンポーネントを自分でスタイル設定する必要があります。これは、PrimeVue の上に独自の UI ライブラリを構築する場合に特に役立ちます。詳細と例については、スタイルなしモードのドキュメントをご覧ください。
export default defineNuxtConfig({
modules: [
'@primevue/nuxt-module'
],
primevue: {
options: {
unstyled: true
}
}
})
nuxt-primevue モジュールはコンポーネントを自動的に登録するため、すぐに使用を開始できます。
<Button label="Check" icon="pi pi-check" />
モジュールはデフォルトで PrimeVue プラグインをインストールします。Nuxt プラグインなどで PrimeVue を手動で構成する場合は、このオプションを無効にしてください。
primevue: {
usePrimeVue: true
}
PrimeVue の主な構成設定については、構成に関するドキュメントを参照してください。
import Aura from '@primevue/themes/aura';
export default defineNuxtConfig({
modules: [
'@primevue/nuxt-module'
],
primevue: {
options: {
ripple: true,
inputVariant: 'filled',
theme: {
preset: Aura,
options: {
prefix: 'p',
darkModeSelector: 'system',
cssLayer: false
}
}
}
}
})
自動インポート機能は、ツリーシェイキングサポートを使用してコンポーネントを自動的に登録します。デフォルトは true です。無効にする場合は、手動登録のために components および directives の include/exclude オプションを使用します。
primevue: {
autoImport: true|false
}
登録にプレフィックスを追加するには、components および directives で prefix を使用します。
primevue: {
autoImport: true|false,
components: {
prefix: 'org'
},
directives: {
prefix: 'org'
}
}
グローバルパススルーインポートパスを構成します。
primevue: {
importPT: { from: '@/passthrough/mycustompt.js')}
}
mycustompt.js ファイルは構成を定義し、それをエクスポートします。
const MyCustomPT = {
...
button: {
root: 'my-button',
...
},
...
}
export default MyCustomPT;
スタイル付きモードでのテーマのカスタマイズのために、テーマ構成パスを構成します。
primevue: {
importTheme: { from: '@/themes/mytheme.js' },
}
mytheme.js ファイルには、テーマ構成が含まれています。
import { definePreset } from '@primevue/themes';
import Aura from '@primevue/themes/aura';
const MyPreset = definePreset(Aura, {
semantic: {
primary: {
50: '{indigo.50}',
100: '{indigo.100}',
200: '{indigo.200}',
300: '{indigo.300}',
400: '{indigo.400}',
500: '{indigo.500}',
600: '{indigo.600}',
700: '{indigo.700}',
800: '{indigo.800}',
900: '{indigo.900}',
950: '{indigo.950}'
}
}
});
export default {
preset: MyPreset,
options: {
darkModeSelector: '.p-dark'
}
};
autoImport が無効になっている場合は、手動登録のために include および exclude を使用します。
インポートおよび登録するコンポーネントは、文字列配列を使用して include オプションで定義されます。値が無視されるか、* エイリアスを使用して設定されると、すべてのコンポーネントが登録されます。
primevue: {
components: {
include: ['Button', 'DataTable']
}
}
すべてのコンポーネントがインポートされる場合でも、特定のコンポーネントは exclude オプションで除外できます。
primevue: {
components: {
include: '*',
exclude: ['Galleria', 'Carousel']
}
}
デフォルトでは、互換性の理由から、Chart および Editor コンポーネントは除外されます。それらを含めるには、exclude オプションを空のリストに設定するだけです。
primevue: {
components: {
exclude: []
}
}
登録されたコンポーネント名にプレフィックスを付けるには、prefix オプションを使用します。
primevue: {
components: {
prefix: 'Prime'
include: ['Button', 'DataTable'] /* Used as <PrimeButton /> and <PrimeDataTable /> */
}
}
コンポーネントの登録は、インポートメタデータを表すオブジェクトを取得する name 関数を実装することで、さらにカスタマイズできます。name はコンポーネントのラベル、as はデフォルトのエクスポート名、from はインポートパスです。
primevue: {
components: {
name: ({ name, as, from }) => {
return name === 'Button' ? `My${name}` : name;
},
include: ['Button', 'DataTable'] /* Used as <MyButton /> and <DataTable /> */
}
}
autoImport が無効になっている場合は、手動登録のために include および exclude を使用します。
インポートおよび登録するディレクティブの名前は、include プロパティを使用して提供されます。値が無視されるか、* エイリアスを使用して設定されると、すべてのディレクティブが登録されます。
primevue: {
directives: {
include: ['Ripple', 'Tooltip']
}
}
コンポーネントと同様に、特定のディレクティブを除外したり、名前登録をカスタマイズしたりできます。
primevue: {
directives: {
include: '*',
exclude: ['Ripple']
}
}
primevue: {
directives: {
prefix: 'p'
include: ['Ripple', 'Tooltip'] /* Used as v-pripple and v-ptooltip */
}
}
使用するコンポーザブルを決定します。デフォルト値が無視されるか、* として設定されると、すべてのコンポーザブルがインポートされます。
primevue: {
composables: {
include: ['useStyle']
}
}
さまざまなオプションを使用したNuxt ベースのサンプルは、PrimeVue のサンプルリポジトリで入手できます。