Nuxt 4 で PrimeVue のアイコンに Font Awesome を利用する方法

こんにちは。 SAW です。
最近、 Beetlejuice を Netflix で視聴しました。
映画を見に行こうと思ってタイミングを逃してしまったので、 Netflix で視聴できてとても良かったです 🙂

PrimeVue の UI コンポーネントでアイコンを利用する際に、公式ドキュメントのコード例では Prime Icons が利用されています。
Prime Icon 以外を利用したい場合のために、ドキュメントには Custom Icons の項目も用意されています。
Material Symbol や Font Awesome などのアイコンを利用するコード例が軽く書かれていますが、利用するための設定方法は書かれていません。

https://primevue.org/customicons/

一方で、 Font Awesome の公式ドキュメント には Nuxt 上で vue-fontawesome を利用して Font Awesome を利用するための設定手順が書かれています。
しかし、この方法は Font Awesome を Vue のコンポーネントとして利用する ため、 PrimeVue のドキュメントのコード例のように icon プロパティで Font Awesome を指定できません。

本記事では、 Nuxt 4 で PrimeVue のアイコンに Font Awesome を利用するための設定方法と利用方法 を紹介します。

なお、本記事で前提とする各パッケージのバージョンは以下の通りです。

• Nuxt: 4.1.0
• PrimeVue: 4.3.8
• Font Awesome: 7.0.1
  • vue-fontawesome: 3.1.1

対象読者

本記事で想定する読者層は次の通りです。

• Nuxt について基本的な知識を有している
• PrimeVue の基本的な使い方を知っている
• Font Awesome の基本的な使い方を知っている

Nuxt に PrimeVue をインストール

まずは Nuxt に PrimeVue をインストールします。
インストール手順は次の通りです。

1. primevue, @primeuix/themes を npm install する
2. PrimeVue Nxut Module を追加する

# PrimeVue をインストール
npm install primevue @primeuix/themes
# PrimeVue の Nuxt モジュールを追加
npx nuxi@latest module add primevue

次に、 PrimeVue を Nuxt で有効化するために、 PrimeVue の設定を nuxt.config.ts に追加します。
なお、 modules の行の変更は PrimeVue Module を nuxi module add すると自動的に追加されます。

nuxt.config.ts

+ import Aura from '@primeuix/themes/aura';

  export default defineNuxtConfig({
    compatibilityDate: '2025-07-15',
    devtools: { enabled: true },
+   modules: ['@primevue/nuxt-module'],
+   primevue: {
+     options: {
+       theme: {
+         preset: Aura,
+       },
+     },
+   },
  });

これで PrimeVue が Nuxt で利用できるようになりました。

app/app.vue

<template>
  <Button label="Hello, PrimeVue" />
</template>

PrimeVue のボタンコンポーネントが表示できている

Nuxt に Font Awesome をインストール

次に Font Awesome の公式ドキュメントに沿って Nuxt に Fontawesome をインストールします。

Font Awesome のインストール

まずは Font Awesome を利用するために必要なパッケージをインストールします。
必要となるパッケージは次の通りです。

1. Font Awesome の SVG Core パッケージ
2. Font Awesome のアイコンパッケージ
3. vue-fontawesome

# Font Awesome の SVG Core パッケージをインストール
npm install @fortawesome/fontawesome-svg-core

# Font Awesome のアイコンパッケージをインストール
npm install @fortawesome/free-solid-svg-icons
npm install @fortawesome/free-regular-svg-icons
npm install @fortawesome/free-brands-svg-icons

# vue-fontawesome をインストール
npm i --save @fortawesome/vue-fontawesome@latest-3

上記の例では、フリーアイコンのパッケージをすべてインストールしていますが、必要なアイコンパッケージのみでも問題ありません。

Font Awesome をコンポーネントとして利用するプラグインの追加

