Vuejs

En este post de programación con el framework Vue te mostraré cómo mostrar notificaciones, avisos o toasts usando la librería llamada vue-toasted que nos permitirá mostrar pequeños cuadros como notificaciones. ...

En este post te mostraré un juego que he programado recientemente. Se trata de El ahorcado o hangman, en su versión web programado con JavaScript; totalmente gratuito y open source. El juego está escrito con el lenguaje JavaScript, usando Vue.js y Bootstrap. Cuenta con: Gestión de palabras. Puedes agregar y eliminar palabras para jugar al ahorcado Elección de palabra aleatoria: cada vez que juegas se selecciona una palabra aleatoria del banco de palabras que el usuario ha registrado Botones con letras para adivinar la palabra, mismos que se deshabilitan una vez que se ha intentado esa letra Imagen del ahorcado, misma que cambia con el número de intentos Juego totalmente responsivo (adaptable a teléfonos, tabletas, etcétera) A continuación te mostraré cómo está hecho, en dónde puedes descargarlo, etcétera. Pues es un juego open source y gratuito que puedes modificar sin problemas. ...

En este post te mostraré el juego de Conecta 4 programado en JavaScript con HTML y Vue, con estilos de Bootstrap. Es el juego de Conecta 4 pero versión web con opción jugador contra jugador, así como jugador contra CPU que usa una pequeña inteligencia artificial. A lo largo del post te mostraré cómo funciona el juego, qué tecnologías he usado, estilos, etcétera. También te mostraré cómo descargar el código fuente, pues el juego es totalmente gratuito y open source. Finalmente te dejaré una demostración para jugar conecta 4 en línea. ...

En este post te mostraré cómo hacer un autocompletado, autocomplete, auto completado o como le llames usando Bootstrap, Vue y una API. De modo que al final (por si no sabes lo que es un autocompletado) se cuente con una caja en donde se complete mientras el usuario escribe, así como la búsqueda de Google. Te mostraré dos ejemplos, uno en donde los resultados se completan localmente, y otro en donde se hace una búsqueda para traer los resultados de la API en tiempo real. Voy a dejar el código completo al final. Nota: si buscas un autocompletado con JavaScript puro, mira Awesomplete. ...

Hoy te voy a presentar un software web programado con Laravel (en el lenguaje PHP, usando un poco de JavaScript) y Vue.js que gestiona un inventario de artículos; permite tomar fotos de los mismos, agregar áreas, etcétera. No es un software terminado ni listo para usarse en producción, de hecho sirve más para aprender sobre los conceptos de Laravel o para tomarlo como punto de partida. Al final del post dejaré la historia del mismo, que se resume a que era un software que ya no terminé pero que no me gustaría dejarlo en el olvido siendo que puede servirle a alguien más. Nota: en el post expongo los fragmentos de código más importantes, pero al final del post también dejaré el enlace al repositorio de GitHub en donde puedes explorar o descargar el código como tú gustes. ...

En este post veremos cómo definir reglas dinámicas en Vee Validate (un validador de formularios de Vue). Es decir, definir el valor máximo, valor mínimo, etcétera de forma dinámica, esto es, a través de una variable o expresión. Nota: esto aplica para la versión 3 de Vee Validate. ...

Buefy es un paquete de componentes que combinan BulmaCSS y Vue.js. Entre esos componentes encontramos el b-datepicker que no es más que un seleccionador de fechas, calendario o datepicker. Por defecto viene en inglés, pero provee la manera de especificar los meses y días en español, cosa que te enseñaré hoy: cómo poner el datepicker de Buefy en español. ...

En posts anteriores mostré la manera de eliminar las referencias de arreglos en JavaScript usando slice o el operador de propagación. Sin embargo, con el framework Vue las cosas son un poco distintas debido a su reactividad. Hoy te mostraré cómo eliminar la referencia de un arreglo en Vue o, en otras palabras, cómo realizar una copia de un arreglo en Vue. Este error me dio bastantes dolores de cabeza, y siempre me los ha dado. Al fin encontré la solución y vengo a compartirla. ...

Como sabemos, las plantillas de Vue no permiten colocar contenido HTML, y cualquier cadena HTML que se coloque será saneada para evitar posibles ataques, XSS entre ellos. Sin embargo Vue provee una manera fácil y sencilla de inyectar HTML “inseguro” en un componente o vista, y justamente es lo que veremos en este post. ...

Los servicios o services de una aplicación web son aquellos que proveen funcionalidades de una entidad en específico; tuvieron una popularidad con AngularJS y Angular, pero en Vue tal cosa no existe. En este post te mostraré un ejemplo de un servicio de Vue, que si bien no es obligatorio, es totalmente válido. ...