Nuxt3にPrimeVueをインストールする方法

Nuxt3にPrimeVueをインストールする方法

by

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

ではお疲れさまでした。