VueJS

Vuetify con iconos y fuentes sin internet

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

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
    },
})

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:

<style lang="sass">
@import '../node_modules/typeface-roboto/index.css'
</style>

Notas adicionales

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'
    ]
}

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 aquí para ayudarte 🤝💻


Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.
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/

Entradas recientes

Creador de credenciales web – Aplicación gratuita

Hoy te voy a presentar un creador de credenciales que acabo de programar y que…

1 semana hace

Desplegar PWA creada con Vue 3, Vite y SQLite3 en Apache

Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…

2 semanas hace

Arquitectura para wasm con Go, Vue 3, Pinia y Vite

En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…

2 semanas hace

Vue 3 y Vite: crear PWA (Progressive Web App)

En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…

2 semanas hace

Errores de Comlink y algunas soluciones

Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…

2 semanas hace

Esperar promesa para inicializar Store de Pinia con Vue 3

En este artículo te voy a enseñar cómo usar un "top level await" esperando a…

2 semanas hace

Esta web usa cookies.