Vuetify-module: Build for offline use

[MartinMuzatko]

Is your feature request related to a problem?
I would like to offer my app as offline-working webapp. This requires me to have the icons and fonts load locally.

Describe the solution you'd like
make the module configurable for the online resources to use modules instead.

Describe alternatives you've considered
set up vuetify manually again instead of using the module

[kevinmarrec]

@MartinMuzatko You can already do it, it is supposed to be handle by the user if you need to do implement icons/fonts on your own.

You just have to set https://github.com/nuxt-community/vuetify-module#defaultassets to false as mentionned in the option description (last line).

There's also some tips still in the option description

defaultAssets.font automatically adds the Roboto font stylesheet from official google fonts to load the font with font-display: swap. You can disable it if you plan to use different font or manually handle font loading.
defaultAssets.icons automatically adds the icons stylesheet from a CDN to load all the icons (not optimized for production).

This module uses online resources by default so that users can directly play with the Vuetify framework. You can skip that with the option, and implement your own local font & icons through Nuxt configuration (probably combining assets / head in nuxt.config.js, etc..)

For icons you can also have a look for https://vuetifyjs.com/en/customization/icons#install-material-design-icons-js-svg, it works well to only bundle some Material SVG icons :)

And if you're wondering how to use fonts locally :
https://answers.themler.io/articles/9064/how-to-use-google-fonts-locally

There are plenty of different fonts and plenty of icons fonts existing, so such feature request is out of the scope of the module.

EDIT : Would you like an offline section in documentation ? Please let me know :smile:

[MartinMuzatko]

thank you a lot for the quick response!
I will try that :)

Yes a little documentation on how to make it offline capable would be great :)

[kevinmarrec]

@MartinMuzatko I updated docs : https://github.com/nuxt-community/vuetify-module#offline-applications 😉

[waspinator]

Thanks @kevinmarrec I was able to get fonts to work, but using the icons listed as default (https://vuetifyjs.com/en/customization/icons/#install-material-design-icons) don't work correctly. I downloaded the icon package from https://materialdesignicons.com, copied it to static directory, and added the included css file to the Global CSS configuration section of nuxt.config.js

  css: [
       '@/static/fonts/material-design-icons/css/materialdesignicons.min.css'
   ]

But the icon names aren't the same as what are in Vuetify examples. For example to get a map marker I need to use mdi-map-marker instead of place.

To get the icon names in the documentation to work I had to add material icons (https://fonts.googleapis.com/css?family=Material+Icons). I downloaded the linked font and added the css to get things working.