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がちゃんとロードされていることがわかりましたね。

ではお疲れさまでした。