En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly (con Golang) en Vue 3 con Vite y Pinia. Voy a explicar cómo comunicar las funciones de WASM con JavaScript y viceversa, dejando mucho código del lado de Golang con WASM. Toma en cuenta que es una documentación muy específica a mi modo de trabajo. No esperes un tutorial paso a paso. ...
Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores que quiero documentar para ayudar a otros usuarios que experimenten las mismas fallas. Cabe mencionar que mi entorno de trabajo es Comlink con WebAssembly, Vue 3, Vite y Pinia. Varias de esas tecnologías no afectan al uso de Comlink pero me parece importante mencionarlas. Estos errores, en un contexto de JavaScript puro son fáciles de solucionar. El Maximum call stack size exceeded normalmente es causado porque una función recursiva se ha salido de control, y el cannot read property of undefined es porque una variable es undefined y tratamos de leer una propiedad. Sin embargo, con Comlink los errores son distintos. ...
En este artículo te voy a enseñar cómo usar un “top level await” esperando a que una promesa se resuelva dentro de una store de Pinia con Vue 3. Para usar await con Pinia debes esperar a que la promesa se resuelva fuera de la definición de la store. ...
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. ...
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. ...
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. ...
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. ...
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. ...
Al usar el Vue Router con Vue 3 podemos especificar el tipo de historial que las rutas siguen. Por defecto, se usa el modo de historial de HTML 5 con createWebHistory pero también se puede seguir usando el hash, hashtag, numeral, gato o como le llames para tener una SPA con Vue 3. ...