Cómo realizar peticiones HTTP a un API con Axios en Vue | Curso de Vue js 3 - 08

Sobre esta lección

En este octavo video del CURSO GRATUITO DE VUE.JS 3 (desde CERO, para principiante a experto), continuamos con el ejemplo del gestor de estados Pinia y Watch que comenzamos en el video anterior, completando su implementación. Además, creamos nuevas carpetas en nuestro proyecto para organizar archivos de composables y helpers, manteniendo así una estructura limpia y ordenada. Luego, creamos un nuevo store de Pinia para almacenar la temperatura de una ciudad, la cual obtendremos de la API open-meteo. Para realizar las peticiones a la API, instalamos Axios y creamos un helper. También creamos un composable para manejar la lógica de la petición a la API y un componente para mostrar los resultados obtenidos. ¡No te pierdas este video lleno de prácticos ejercicios para mejorar tus habilidades en Vue.js 3! 00:00 Explicando la reactividad de un Store de Pinia y ejemplo de Watch 02:11 Creando un componente Header.vue 05:59 Cómo importar el componente Header en la vista principal 07:39 Cómo instalar Axios en Vue 3 con npm 08:31 Creando un Store de Pinia para almacenar los datos de una petición a una API 12:22 Creando un nuevo componente de Vue para mostrar los datos que vienen desde la API 14:24 Cómo crear un composable en Vue.js 3 (parte 1) 15:13 Cómo crear "helpers" para ayudar a realizar peticiones a APIs 15:58 Revisando la documentación de una API para realizar pruebas con Vue 17:18 Creando un helper con Axios para realizar una petición HTTP a una API 20:41 Cómo crear un composable en Vue.js 3 (parte 2) 24:28 Cómo usar un composable en un componente de Vue js 3 26:56 Probando los resultados del ejercicio Página oficial de la documentación de Vue 3: https://vuejs.org Página oficial de la documentación de Pinia: https://pinia.vuejs.org/ Documentación de Axios: https://axios-http.com/es/docs/intro URL de la API del clima: https://open-meteo.com/en/docs/ Herramientas que ocupamos en este curso: Visual Studio Code: https://code.visualstudio.com/ + Instalar la extensión oficial de Vue (la puedes buscar como VOLAR) Sourcetree: https://www.sourcetreeapp.com/ | Esta herramienta nos permite utilizar GIT sin comandos. En google Chrome instala la extensión oficial de Vue.js 3, llamada vue.js devtools ¡No te pierdas esta oportunidad de dominar Vue.js 3 de manera clara y efectiva, SIGUE LOS CAPITULOS DE ESTE CURSO GRATUITO DE VUE 3 Y APRENDE FÁCIL LO MÁS IMPORTANTE DE ESTE FRAMEWORK! En próximos videos, crearemos un formulario de login añadiendo CSS y el framework Bootstrap 5. Utilizaremos Pinia, Vue-Router, VeeValidate y Yup, realizando peticiones a un backend mediante API con Axios. Para más contenido como este, tutoriales de Vue.js 3 u otros frameworks de desarrollo web frontend (Angular, React), así como de desarrollo web full stack con Nuxt o Laravel, asegúrate de darle "Me gusta", compartir el video y suscribirte. Si este video te fue útil o tienes sugerencias sobre qué más deberíamos abordar en este curso de Vue 3, déjanos tu comentario #vuejs #pinia #axios