NuxtでPrimeVueをインストール

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つのスタイルモードがあります。始めたばかりの場合は、スタイル付きモードから始めるのが良いでしょう。

スタイルモード #

スタイル付きモードでは、あらかじめスキンされたコンポーネントが提供され、デフォルトのテーマはAuraで、プライマリカラーはエメラルドです。詳細については、スタイル付きモードのドキュメントを参照してください。

テーマはPrimeVueにデフォルトで含まれていないため、@primevue/themesアドオンパッケージをインストールしてください。


# Using npm
npm install @primevue/themes

# Using yarn
yarn add @primevue/themes

# Using pnpm
pnpm add @primevue/themes

Auraのようなテーマを使用するようにモジュールを設定します。


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" />

設定 #

usePrimeVue #

このモジュールは、デフォルトで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
                }
            }
        }
    }
})

autoImport #

自動インポート機能は、ツリーシェーキングをサポートしてコンポーネントを自動的に登録します。デフォルトはtrueです。無効にした場合は、手動登録のためにcomponentsおよびdirectivesのinclude/excludeオプションを使用してください。


primevue: {
    autoImport: true|false
}

登録にプレフィックスを追加するには、componentsおよびdirectivesでprefixを使用します。


primevue: {
    autoImport: true|false,
    components: {
        prefix: 'org'
    },
    directives: {
        prefix: 'org'
    }
}

importPT #

グローバルパススルーインポートパスを設定します。


primevue: {
    importPT: { from: '@/passthrough/mycustompt.js')}
}

mycustompt.jsファイルは、構成を定義し、エクスポートします。


const MyCustomPT = {
    ...
    button: {
        root: 'my-button',
       ...
    },
    ...
}

export default MyCustomPT;

importTheme #

スタイル付きモードでのテーマのカスタマイズ用のテーマ構成パスを設定します。


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のサンプルリポジトリで入手できます。