Consumir API con VUE 3 Autenticación Sanctum Doble CRUD | Vite Bootstrap Pinia ChartJs DataTables

Поделиться
HTML-код
  • Опубликовано: 15 янв 2025

Комментарии • 53

  • @elDemio
    @elDemio Год назад +1

    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 ❤

    • @programandocondancruise
      @programandocondancruise  Год назад +1

      Muchas gracias por tu comentario es muy satisfactorio saber que mis aportes si les sirven de ayuda, te deseo mucho éxito en este mundo del desarrollo web 👍😃

  • @jhonsmall
    @jhonsmall Год назад +1

    Excelente continua con mas videos de laravel y vue...

    • @programandocondancruise
      @programandocondancruise  Год назад +2

      Muchas gracias… claro mi buen, está en planes roles y permisos junto con un Dashboard en vue

    • @jhonsmall
      @jhonsmall Год назад

      @@programandocondancruise de lujo...

  • @CamiloMancipe553
    @CamiloMancipe553 Год назад +1

    Excelente video, sigue así.

  • @ZetaDrow
    @ZetaDrow 4 месяца назад

    Tengo una duda, como haces el manejo o como guarda el token que obtienes desde el api y como la mandas a una nueva API que necesite el token, no me quedo del todo claro , gracias por el video.

  • @IvanGomez-k5v
    @IvanGomez-k5v Год назад +1

    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?

    • @programandocondancruise
      @programandocondancruise  Год назад

      Hola qué tal qué bueno que te han servido los videos, le tendrías que añadir evento change al combo 1 para que haga una petición a la api y consultar las opciones a desplegar en el combo 2

  • @gustavogarcia9300
    @gustavogarcia9300 8 месяцев назад

    Hola, estoy siguiendo tus video, en el actual me presenta este error cuando pruebo con credenciales incorrectas, como podria solucionar el mismo.
    auth.js:26
    Uncaught (in promise) TypeError: errors.response.data.errors.map is not a function
    at auth.js:26:35
    at async Proxy.login (auth.js:17:4)

  • @azaelhern3214
    @azaelhern3214 8 месяцев назад

    Hola excelente video me podrias ayudar a saber por que pinia no guarda en el storage

    • @programandocondancruise
      @programandocondancruise  8 месяцев назад

      Qué tal, si puedes compartirme imagen el archivo donde tienes tu estado para revisar

  • @wildergeronimocopa2781
    @wildergeronimocopa2781 Год назад

    por que no se me almacena authToken, ni authUser en Local Storage, ya que al recargar la pagina se me pierde la sesion

    • @pedro-j
      @pedro-j Год назад +1

      @wildergeronimocopa2781 ... Me ha pasado lo mismo. No tenía nada dentro del Local Storage del navegador, ni se conservaba la sesión tras refrescar el navegador.
      Buscando la falta de persistencia, encontré la configuración de Pinia adecuada para lograrlo:
      - es necesario cargar el plugin de Pinia para la persistencia de otro modo dentro del "main.js", de modo que sustituyes esto
      import { createPersistedState } from 'pinia-plugin-persistedstate'
      por esto otro
      import piniaPluginPersistedState from 'pinia-plugin-persistedstate'
      - y, luego, por tanto, cambias esta carga
      pinia.use(createPersistedState)
      por esta otra
      pinia.use(piniaPluginPersistedState)
      Con todo ello, al menos, yo he logrado que se carguen los datos de AUTH en el Local Storage y, así, conservar la sesión aunque recargue la página. Saludos.

    • @alfonsofernandez6846
      @alfonsofernandez6846 Год назад

      a mi me funcionó de esta forma
      pinia.use(createPersistedState({
      storage: sessionStorage,
      }));
      saludos espero que le sirva

  • @elvisumuln.7028
    @elvisumuln.7028 Год назад

    Excelente video amigo! algun tutorial para consumir la API desde un cliente http Laravel, siempre con las autenticaciones.

  • @alfredomorales3017
    @alfredomorales3017 9 месяцев назад

    en el repositorio no encuentro el projecto Comapany ¿como está renombrado?

    • @programandocondancruise
      @programandocondancruise  9 месяцев назад +1

      Qué tal, te comparto la liga: gitlab.com/DanCruise/company

    • @alfredomorales3017
      @alfredomorales3017 9 месяцев назад +1

      @@programandocondancruise Gracias, incluso acabo de ver el video y recrear el codigo desde cero.... Muchas Gracias. Esto es lo que estaba buscando

    • @programandocondancruise
      @programandocondancruise  9 месяцев назад

      Genial 👍 que bueno que te sirvió

    • @alfredomorales3017
      @alfredomorales3017 9 месяцев назад

      @@programandocondancruise Aprovechando el momento, para subirlo a unserver de producción o hosting, ¿que se debe hacer? alguna vez vi que el proyecto de vue se compila y se guarda en una carpeta de Laravel, me parece que en Public y se configura .httpaccess. ¿podrias darme una orientada para hacerlo pro favor?

    • @programandocondancruise
      @programandocondancruise  9 месяцев назад

      @alfredomorales3017 puedes subirlo como comentas o por separado, te comparto un video que tengo para el deploy de proyecto vue:
      ruclips.net/video/TlImyWqjErM/видео.html

  • @wildergeronimocopa2781
    @wildergeronimocopa2781 Год назад

    holaa genial el tutorial, pero como seria si estamos utilizando backend con Node js

    • @programandocondancruise
      @programandocondancruise  Год назад

      Hola qué tal, seria lo mismo pero con tus rutas, dependiendo de cómo tengas el back es como realizas el front, tengo un ejemplo de API en node js y consumirla con varios clientes:
      ruclips.net/video/ED_f0QeSC2k/видео.htmlsi=O6LBruPlJmx5twh4

  • @SamuxTutosXD
    @SamuxTutosXD Год назад +1

    y si no me salee la carpeta stores

  • @ernayjm
    @ernayjm Год назад +1

    Hola muy buen video pero me esta saliendo un error 'has been blocked by CORS policy'

    • @programandocondancruise
      @programandocondancruise  Год назад +1

      Qué tal Ernay, fue el problema del que me escribiste por face sino mal recuerdo, que bueno que ya quedó. Saludos

    • @ernayjm
      @ernayjm Год назад

      Si ese mismo problema ya quedó resuelto, Gracias@@programandocondancruise

    • @heynerleiva
      @heynerleiva Год назад +1

      Como lo resolvió amigo ?

    • @J25-oz5ll
      @J25-oz5ll Год назад

      Hola, como lograron resolver el error de CORS policy?

  • @OsvGames
    @OsvGames Год назад

    el comando: npm init vue@latest
    no funciona en mi entorno laragon...

    • @Criistian_
      @Criistian_ 6 месяцев назад

      actualiza tu node

  • @iscrodolfoalvarez
    @iscrodolfoalvarez Год назад

    No funciona el link!

  • @fakupaku
    @fakupaku Год назад

    Hola! Una consulta, cual es el motivo por el que pedis el csrf a Sanctum?

    • @programandocondancruise
      @programandocondancruise  Год назад

      Qué tal, únicamente para protección CSRF …con XSRF-TOKEN … laravel.com/docs/10.x/sanctum#spa-authenticating

  • @angelcardians7134
    @angelcardians7134 10 месяцев назад

    Hola alguien sabe como puedo solucionar el error de cors policy y el csrf-cookie cuando intento registrar un usuario en el front? He seguido el tutorial de la api de companies y este y me sigue dando el mismo error, porfa ayuda

    • @DeveroCode
      @DeveroCode 9 месяцев назад

      Modifica los cors y coloca true para que permita hacer peticiones desde el Front-end, si es en Laravel 11.x instala los cors y habilita esa opción

  • @teremariscal8914
    @teremariscal8914 Год назад

    No se usar la compu😢

  • @alfredomorales3017
    @alfredomorales3017 9 месяцев назад

    No se ve el Login: main.js:27 [Vue Router warn]: No match found for location with path "/login"
    (anónimas) @ main.js:27
    Mostrar 6 marcos más

    • @programandocondancruise
      @programandocondancruise  9 месяцев назад

      Habría que revisar la declaración de la ruta

    • @alfredomorales3017
      @alfredomorales3017 9 месяцев назад

      Bentido sea ChatGPT, San Google está perdiendo camino, resulta que le he enviado el index de las rutas y encontró porque no puedo ver el login, resulta que para la ruta Edit tenia los siguiente: {
      path: '/edit/:id',
      name: 'login',
      component: () => import('../views/Departments/Edit.vue')
      }, ... aqui está el error. Revise el codigo una y una y otra vez y nunca vi esto, en lugar de name:'login' debio ser 'edit'..... Bendito sea ChatGPT

  • @angelcardians7134
    @angelcardians7134 Год назад

    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

    • @RubenHdz-gk4nm
      @RubenHdz-gk4nm 7 месяцев назад

      Agrega esto:
      import { markRaw } from 'vue'

  • @patipanpatisampita8321
    @patipanpatisampita8321 Год назад

    Sir, Please continue developing Laravel and vuejs upload images to employee table.

  • @danielrangel2623
    @danielrangel2623 Год назад

    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.

    • @programandocondancruise
      @programandocondancruise  Год назад +4

      Qué tal, se comenzó con el back, la api de Laravel, está la liga en la descripción: API en Laravel 10 | Autenticación Sanctum
      ruclips.net/video/fsiPXKzcH2M/видео.html

    • @jhonsmall
      @jhonsmall Год назад

      @@programandocondancruise Muchas gracias, continua asi mas videos de laravel y vue.

  • @RolandoRc2503
    @RolandoRc2503 Год назад

    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

    • @RolandoRc2503
      @RolandoRc2503 Год назад +1

      Para los que no pueden hacerlo por dominio les recomiendo utilizas un proxy reverse para el vite, colocar como dominio general como por ejemplo "company.test" y para la api un dominio "api.company.test" además que en el .env del api colocarle el dominio "company"

    • @programandocondancruise
      @programandocondancruise  Год назад

      Muy cierto, así sería 👍