Consumir API con VUE 3 Autenticación Sanctum Doble CRUD | Vite Bootstrap Pinia ChartJs DataTables
En este artículo, aprenderemos a consumir una API con VUE 3 utilizando el paquete de autenticación Sanctum para realizar operaciones CRUD dobles. Utilizaremos Vite como nuestro entorno de desarrollo y Bootstrap para el diseño, así como Pinia para la administración del estado de la aplicación. También integraremos ChartJs para visualizar datos y DataTables para tablas interactivas.
Configuración inicial
Para comenzar, necesitamos configurar nuestro entorno de desarrollo utilizando Vite. Podemos instalar Vite utilizando npm:
npm install -g create-vite
Después de la instalación, creamos un proyecto Vite:
create-vite my-app
Autenticación con Sanctum
Una vez que tenemos nuestro proyecto Vite configurado, podemos implementar la autenticación con Laravel Sanctum, que es un sistema de autenticación basado en tokens para API. Podemos seguir la documentación oficial de Laravel para configurar Sanctum en nuestro backend.
Para consumir la API con autenticación, utilizaremos el paquete axios en nuestra aplicación VUE 3. Podemos instalar axios utilizando npm:
npm install axios
Operaciones CRUD dobles
Una vez que hemos configurado la autenticación con Sanctum, podemos realizar operaciones CRUD dobles utilizando VUE 3. Esto significa que podremos crear, leer, actualizar y eliminar datos tanto del lado del cliente como del lado del servidor.
Integración de Bootstrap, Pinia, ChartJs y DataTables
Para el diseño de nuestra aplicación, utilizaremos Bootstrap para crear una interfaz de usuario atractiva y receptiva. Para la administración del estado de la aplicación, integraremos Pinia, que es un nuevo paquete de estado para VUE 3.
Además, utilizaremos ChartJs para visualizar datos en forma de gráficos y DataTables para crear tablas interactivas con funcionalidades de búsqueda y paginación.
Conclusion
En este artículo, hemos aprendido cómo consumir una API con VUE 3 utilizando el paquete de autenticación Sanctum para realizar operaciones CRUD dobles. Hemos integrado Vite como nuestro entorno de desarrollo y hemos utilizado Bootstrap para el diseño, Pinia para la administración del estado de la aplicación, ChartJs para visualizar datos y DataTables para tablas interactivas. Con estas herramientas, podemos crear aplicaciones web sofisticadas que son seguras, receptivas y visualmente atractivas.
Hola. Todo marchaba relativamente bien hasta que me salió este error por el cual no se me reproduce el componente Nav.vue:
Uncaught ReferenceError: markRaw is not defined
Sigo el video paso a paso y sigo con el mismo error alguien sabe como lo podria solucionar? No encuentro respuestas en google ayuda t.t
Hola muy buen video pero me esta saliendo un error 'has been blocked by CORS policy'
Excelente video amigo! algun tutorial para consumir la API desde un cliente http Laravel, siempre con las autenticaciones.
el comando: npm init vue@latest
no funciona en mi entorno laragon…
excelentes tus videos. Estoy programando por primera vez en laravel y vue, después de mucho tiempo de trabajar con .net y tus videos me han ayudado bastante.
Te quiero preguntar lo siguiente. En caso de necesitar combos o selectinput dependiente de otro cómo se pueden hacer?
Hola Dan como sería en la parte del xsrf token cuando tengo un dominio (virtual host), ya que no se como configurarlo, me sale un error a la hora de agregar el xsrf. me trae el xsrf del get pero cuando hago el post no se encuentra en las cabezeras, mi dominio lo creo laragon: company.test
Hola! Una consulta, cual es el motivo por el que pedis el csrf a Sanctum?
Me he guardado todos tu vídeos desde que encontré tu canal y hasta hoy tengo la oportunidad de verlos, no sabes lo mucho que me orienta ya que estoy realizando un proyecto con ambas tecnologías, un abrazo, y espero tu contenido llegue a aquellos que van iniciando en el mundo de los framework ❤
Excelente continua con mas videos de laravel y vue…
y si no me salee la carpeta stores
No se usar la compu😢
Excelente video, sigue así.
Realmente debiste comenzar primero con el backend, es raro comenzar por el frontend, cuando no sabes ni como son los llamados al backend, entiendo que tienes un proyecto ya listo, del que te guias, pero tienes que explicar como si lo hicieras desde 0 sin mirar nada.