nuxt
nuxt copied to clipboard
Missing Material Icons when offline with @nuxt/pwa module
When adding the @nuxt/pwa module and accessing the project offline the Material Icons are missing.
The problem is that the icons font is loaded from the Google Fonts API by adding a link
property to the head
object on the nuxt.config.js
file.
The favicon.ico
is also overriding the icon options from the pwa
module. It would be nice to explicit this on the docs.
Workaround for the icons:
Remove the link
prop for the Google API font from the head
object;
Install Material Icons from NPM.
yarn add material-design-icons
Add the font css
to nuxt.config.js
css: [
'material-design-icons/iconfont/material-icons.css',
'~/assets/style/app.styl'
]
Workaround for the favicon
:
Just remove the line for the favicon
from the nuxt.config.js.
For me this is working, but some errors like:
nuxt:render Rendering url /node_modules/vuetify/src/stylus/components/_select.css.map +668ms { statusCode: 404, path: '/node_modules/vuetify/src/stylus/components/_select.css.map', message: 'This page could not be found' }
are after change comming ...
This vuetify module doesnt have the map file anymore ...
After fresh installation i have always this error:
nuxt:render Rendering url /_nuxt/a25bbe8f4a3610ad80ca.hot-update.json +0ms { statusCode: 404, path: '/_nuxt/a25bbe8f4a3610ad80ca.hot-update.json', message: 'This page could not be found' }