Vue

Hoy voy a enseñarte cómo convertir cualquier aplicación web en una PWA o Progressive Web App. Tú puedes programar en cualquier lenguaje y Framework, ya que las PWA no están atadas a algo más allá de JavaScript. Así que mientras tu app conste de archivos del lado del cliente, podrás convertirla en PWA. Y con estos archivos me refiero a CSS, JS, HTML, imágenes, etcétera. Te repito que para crear una PWA no necesitas usar un framework específico, así que puedes usar JavaScript puro, Angular, Vue, React, jQuery (bueno, jQuery no, ya es obsoleto) y cualquier otro que genere JavaScript al final. ...

En este corto post te mostraré cómo evitar que los archivos source map sean creados al compilar una app de Vue ejecutando npm run build. Si has compilado tu aplicación web habrás notado que dentro de dist existen carpetas de js y css que dentro tienen archivos .js.map o .css.map; y si quieres que no se generen hoy te mostraré cómo hacerlo. ...

Hoy voy a enseñarte a usar chart.js (librería para crear gráficas en la web) con Vue.js cuando se programa en Webpack con NPM. Te aviso desde ahora que probablemente esta no sea la manera de vue, es decir, lo haremos como lo haríamos sin usar el framework, pero esto me ha funcionado y te funcionará a ti para no tener tantos problemas al integrar Chart.js con Vue. Nota: primero te invito a familiarizarte con chart.js, ya que aquí solo te enseñaré a usarlo con Vue a través de webpack con npm. Nota 2: en febrero de 2023 intenté usar este método y si instalas la última versión tal vez te aparezca un error. Para evitarlo, en el siguiente paso en lugar de usar npm install --save chart.js usa npm install --save chart.js@3.2.1, yo pongo la 3.2.1 porque es la última que me ha funcionado, pero me imagino que mientras sea menor a la 4 todo debería funcionar. La guía está en: https://www.chartjs.org/docs/latest/migration/v4-migration.html ...

En este post aprenderás a mostrar un modal personalizado usando Bulma a través de Buefy. De este modo podrás mostrar una ventana superpuesta o lo que se conoce como un modal. Por cierto, vamos a usar componentes y propiedades de los mismos para separar los conceptos. Te invito a repasar la comunicación entre componentes y cómo usar Buefy. ...

Hoy te mostraré cómo usar la función debounce con el framework Vue y obviamente el lenguaje de programación JavaScript. Implementar esta función es un poco confuso debido a la definición de métodos dentro de los componentes de Vue y por la confusión que genera la función, ya que la misma genera otra función y solo debe ser definida una vez al inicio. Pero bueno, vamos por partes. Verás que a partir de esto podrás usar debounce en tus componentes de Vue. ...

En este post de programación con JavaScript y Vue te enseñaré a importar una librería de NPM a un componente de Vue. Si bien esto es algo muy simple, en ocasiones podemos olvidarnos o perdernos. Por ello es que en el post de hoy te enseñaré a importar un paquete de NPM desde un componente de Vue y usarlo dentro de ese componente a través de require. Estoy suponiendo que usas la Vue CLI con Webpack, pero incluso si no lo haces, esto podría darte una ayuda. ...

En este post de programación con el framework Vue o Vue.js te mostraré cómo acceder a data cuando regresamos los datos o el objeto data de nuestro componente. Esto es necesario porque en ocasiones necesitamos acceder a los datos de Vue desde la definición. Al final esto no tiene tanto que ver con Vue.js, sino con JavaScript. Pero incluso así en ocasiones podemos olvidar lo que sucede con los objetos anónimos. ...

Hoy veremos algo muy simple en JS: cómo agregar un elemento a un arreglo ya sea para agregarlo al inicio o al final. Esto lo vamos a hacer con JavaScript así que puede que funcione para los frameworks como Vue, React, Angular o jQuery. Recuerda que un array en JavaScript puede tener elementos mixtos y de cualquier tipo. Por otro lado puedes agregar elementos sin límite. Veamos entonces cómo agregar un elemento a un array en JavaScript. ...

En este artículo te mostraré un software para recetas que es gratuito y open source. Esto también puede ser conocido como recetario online, libro de recetas, libro de recetas en línea, alternativa simple y open source a kiwilimón, libro de cocina online, programa para recetas, programa para gestionar recetas, sitio de cocina, etcétera. Lo que te muestro aquí está hecho con Vue y PHP usando MySQL como base de datos. Permite: Registrar recetas con foto, nombre, porciones, ingredientes y pasos Los ingredientes cambian dependiendo de las porciones de manera automática Listar recetas en tabla para editarlas y eliminarlas, es decir, gestionarlas Mostrar recetario o libro de cocina en línea con opción de búsqueda Imprimir receta de manera amigable Ver detalles de receta con cajas de texto para marcar los ingredientes y pasos completados Modificar el software a tus necesidades ya que es open source y gratuito Oh, y si te lo preguntas, decidí crearlo porque en una ocasión busqué una receta y el sitio en donde la encontré no me daba la opción de imprimirlo. Vamos allá. ...

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. ...