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.

Iconos offline

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í:

Para las fuentes

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:

Notas adicionales

Puede que necesites agregar las rutas relativas, para ello en vue.config.js agrega el publicPath así:

Preparando para producción

Simplemente ejecuta npm run build y ya todo estará offline. Los cambios hechos al código se pueden observar claramente en el siguiente commit:

https://github.com/parzibyte/horarios_rutas_transporte_publico/commit/2b8f67af7cf10ead3cbd87a5b03b4211998a7093


Estoy disponible para trabajar en tu proyecto o realizar tu tarea pendiente, no dudes en ponerte en contacto conmigo.
Si el post fue de tu agrado muestra tu apoyo compartiéndolo, suscribiéndote al blog, siguiéndome o realizando una donación.

Suscribir por correo

Ingresa tu correo y recibirás mis últimas entradas sobre programación, open source, bases de datos y todo lo relacionado con informática

Únete a otros 2,601 suscriptores


parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

0 Comentarios

Deja un comentario

Marcador de posición del avatar

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

A %d blogueros les gusta esto: