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

Iconos material design con Vue 3

En este post vamos a ver cómo usar los iconos de Material design en nuestros proyectos web al usar Vue 3. Te voy a mostrar una manera en la que al final vas a incluir en tu proyecto solo los iconos que has usado, haciendo tu software mucho más ligero. Para tener los Material design icons en Vue 3 vamos a usar el paquete vue-material-design-icons que a su vez es simplemente una colección de componentes de Vue que usan los Material Design Icons. ...

febrero 9, 2024 · 2 min · 331 palabras · Parzibyte

Tailwind CSS con Vue 3 y Vite

En este post te voy a enseñar a agregar Tailwind CSS a un proyecto de Vue 3. Básicamente es seguir la guía oficial, pero con unos pasos extra desde mi experiencia. ...

enero 25, 2024 · 2 min · 267 palabras · Parzibyte

Vue router - Navegar a componente

En este corto post sobre Vue y el enrutador del mismo te mostraré cómo ir de un componente a otro de manera programada, es decir, desde el código. De este modo podrás navegar de manera programada con el Vue Router al hacer clic en algún botón o en cualquier acción, pues lo harás por medio del código de JavaScript o TypeScript. ...

julio 17, 2021 · 2 min · 336 palabras · Parzibyte

Selector de color con Vue (color picker)

En este post te mostraré un seleccionador de colores o input de tipo color (también conocido como color picker) que me gustó para su uso con el framework Vue. El picker del que hablo se llama vue-color y permite usar varios selectores de color. ...

junio 28, 2021 · 2 min · 333 palabras · Parzibyte

Propiedades de componentes en Vue.js

En este post te hablaré un poco sobre las props o propiedades de componentes en Vue.js. Las propiedades permiten pasar datos a un componente hijo, mejorando así la comunicación. Gracias a las props en Vue así como $emit y on, podemos comunicar componentes de manera fácil. ...

enero 27, 2021 · 2 min · 353 palabras · Parzibyte

Vue CLI congelada en 40 % al ejecutar npm run serve

En este post te daré la posible solución a un problema que se presenta al usar Node.js, Vue, la Vue CLI y ejecutar el comando npm run serve. En mi caso se quedaba al 40 % y no avanzaba más allá de eso. WAIT Compiling… 40% building 1/2 modules 1 active ...

enero 23, 2021 · 1 min · 205 palabras · Parzibyte

Componente bombilla (foco) en Fritzing

Hoy te mostraré cómo agregar un bombillo, foco, linterna o como lo conozcas a Fritzing. Es decir, te enseñaré a conseguir el componente de Bombilla para Fritzing. ...

diciembre 12, 2020 · 1 min · 138 palabras · Parzibyte

Componente RFID-RC522 para Fritzing (lector de tarjetas)

En este post te mostraré cómo agregar el componente lector de tarjetas RFID llamado RFID-RC522 al software Fritzing para poder hacer diseños con el mismo. A veces este lector también aparece cuando se busca “MFRC522”. ...

noviembre 18, 2020 · 1 min · 124 palabras · Parzibyte

Angular - Aplicación para el clima con API

Hoy te voy a mostrar un sistema web hecho con Angular. Se trata de una app web que muestra el clima a través de una API. Lo que hace este software es obtener la ubicación del usuario a través de su IP y obtener el pronóstico del tiempo usando otra API a partir de la latitud y longitud obtenidas anteriormente. Verás que está implementado de una manera muy sencilla utilizando componentes y servicios. Al final vamos a tener una app web que muestra: Ubicación del usuario con nombre de la ciudad y país Reloj Reporte del clima para los próximos 5 días usando imágenes La temperatura máxima y mínima esperada para determinado día Además, la aplicación web será responsiva pues vamos a usar Bootstrap. Al final del post dejaré el enlace del repositorio para que puedas explorar el código fuente y descargarlo si es necesario. Como lo dije, utiliza Angular. ...

junio 28, 2020 · 10 min · 2102 palabras · Parzibyte