PrimeVueはVue.jsのUIライブラリでコンポーネントの数が多くお勧めです。今日は、SSR（サーバーサイドレンダリング）ができるVueベースのNuxtライブラリにPrimeVueを使う方法を紹介していきます。
Nuxtのプロジェクト
まずは下記のコマンドでNuxt3のプロジェクトを作りましょう。
npx nuxi init <project-name> cd <project-name> npm i
PrimeVueのインストール
次にPrimeVueをインストールします。
npm install primevue@^3 --save npm install primeicons --save #PrimeVueのFlexを使いたい場合はこれも npm install primeflex
コンフィグファイルからインポート
では、ライブラリをインストールしたところで、nuxt.config.tsファイルを開きます。
デフォルトでは何も記載されていません。
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
})
ではここにPrimeVueで使うファイルをインポートしていきます。インポートするファイルはPrimeVueの公式ページにあるので必要に応じて確認してください。
export default defineNuxtConfig({
css:[
'primevue/resources/themes/saga-blue/theme.css', //テーマカラーは色々あります。
'primevue/resources/primevue.min.css',
'primeicons/primeicons.css',
'/node_modules/primeflex/primeflex.css', //Flexをインストールした場合
],
build: {
transpile: ['primevue']
}
})
Nuxtのプラグインについて
Nuxtではpluginsというフォルダーを認識して自動でVueアプリを作成する際にサーバー側でレンダーするかクライアント側でレンダーするか指定することができます。
フォルダーの構成はこのようにできます。
plugins | - myPlugin.ts | - myOtherPlugin | --- supportingFile.ts | --- componentToRegister.vue | --- index.ts
では公式ドキュメンテーションに従い、ファイルをインポートしていきます。
プロジェクトのルート直下にpluginsというフォルダーを作成して、primevue-plugin.jsファイルを作成しましょう。
例としてボタンのコンポーネントを使いたい場合はここで登録しておきます。Vueアプリのmain.jsと似たような感じですね。
import PrimeVue from "primevue/config";
import Button from "primevue/button";
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(PrimeVue, {ripple:true})
nuxtApp.vueApp.component('Button', Button)
});
ripple:trueはボタンなどで使われるアニメーションのことでデフォルトではfalseになっているので必要に応じて上記のようにtrueに設定してください。
コンポーネントの作成
では、PrimeVueのコンポーネントが登録できたところで、実際にNuxtでボタンを作ってみましょう。
pages/index.vueファイルを作成してデフォルトのランディングページを作成します。
詳しいページの作り方はこちらを参考にしましょう。
<template>
<div class="m-4">
<Button>おつかれ</Button>
</div>
</template>
これで、テストサーバーを再起動するとPrimeVueのコンポーネントをFlexがちゃんとロードされていることがわかりましたね。
ではお疲れさまでした。
