Nuxt+Vuetifyでv-iconが表示されない

Vueを活用する中で、

「Nuxt」

のフレームワークを使用して、

各種APIを作成するなど、

小さな規模から試そうと考え、

公式サイトを見ながら、

導入して起動するまでを試した。

その際、

レイアウトに関しては、

Vuetifyを用いて構築したので、

そのVuetifyのアイコンが、

うまく表示できなかったので、

その対応をメモ。

ちなみに、

Nuxtのバージョンについても、

バージョン2系ではなく、

バージョン3系を導入して、

Nuxtを試している。

個人用の備忘録としてメモを残しておく。

Nuxt.jsの公式サイト

Nuxt.jsに関しては、

こちらのサイトを参考にしました。

リンクをメモ。

Vuetifyの公式サイト

Vuetifyに関しては、

アイコンの使用方法は、

こちらの公式サイトを参考。

リンクをメモ。

Nuxt.jsでの構築時のメモ

今回の事象が起きた件に関して、

Nuxt.jsに関して対応したことは、

以下の記事にまとめた。

Nuxt3のインストールからルーティングの導入までのメモ

Vuetifyのアイコン表示

Vuetifyのアイコンは、

<v-icon icon="mdi-vuetify"></v-icon>

のコードで、

のように、

アイコンが表示されます。

しかし、

自分の環境ではうまく表示されない。

Nuxt.jsの調整

調整自体は、

  • 必要なライブラリのインストール
  • 設定ファイルへのCSSの追加

の2つを行う必要があり、

ライブラリの方は対応していましたが、

今後のために、

どちらの対応もメモ。

ライブラリ導入

npm install @pictogrammers/memory @jamescoyle/vue-icon

ファイル

nuxt.config.ts

設定(対象箇所のみ記載)

export default defineNuxtConfig({
  css: [
    "@mdi/font/css/materialdesignicons.css",
  ],
})

上記の対応で、

アイコンがうまく表示された。

また、

mdiのアイコン一覧は、

以下を参照。

スキルを使って、就職/転職/副業する時のサイト

プログラミングのスキルなどを、自分なりに高めた上で、

自分のスキルをアピールして就職や転職を行い、年収をあげるか、

副業という形で、年収にプラスアルファの稼ぎを増やすことはできます。

まずはできる範囲で取り組むことで、

少しずつ、経験値も増え、自分のスキルが収入につながるのでおすすめです。

おすすめ書籍

スポンサー

人気記事

おすすめ記事