Es muy común tener que trabajar con documentos PDF en nuestras aplicaciones. En Laravel podemos generar PDFs haciendo uso de librerías como DOMPDF para después retornarlos de alguna forma al usuario. Haciendo uso de un plugin de Vue.js llamado vue-pdf podemos renderizar documentos PDF en el navegador de forma muy sencilla.
Una de las características más interesantes de la versión 3 de Vue CLI es Vue UI, una interfaz gráfica que permite crear, actualizar y administrar cada aspecto de nuestros proyectos. En este tutorial exploraremos esta nueva característica y aprenderemos a generar nuestros proyectos directamente desde dicha interfaz.
Axios es un cliente HTTP basado en promesas que funciona tanto en el cliente (navegador) como en el servidor (por ejemplo, Node.js). Muchos frameworks tienen sus propias APIs HTTP integradas, sin embargo, muchas veces usar dichas APIs no es lo más ideal ya que esta función puede ser cubierta de forma más eficiente por librerías de terceros, como Axios. Es muy simple utilizar Axios ya sea sólo o con algún framework y en este tutorial aprenderemos a hacerlo.
Cuando estamos construyendo un formulario o algún componente en nuestras aplicaciones es probable que queramos agregar la opción de seleccionar una fecha y aunque los navegadores modernos permiten incluir un datepicker directamente con HTML sin necesidad de usar JavaScript, dicha opción ofrece menos posibilidades de personalización.
vuejs-datepicker es una librería de Vue.js que nos permite agregar un datepicker que permite ser personalizado y con el cual podemos manipular el valor seleccionado en tiempo real.
vue-form-generator es una librería de Vue.js que nos permite generar formularios a partir de un esquema previamente definido. Es decir, en lugar de escribir el código HTML de los formularios los generamos definiendo los campos que queremos tener en un objeto de JavaScript. Veamos cómo usar esta librería a continuación:
Seguramente alguna vez has rellenado un formulario donde a medida que vas completando los campos de diferentes secciones vas avanzando a otras partes del mismo; si necesitas hacer esto en un proyecto puedes lograrlo con vue-form-wizard, el cual es un plugin de Vue.js que nos permite dividir el flujo de un formulario en múltiples pasos (tipo Wizard). Ver post
Para terminar este Curso de Testing con Vue aplicaremos diseño a nuestra app de gestión de tareas. Para ello instalaremos Bootstrap y aplicaremos algunas de las clases de este framework en algunos componentes. Cuando tengamos un diseño mas o menos convincente realizaremos un test de snapshot para asegurarnos que este diseño es el que queremos y que cualquier diferencia debe ser considerada como un error.
Regístrate para ver ésta y cientos de lecciones exclusivas.
En el video anterior dejamos sin hacer la funcionalidad de marcar una tarea como no realizada. A través de una computed, vamos a lanzar una mutación de vuex u otra dependiendo del valor del checkbox. Esto lo conseguiremos sobreescribiendo el setter de la computed. Crearemos tests que comprueben esta lógica.
Regístrate para ver ésta y cientos de lecciones exclusivas.
Durante todo el curso hemos estado implementando funcionalidades a nuestra app de tareas sin abrir el navegador. ¿Creéis que todo estará funcionando? Vamos a montar el componente ToDoList en la raíz y aprovecharemos también para eliminar ciertos tests introductorios. Finalmente haremos un par de ajustes a la interfaz de usuario.
Regístrate para ver ésta y cientos de lecciones exclusivas.
En esta lección implementaremos las acciones que probamos en el video anterior. Cambiaremos nuestra prueba que llamaba al método deleteTask para que ahora se llame a la acción del store. También crearemos las funciones necesarias para agregar una tarea y completarla, llamando a sus correspondientes acciones.
Regístrate para ver ésta y cientos de lecciones exclusivas.