🐡

Nuxt 3 + Quasar で、Material Iconsが表示されない

2022/11/28に公開

わかってしまえば、なんてことないことだったんですけど、そもそもフロントの環境構築がわからない状態だったので、だいぶハマりました。。

まずはセットアップ

上記でやっていることはざっくり、

$ npx nuxi init nuxt3-quasar
$ npm install quasar
plugins/quasar.tsで、NuxtのプラグインとしてQuasarセットアップ
nuxt.config.tsで、QuasarのCSS読み込み

です。

これでQuasarは使えるようになったのですが、マテリアルアイコンが表示されません。
ヘッダー左の menu と表示されている部分です。

QuasarはデフォルトでMaterial Icons使えるはずでは？と思っていたので、結構悩みました。
過去にVue CLIでセットアップしたこともあり、デフォで使えるものという認識が強かったです。

@quasar/extrasを入れる。

あとあと確認してみると、ドキュメントのインストール方法にちゃんと載ってました。

$ npm install quasar @quasar/extras

Material Iconsなどはこっちに入ってるみたいですね。
これも、Vueを使う場合であれば良いのですが、Nuxtで使う場合はそもそもインストール方法どうなるんだ？とそっちから調べてしまったので遠回りしてしまいましたね。

$ npm install @quasar/extras

nuxt.config.ts

export default defineNuxtConfig({
	css: [
		'quasar/dist/quasar.prod.css',
+		'@quasar/extras/material-icons/material-icons.css'
	],
	ssr: false,
})

追加したcssはドキュメントのこの部分です。

main.js

// Import icon libraries
import '@quasar/extras/material-icons/material-icons.css'