Vuetify agrega diseños y componentes de Material Design a nuestras aplicaciones creadas con Vue. Para varios casos necesitamos los iconos de Material Design así como la fuente Roboto de Google.
Hoy te mostraré cómo tener los iconos y la fuente de manera offline, fuera de línea, local, o como le llames. De este modo nuestra aplicación no dependerá de ninguna conexión a internet, cosa que viene genial cuando vamos a crear una app local.
Te cuento que yo seguí este tutorial: https://vuetifyjs.com/en/features/icon-fonts/#usage
Yo uso los materialdesignicons, unos iconos que combinan los de Google junto con unos creados por la comunidad. Así que en el index.html removí la línea que dice:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
Luego instalé los iconos con:
npm install @mdi/font -D
Y ya en src/plugins/vuetify
quedó así:
import '@mdi/font/css/materialdesignicons.css' // Ensure you are using css-loader
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
Vue.use(Vuetify)
export default new Vuetify({
icons: {
iconfont: 'mdi', // default - only for display purposes
},
})
Me basé de: https://stackoverflow.com/a/58448107/5032550
Removí en el index.html la siguiente línea:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
Luego instalé las fuentes:
npm install --save typeface-roboto
Y ya en App.vue
agregué el estilo:
<style lang="sass">
@import '../node_modules/typeface-roboto/index.css'
</style>
Puede que necesites agregar las rutas relativas, para ello en vue.config.js agrega el publicPath
así:
module.exports = {
// En realidad debería ser "./" pero al compilar se remueve el ./ así que mejor se pone doble para que solo
// se remueva el primero. Gracias a: https://github.com/vuejs/vue-cli/issues/1623#issuecomment-729086789
publicPath: process.env.NODE_ENV === 'production' ? '././' : './',
transpileDependencies: [
'vuetify'
]
}
Simplemente ejecuta npm run build
y ya todo estará offline. Los cambios hechos al código se pueden observar claramente en el siguiente commit:
Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…
En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…
En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…
Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…
En este artículo te voy a enseñar cómo usar un "top level await" esperando a…
Ayer estaba editando unos archivos que son servidos con el servidor Apache y al visitarlos…
Esta web usa cookies.