Nuxt3にPrimeVueをインストールする方法
PrimeVueはVue.jsのUIライブラリでコンポーネントの数が多くお勧めです。今日は、SSR(サーバーサイドレンダリング)ができるVueベースのNuxtライブラリにPrimeVueを使う方法を紹介していきます。 Nuxtのプロジェクト まずは下記のコマンドでNuxt3のプロジェクトを作りましょう。 PrimeVueのインストール 次にPrimeVueをインストールします。 コンフィグファイルからインポート では、ライブラリをインストールしたところで、nuxt.config.tsファイルを開きます。 デフォルトでは何も記載されていません。 ではここにPrimeVueで使うファイルをインポートしていきます。インポートするファイルはPrimeVueの公式ページにあるので必要に応じて確認してください。 Nuxtのプラグインについて Nuxtではpluginsというフォルダーを認識して自動でVueアプリを作成する際にサーバー側でレンダーするかクライアント側でレンダーするか指定することができます。 フォルダーの構成はこのようにできます。 では公式ドキュメンテーションに従い、ファイルをインポートしていきます。 プロジェクトのルート直下にpluginsというフォルダーを作成して、primevue-plugin.jsファイルを作成しましょう。 例としてボタンのコンポーネントを使いたい場合はここで登録しておきます。Vueアプリのmain.jsと似たような感じですね。 ripple:trueはボタンなどで使われるアニメーションのことでデフォルトではfalseになっているので必要に応じて上記のようにtrueに設定してください。 コンポーネントの作成 では、PrimeVueのコンポーネントが登録できたところで、実際にNuxtでボタンを作ってみましょう。 pages/index.vueファイルを作成してデフォルトのランディングページを作成します。 詳しいページの作り方はこちらを参考にしましょう。 これで、テストサーバーを再起動するとPrimeVueのコンポーネントをFlexがちゃんとロードされていることがわかりましたね。 ではお疲れさまでした。