Nuxt JS - Default icons of Vuetify components will not show when the default assets loading has been turned off in nuxt.config.js

user_4367493 0
Viewed 449

Im using Nuxt V2.15.7 and Vuetify V2.5.5. To optimize the app for production, I have turned off the defaultAssets loading in the nuxt.config.js file.

Vuetify documentation regarding this

vuetify: {
  defaultAssets: false,
}

In each page or component, I have to manually load icons because of this such as

<template>
  <div>
    <v-autocomplete
      v-model="selectedItems"
      outlined
      clearable
      multiple
      :clear-icon="svgMdiWindowClose"
      :items="items"
    />
  </div>
</template>

<script>
import { mdiWindowClose } from '@mdi/js'
export default {
  data() {
    return {
      svgMdiWindowClose: mdiWindowClose,
      items: [],
      selectedItems: [],
    }
  },
}
</script>

In most cases this works fine, but with auto completes, I would have to manually create all slots, click events and so on. Is there a better way to use default icons without affecting lighthouse score of the website? I do not want all icons to be loaded even for this specific page, I just want to import the ones I need, but by default Vuetify componenets reference icons by a string such as mdi-window-close

Is there a way to only import the ones I know that specific component will need?

nuxt.js vuetify.js
1 Answers

I have these settings in my nuxt.config.js and everything is working fine, give it a try:

vuetify: {
  defaultAssets: false,
  treeShake: true,
  icons: {
    iconfont: 'mdiSvg',  // --> this should be enough

    // sideNote: you can also define custom values and have access to them
    // from your app and get rid of the imports in each component

    values:{
       plus: mdiPlus, // you have access to this like $vuetify.icons.values.plus from your component
    }
  }
}
user_120789420
Related