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 se componga de CSS, JavaScript y HTML se puede convertir en una PWA, y ese también es el caso con Vue 3. Aunque Vue 3 con Vite compila a CSS, HTML y JS que podemos convertir a PWA quise darme a la tarea de documentar el proceso de creación. Por favor toma en cuenta que te recomiendo revisar el siguiente artículo para saber lo básico sobre las PWA: https://parzibyte.me/blog/posts/crear-publicar-progressive-web-app-convertir-app-web-pwa/ Veamos entonces cómo convertir una aplicación de Vue 3 con Vite en una PWA. ...

noviembre 5, 2024 · 6 min · 1148 palabras · Parzibyte

Comunicar componentes con Vue 3 y pinia

En Vue 3 se pueden comunicar componentes de padre a hijo con las propiedades (props), defineEmit y defineExpose. Voy a dejar esa comunicación de componentes simples (padre a hijo o viceversa) para otro post, ahora quiero enfocarme en comunicar componentes sin importar lo “separados” que estén, invocando funciones de otros componentes desde cualquier componente. Por ejemplo, vamos a ver cómo comunicar componentes hermanos, nietos, etcétera. Comunicar componentes de Vue 3 sin usar emit ni expose, para ello vamos a usar una store de Pinia. ...

marzo 15, 2024 · 3 min · 529 palabras · Parzibyte

Vue 3 multi idioma con Vue I18n

En el artículo de hoy te enseñaré a usar varios idiomas en tu aplicación web con Vue 3 usando Vue I18n que es un paquete para agregar localización a tus proyectos. Básicamente vas a poder mostrar tu aplicación en distintos idiomas ya sea español, inglés, francés, etcétera, teniendo un archivo de traducciones y mostrando la cadena traducida en tus componentes. Con Vue 3 y Vue I18n vas a poder tener aplicaciones web internacionales. ...

febrero 9, 2024 · 4 min · 816 palabras · Parzibyte

Conectar Angular con impresora térmica - Imprimir tickets

El día de hoy vamos a ver cómo imprimir tickets, recibos o facturas en una impresora térmica desde Angular usando el lenguaje de programación TypeScript y el lenguaje ESC POS para la impresora. Básicamente vamos a ver cómo comunicar Angular con una thermal printer, pos printer o impresora POS (Epson, Xprinter, etcétera) e imprimir texto, darle formato, imprimir códigos QR, códigos de barras, imágenes, acentos y varias cosas que permitirán crear tickets desde Angular. Vamos a usar un plugin gratuito y un conector en TypeScript que acabo de crear. Por cierto, el plugin también nos permitirá cortar el papel, abrir el cajón de dinero, definir caracteres personalizados e imprimir en red. Nota: esto funciona en Windows, Linux, Raspberry Pi y con otro plugin podría incluso funcionar en Android con impresoras Bluetooth. ...

diciembre 1, 2022 · 4 min · 754 palabras · Parzibyte

Lista de tareas pendientes con Angular - ToDo list

En este post te mostraré un proyecto muy sencillo creado con Angular. Se trata de una lista de tareas pendientes, ToDo list, to-do list o como sea que le llames. Vamos a usar el framework Angular y el lenguaje de programación TypeScript para crear una lista de tareas por hacer. Tendrá las opciones de agregar, eliminar, editar y marcar como terminada. Por cierto, en este caso vamos a usar localStorage para almacenar la lista pero bien podrías usar una API con un lenguaje como PHP o cualquier otra cosa. Para tener el proyecto simple me he enfocado a no usar frameworks CSS, así que solo será HTML plano. De todos modos lo que importa es cómo vamos a manejar la lista de tareas pendientes con Angular. ...

septiembre 7, 2021 · 6 min · 1082 palabras · Parzibyte

Angular - Simple binding en Input

En este post te mostraré cómo ligar un input con una variable de Angular, de manera que si la variable cambia en el input, se cambie en los demás lugares. Y de manera similar, si la variable cambia desde otro lugar se refresque en el input. Todo esto será con Angular y con el two way binding. Por cierto, esto que te enseñaré será muy simple por si solo necesitas un input. En caso de que quieras algo más avanzado mira los formularios con Angular. ...

septiembre 2, 2021 · 2 min · 404 palabras · Parzibyte

Enviar JSON de Angular a Node: ejemplo

En este post te mostraré, de manera simple, cómo enviar datos codificados como JSON desde Angular a un servidor con node. Vamos a usar express en el lado del servidor; y del lado del cliente simplemente fetch. ...

junio 1, 2020 · 2 min · 393 palabras · Parzibyte

Obtener archivos de input file con Angular

En este post te mostraré cómo obtener los archivos seleccionados en un input de tipo file usando Angular. Vamos a obtener una referencia al elemento del DOM y luego acceder a la propiedad files. ...

mayo 26, 2020 · 1 min · 212 palabras · Parzibyte

Ejemplo de una clase en TypeScript

En este post te mostraré un ejemplo de clase en TypeScript en donde vamos a definir métodos, propiedades y constructores. También veremos un ejemplo de la sobrecarga de constructores en TypeScript. ...

febrero 4, 2020 · 2 min · 379 palabras · Parzibyte

Crear proyecto de Vue con TypeScript

En este post te mostraré cómo crear un proyecto de Vue usando el lenguaje de programación TypeScript en lugar de JavaScript. Como sabemos (en términos simples) TS es como JS mejorado; sobre todo por eso de los tipos (tipado fuerte) que previene errores como sumar números y cadenas, etcétera. ...

enero 28, 2020 · 4 min · 771 palabras · Parzibyte