Font Awesome のパッケージをインストールしたら、 Nuxt で利用するための設定を追加します。
まずは、 app/plugins/fontawesome.ts を以下のコード例のように作成します。

app/plugins/fontawesome.ts

import { library, config } from '@fortawesome/fontawesome-svg-core';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
import { fas } from '@fortawesome/free-solid-svg-icons';
import { fab } from '@fortawesome/free-brands-svg-icons';
import { far } from '@fortawesome/free-regular-svg-icons';

config.autoAddCss = false; // (1)
library.add(fas, fab, far); // (2)

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.component('font-awesome-icon', FontAwesomeIcon); // (3)
});

まず、 config.autoAddCss を false に設定することで、 Font Awesome の CSS を Nuxt が扱うようにします。 ((1) の部分)

次に、 lib.add() で利用するアイコンパッケージを追加します。
複数のアイコンパッケージを利用する場合は、その分だけ .add() の引数に渡します。 ((2) の部分)

最後に、 nuxt.vueApp.component() で　Font Awesome を Vue のコンポーネントとして利用できるようにします。 ((3) の部分)
なお、 Nuxt の Auto-imports が有効になっていれば、 defineNuxtPlugin() は明示的に import 文を書かなくても Nuxt が自動的に import します。

Nuxt の設定に Font Awesome を追加

app/plugins/fontawesome.ts で CSS を Nuxt 側で扱うように設定したので、 nuxt.config.ts で Font Awesome の CSS の設定を追加します。
以下のコード例のように、 defineNuxtConfig() の引数の css プロパティに、 Font Awesome の CSS を追加します。

nuxt.config.ts

  export default defineNuxtConfig({
    // 省略
    css: [
+     '@fortawesome/fontawesome-svg-core/styles.css',
    ],
    // 省略
  })

これで、 Font Awesome を Nuxt で利用できるようになりました。。

app/app.vue

<template>
  <div>
    <font-awesome-icon :icon="['fab', 'font-awesome']" />
    Hello, Font Awesome!
  </div>
</template>

Font Awesome のアイコンが表示できている

PrimeVue のコンポーネントのアイコンに Font Awesome を指定

ここまでの設定では、 Font Awesome は Vue のコンポーネント (<font-awesome-icon>) として利用できるように設定したため、 PrimeVue の コンポーネントの icon プロパティには指定できません。
代わりに PrimeVue のコンポーネントの スロット を使って、アイコンとして利用するコンポーネントを指定することもできます。

以下は Font Awesome の Vue コンポーネントを使って、 PrimeVue のアイコンボタンを表示するコード例です。

app/app.vue

<template>
  <Button rounded>
    <template #icon>
      <font-awesome-icon :icon="['fas', 'download']" />
    </template>
  </Button>
</template>

コード例の実行結果

ローディングなどでアイコンを回転させる場合は、 Font Awesome のコンポーネントに spin プロパティの指定が必要です。

app/app.vue

<template>
  <Button rounded :loading="isLoading" @click="onClick">
    <template #icon>
      <font-awesome-icon :icon="['fas', 'download']" />
    </template>
    <template #loadingicon>
      <font-awesome-icon :icon="['fas', 'spinner']" spin />
    </template>
  </Button>
</template>

ローディングに切り替わった際にアイコンが回転している

他のコンポーネントでも、同様の方法で Font Awesome のアイコンが表示できます。
詳細は PrimeVue の公式ドキュメントで、各コンポーネントの API の項目から、 Slots のセクションなどを参照してください。

まとめ

本記事のまとめは以下の通りです。

• PrimeVue で Font Awesome のアイコンを利用する方法を説明
  • PrimeVue の icon スロットに Font Awesome のアイコンコンポーネントを設定

本記事が PrimeVue で Font Awesome を導入したい方の助けになれば幸いです。

参考文献

https://docs.fontawesome.com/web/use-with/vue/use-with#nuxt
https://primevue.org/button/#api.button.slots