ロゴテキスト ロゴ

    NuxtのVuetifyでdefaultAssetsをなくしてMaterial Designのリソースを読み込まなくする

    NuxtのVuetifyでdefaultAssetsをなくしてMaterial Designのリソースを読み込まなくする

    Vuetifyはデフォルトの設定でMaterial Designのリソースを読み込む設定がされています。


    これがSEOという観点から見ると読み込みに結構時間を要します

    マテリアルデザインのcssやfontは読み込み時間が長い


    マテリアルデザインの機能を使っている場合は致し方ないところもありますが、 もし使っていない場合はオフにする事でページの読み込み速度が速くなります。



    マテリアルデザインの読み込みを設定する defaultAssets をオフにする方法について記載します。

    検証した環境

    1 nuxt 2.14.3
    2 @nuxtjs/vuetify 1.11.2

    defaultAssetsをオフにする

    結論 defaultAssetsfalse を設定すればオフに出来ます

    そのまんまですね。笑

    nuxt.config.js
    export default {
      vuetify: {
        defaultAssets: false,
      }


    defaultAssetsではフォントとiconを設定する事が出来て、もしどちらか片方をオフにする場合はオフにしたい項目に false を設定すればOK!

    nuxt.config.js
    export default {
      vuetify: {
        defaultAssets: {
          font: false,
          icons: false
        }
      }



    注意点としては当然ながらVuetifyがこれらのアイコンを使っているコンポーネントがあること。 闇雲にオフにするとどこかに影響が出ている可能性があります。


    私の環境だとページャーの前後の記事に移動するためのアイコンがなくなってました。。😅笑

    ページャーの前後の記事へのアイコンがなくなった

    デフォルト値について(余談)

    defaultAssets のデフォルト値は以下のようになっています

    nuxt.config.js
    export default {
      vuetify: {
        defaultAssets: {
          font: {
            family: 'Roboto'
          },
          icons: 'mdi'
        }
      }


    iconsにはこちらの値が設定出来ます、Font Awesomeも選択出来るんですね。

    ValueIcons
    'mdi' (default)Material Designs Icons (CDN)
    'md'Material Icons (CDN)
    'fa'Font Awesome 5 (CDN)
    'fa4'Font Awesome 4 (CDN)
    falseDisable auto add of the icons stylesheet
    プロフィールの背景画像 プロフィール画像
    Yuki Takara
    都内でフリーランスのエンジニアをやってます。フロントとアプリ開発メインに幅広くやってます。