🚴

Nuxt3で fontawesomeを導入 (2022/03/13)

2022/03/13に公開

TypeScript

Font Awesome

Nuxt 3

tech

Itsuoです。ユアマイスターのエンジニアをやっています。

Nuxt3で Fontawesomeを使用しようと思ったら少しばかり手こずったので、書いていきます。
（当然現在は β版なので変更の可能性はあります）

当然 @nuxtjs/fontawesomeは使えませんので　今回は自分で用意していきます。

導入

まずはこちらに沿って必要ライブラリを入れていきます。

ライブラリインストール

$ npm i --save @fortawesome/fontawesome-svg-core
$ npm i --save @fortawesome/free-solid-svg-icons

Vue 3.xに対しては現在 prerelease版があるようです

$ npm i --save @fortawesome/vue-fontawesome@prerelease

プラグインとして導入する

今回は大体こちら(https://github.com/FortAwesome/vue-fontawesome#nuxtjs)を踏襲しながらpluginsフォルダ内にFontawesome.tsを作成して導入します。

plugins/Fontawesome.ts

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

export default defineNuxtPlugin((nuxtApp) => {
// This is important, we are going to let Nuxt.js worry about the CSS
  config.autoAddCss = false
// You can add your icons directly in this plugin. See other examples for how you
// can add other styles or just individual icons.
  library.add(fas)
  nuxtApp.vueApp.component('font-awesome-icon', FontAwesomeIcon)
})

plugins内のトップレベルのファイルは自動で読み込んでくれるのでこれで完了。

nuxt.conf.tsに以下を追加します。

nuxt.config.ts

css: [
  '@fortawesome/fontawesome-svg-core/styles.css'
]

app.vueにコンポーネントを入れて

app.vue

<template>
   <font-awesome-icon icon="coffee" />
</template>

npm run dev

おーアイコン表示された―
で終わると思ったのですが、そうはうまくいきませんでした。

ESモジュール問題

bulidして npm run startしてみると大量のエラーが発生します。

Named export 'config' not found. The requested module '@fortawesome/fontawesome-svg-core' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from '@fortawesome/fontawesome-svg-core';
const { config, library } = pkg;

  at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21)  
  at async ModuleJob.run (node:internal/modules/esm/module_job:181:5)  
  at async Promise.all (index 0)  
  at async ESMLoader.import (node:internal/modules/esm/loader:281:24)  
  at async file://./.output/server/chunks/app/render.mjs:523:24  
  at async renderMiddleware (file://./.output/server/chunks/app/render.mjs:578:20)  
  at async handle (file://./.output/server/node_modules/h3/dist/index.mjs:268:19)

ああ、またモジュールの話か、、、と最近結構辟易してます。
Commonモジュールもimportできるようになったけど、全部じゃないよねってやつですね。

確かに @fontawesome/fontawesome-svg-coreフォルダ内には
index.es.js
index.js
という２つのファイルがあります。
ここいら辺が原因なのでしょう

(詳しいことは以下で説明されていますので割愛)
http://v3.nuxtjs.org/concepts/esm

対処法は

以下を追加します

nuxt.config.ts

  build: {
    transpile: [
      '@fortawesome/fontawesome-svg-core',
      '@fortawesome/free-solid-svg-icons',
      '@fortawesome/vue-fontawesome',
    ],
  },

これで buildもエラーが出なくなりました。

CommonモジュールとESモジュールの話は結構根深い論争ですよね。
（昔）ActionScript使いとしては ESだよねって感じですが。。。
まあ古いリソースをどうする？って話なんでしょうね。（あんまり深堀りしていないです）

本編とは違い話ですが、Nuxt3はまだまだベータなので updateするごとに何かしらERRやWARNがでてちと面倒くさいですな。

導入

ライブラリインストール

プラグインとして導入する

ESモジュール問題

Discussion