Nuxt+Vuetifyでv-iconが表示されない
Vueを活用する中で、
「Nuxt」
のフレームワークを使用して、
各種APIを作成するなど、
小さな規模から試そうと考え、
公式サイトを見ながら、
導入して起動するまでを試した。
その際、
レイアウトに関しては、
Vuetifyを用いて構築したので、
そのVuetifyのアイコンが、
うまく表示できなかったので、
その対応をメモ。
ちなみに、
Nuxtのバージョンについても、
バージョン２系ではなく、
バージョン３系を導入して、
Nuxtを試している。
個人用の備忘録としてメモを残しておく。
Nuxt.jsの公式サイト
Nuxt.jsに関しては、
こちらのサイトを参考にしました。
リンクをメモ。
Vuetifyの公式サイト
Vuetifyに関しては、
アイコンの使用方法は、
こちらの公式サイトを参考。
リンクをメモ。
https://vuetifyjs.com/en/components/icons/
Nuxt.jsでの構築時のメモ
今回の事象が起きた件に関して、
Nuxt.jsに関して対応したことは、
以下の記事にまとめた。
Nuxt3へのリプレイス時のエラー「Preprocessor dependency “sass” not found.」の対応メモ
Vuetifyのアイコン表示
Vuetifyのアイコンは、
<v-icon icon="mdi-vuetify"></v-icon>のコードで、
のように、
アイコンが表示されます。
しかし、
自分の環境ではうまく表示されない。
Nuxt.jsの調整
調整自体は、
- 必要なライブラリのインストール
- 設定ファイルへのCSSの追加
の２つを行う必要があり、
ライブラリの方は対応していましたが、
今後のために、
どちらの対応もメモ。
ライブラリ導入
npm install @pictogrammers/memory @jamescoyle/vue-iconファイル
nuxt.config.ts設定（対象箇所のみ記載）
export default defineNuxtConfig({
css: [
"@mdi/font/css/materialdesignicons.css",
],
})上記の対応で、
アイコンがうまく表示された。
また、
mdiのアイコン一覧は、
以下を参照。
スキルを使って、就職/転職/副業する時のサイト
プログラミングのスキルなどを、自分なりに高めた上で、
自分のスキルをアピールして就職や転職を行い、年収をあげるか、
副業という形で、年収にプラスアルファの稼ぎを増やすことはできます。
まずはできる範囲で取り組むことで、
少しずつ、経験値も増え、自分のスキルが収入につながるのでおすすめです。
