[Vuejs]-How to make all resources local?

by

1👍

This is a valid question, not sure why the comments state otherwise, it’s just not very clearly formulated. He is asking how he could load fonts & css locally.
Vuetify will automatically attempt to fetch fonts & icons from a CDN (which you see if you click on the request & check the request URL).
You have to install the icons&the fonts locally from NPM.
Here is how you install the icons locally.

Installing icons:
npm install material-design-icons

in nuxt.config.js
Add the css globally

 css : [
       '@mdi/font/css/materialdesignicons.min.css'
    ],

 buildModules: [
      '@nuxtjs/vuetify',
      ['@nuxtjs/vuetify', { iconfont: 'mdi' }]
    ]

As for the fonts, you will need to use a similar approach if you want Vuetify to load the default fonts locally. I personally use nuxt-webfont-loader, however that does indeed use a CDN but does it async. You could try to experiment with the vuetify settings, for example by disabling the default ones and adding it to the assets folder which is common in Nuxt:

vuetify: {
  treeShake: true,
  defaultAssets: {
    font: false,
    icons: 'mdi',
    },
}

Leave a comment