Curso y Libro primeros pasos con Laravel Inertia + Vue.js y Tailwind.css - 2025

 

Tambien tengo recursos gratuitos para el Curso en el Blog

Es importante mencionar, que el curso tambien tiene el formato en libro con el 100% del contenido del mismo, es decir, el curso es equivalente al libro.

 

Este es un curso en el cual daremos los primeros pasos con Laravel Inertia, conoceremos cómo podemos usar Vue directamente desde Laravel, sin intermedios molestos por lo tanto en vez de usar vistas con blade, usamos componentes en Vue.

 

¿Qué es Laravel Inertia?

Esta guía ofrece múltiples tutoriales en base a pequeñas aplicaciones con alcances limitados en los cuales conoceremos en detalle cómo funciona Laravel Inertia, realizaremos comparaciones con el curso de Laravel Livewire el cual es hermano de este curso y comparar tecnologías.

Con este tipo de integración, que suena a poco, pero que facilita mucho el desarrollo y maximiza el tiempo de la elaboración del proyecto, no hay necesidad de usar peticiones axios, fetch o similares ya que, la estructura o scaffolding que nos trae Inertia se encarga de todo; trayendo un mundo de posibilidades infinitas y un desarrollo rápido en comparación de otras soluciones similares con el esquema clásico de:

Laravel + Rest Api + Vue

Este curso al ser de nivel intermedio, da por hecho que tienes conocimientos en Laravel básico.

En definitiva, aprenderás a conocer Laravel inertia, qué cambios trae en un proyecto en Laravel básico, el uso de los componentes en Vue como característica principal y mucho más.

 

 

Prólogo

Laravel es un framework fascinante, inmenso y con una curva de aprendizaje algo elevada y con múltiples opciones; este libro no es para iniciales y da por hecho de que ya sabes programar en Laravel.

Laravel Inertia lleva el desarrollo de Laravel un poco más allá; automatizando procesos rutinarios en esquemas muy flexibles en base a componentes, los componentes en Vue, que vienen a reemplazar a las vistas blade de Laravel y que con los mismos, podemos comunicar cliente y servidor de una manera muy simple, eficiente y sencilla.

Laravel Inertia no es un framework, es solamente una capa o scaffolding que agrega ciertas características extras al framework que podemos utilizar para crear grandes aplicaciones, con menos esfuerzo y tiempo de desarrollo.

 

 

Para quien es este curso

Este curso está dirigido a cualquiera que quiera comenzar a desarrollar con Laravel Inertia; y se tiene que tener conocimiento al menos básico en Laravel y asociados:

• Para aquellas personas que quieran aprender algo nuevo, conocer sobre una herramienta con poca documentación y la mayoría de ella está en inglés.
• Para las personas que quieran mejorar una habilidad en el desarrollo web, que quieran crecer como desarrollador.
• Con que te identifiques al menos con alguno de los puntos señalados anteriormente, este libro es para ti.

Por aquí tienes el listado completo de clases que vamos a cubrir en el libro y curso:

Introducción

• 1 Introducción al curso

Primeros pasos

• 1 Introduccion

• 2 ¿Qué es Laravel Inertia?

• 3 Windows y MacOS: Crear un proyecto con el instalador de Laravel y Laragon/Herd

  Vamos a crear un proyecto Laravel Inertia en entorno Windows (MacOS).

• 4 Características de un proyecto Inertia

  Vamos a presentar que es lo que tenemos en detalle, el proyecto, sus características y cómo funciona.

• 5 Rutas definidas por Inertia

  Daremos una presentación al funcionamiento y uso de las rutas.

Integración con Inertia

• 1 Introduccion

• 2 Crear controladores y modelos

  Vamos a crear los modelos y controladores que usaremos a lo largo de las secciones.

• 3 Create: Crear un formulario

  Vamos a crear el primer formulario.

• 4 Create: Crear una categoría en la base de datos

  Vamos a crear la categoría en la base de datos

• 5 Create: Crear una categoría en la base de datos

  Vamos a crear la categoría en la base de datos

• 6 Create: Aplicar validaciones y mostrar errores

  Vamos a realizar validaciones sobre el formulario.

• 7 Usar el layout de la aplicación

  Vamos a configurar el layout de la aplicación.

• 8 Usar componentes Vue de Inertia

  Vamos a reutilizar componentes existentes para mejorar el diseño de la aplicación.

• 9 Detalles del formulario

  Últimos detalles del formulario, grid y padding.

• 10 Create: Terminar implementación

  Vamos a terminar la implementación.

• 11 Editar registro: Crear un formulario

  Vamos a crear el apartado de edición.

• 12 Editar registro: Actualizar una categoría

  Vamos a actualizar un registro en la base de datos desde Laravel.

• 13 Generar SLUG de manera automática

  Vamos a generar el slug desde de validación.

• 14 Listado: Todos los registros

  Vamos a crear un listado inicial de registros.

• 15 Link: Enlace para crear y editar

  ​Vamos a crear enlaces para crear y editar.​

• 16 Listado: Paginación

  Vamos a crear un listado paginado.

• 17 Crear un componente de paginación en Vue

  ​Vamos a crear un componente de paginación personalizado.​

• 18 ProgressBar

  ​Vamos a conocer el funcionamiento de la barra de progreso.​

• 19 ProgressBar, props array en Paginación y advertencia de Component en Vue

  ​Vamos a tratar varios temas que quedaron pendientes.​

• 20 Crear Container

  ​Vamos a crear un contenedor para la aplicación.​

• 21 Crear componente de carta

  ​Crearemos el componente típico de carta.​

• 22 Enlaces de acción

  Vamos a mejorar el diseño de los enlaces del listado

• 23 Paginación

  ​Componente de paginación y botones de acción.​

• 24 Eliminar registro

  Vamos a realizar el proceso de eliminar el registro desde el listado.

• 25 Eliminar registro: Renderizar el enlace como un botón

  Vamos a cambiar de un enlace a un botón en el enlace de eliminar.

• 26 Publicar en github

  https://github.com/libredesarrollo/book-course-laravel-inertia/releases/tag/v0.1

Redirecciones y mensajes por sesión

• 1 Introducción

• 2 Redirecciones

  ​Vamos a conocer cómo emplear las redirecciones junto con Inertia.​

• 3 Mensajes Flash en Inertia

  ​Vamos a crear un mensaje flash para mostrar en inertia.​

• 4 Extra: transiciones

  ​Vamos a colocar un bloque de transition para los mensajes flash.​

• 5 Publicar en github

  Puedes consultar el código fuente en: https://github.com/libredesarrollo/book-course-laravel-inertia/releases/tag/v0.2

CRUD para los post

• 1 Introduccion

• 2 Replicar CRUD de las categorías

  Vamos a replicar el esquema existente para crear categorías, para los post.

• 3 Crear: Formulario base

  ​Vamos a terminar el proceso de creación.​

• 4 Crear: Popular categoría de crear post

  ​Vamos a obtener el listado de post.​

• 5 Editar

  ​Vamos a terminar el proceso de edición.​

• 6 Extra: Fusionar creación y actualización en un solo componente de Vue

  ​Vamos a fusionar el proceso de editar y crear en un solo componente de vista.​

• 7 Publicar en github

  https://github.com/libredesarrollo/book-course-laravel-inertia/releases/tag/v0.3

Upload

• 1 Introducción

• 2 Implementar en el servidor

  ​Vamos a ver el esquema por defecto al momento de hacer un upload.​

• 3 Upload en el componente de Save

  ​Vamos a combinar el upload con la carga de archivos.​

• 4 Carga de archivos manejada desde el formulario de crear o editar

  ​Vamos a adaptar el formulario de upload para crear y editar.​

• 5 Vía componente de Oruga UI: Configuración básica

  Vamos a definir las configuraciones para usar Oruga UI en el proyecto.

• 6 Vía componente de Oruga UI: Upload

  ​Vamos a conocer cómo extender Inertia con otros frameworks.​

• 7 Vía Drag and Drop de Oruga UI

  Vamos a conocer el proceso de upload.

• 8 Mostrar imagen cargada

  ​Vamos a mostrar la imagen cargada.​

• 9 Eliminar imagen cargada

  ​Vamos a crear una función de upload.​

• 10 Descargar imagen cargada

  ​Vamos a mostrar el proceso de descarga.​

• 11 Publicar en github

  Puedes consultar el código fuente en: https://github.com/libredesarrollo/book-course-laravel-inertia/releases/tag/v0.4

CKEditor

• 1 Introducción

• 2 Instalar y configurar CKEditor

  Instalaremos y usaremos CKEditor en el proyecto.

• 3 Acomodar CSS

  Vamos a agregar un CSS para el CKEditor.

• 4 Publicar en git

Diálogos de confirmación

• 1 Introducción

• 2 List: Configurar esquema inicial para eliminación

  Creamos un sencillo esquema de eliminación para las categorías.

• 3 Tarea: Replicar en Post

  Replicamos el esquema de eliminación anterior para los posts.

• 4 Modals de Inertia

  Presentaremos los modales de Inertia.

• 5 Publicar en github

  Puedes consultar el código fuente en: https://github.com/libredesarrollo/book-course-laravel-inertia/releases/tag/v0.6

Formulario paso por paso

• 1 Introducción

  Introducción

• 2 Presentación

• 3 Crear migraciones principales

  Vamos a crear las migraciones para los formularios.

• 4 Crear modelos principales

  Vamos a crear los modelos.

• 5 Formulario General: Estructura

  Crear controlador, validaciones y ruta.

• 6 Formulario General: Crear

  Vamos a crear el esquema para poder crear el contacto.

• 7 Formulario General: Actualizar

  Vamos a crear el esquema para poder actualizar el contacto.

• 8 Formulario Company: Crear y Actualizar

  Vamos a crear el esquema para poder crear el contacto para el paso 2.

• 9 Formulario Company: Crear y Actualizar

  Vamos a crear el esquema para poder crear el contacto para el paso 2.

• 10 Formulario Person: Crear y Actualizar

  Vamos a crear el esquema para poder crear el contacto para el paso 2.

• 11 Formulario Detail: Crear y Actualizar

  Vamos a crear el esquema para poder crear el contacto para el paso 3.

• 12 Integrando el formulario: Presentación

  Vamos a presentar como vamos a aplicar el formulario paso por paso.

• 13 Integrando el formulario de General en el paso por paso

  Vamos a integrar el primer paso en el componente de Step.

• 14 Integrando el formulario de Empresa en el paso por paso

  Vamos a integrar el segundo paso en el componente de Step.

• 15 Integrando el formulario de Persona en el paso por paso

  Vamos a integrar el segundo paso en el componente de Step.

• 16 Integrando el formulario de Detalle en el paso por paso

  Vamos a integrar el tercer paso en el componente de Step.

• 17 Experimentar con las propiedades globales

  Vamos a conocer algunos mecanismos para crear propiedades globales.

• 18 Compartir datos, Implementar helper para indicar el paso actual

  Vamos a crear la función de ayuda que genera el paso actual.

• 19 Errores de validaciones

  Vamos a ver el problema que existe que al existir campos en el paso por paso con el mismo nombre, aparecen los errores en los formularios que tengan el mismo nombre.

• 20 Compartir datos propiedad de step actualizar

  Vamos a definir los valores que debe de tener la propiedad de step.

• 21 Crear estilo para el paso por paso

  Vamos a crear un sencillo estilo para mostrar el paso por paso.

• 22 Renderizar un paso por vez

  Vamos a mostrar el formulario que corresponde al paso.

• 23 Paso anterior

  Vamos a crear la opción de paso anterior.

• 24 Parametro de contacto general para los paso por paso

  Par metro de contacto general para los paso por paso

• 25 Detalles finales

  Detalles finales

• 26 Publicar en github

  Código fuente en: https://github.com/libredesarrollo/book-course-laravel-inertia/releases/tag/v0.7

Filtros y campos de búsqueda

• 1 Introducción

• 2 Cambios en la tabla

  Vamos a colocar algunas columnas adicionales para la tabla del listado de publicaciones.

• 3 Seeders para los posts

  Vamos a crear seeders para generar datos de pruebas para los posts.

• 4 Campo de búsqueda

  Vamos a crear un campo de búsqueda para varios campos.

• 5 Campo de búsqueda HTML

  Vamos a crear los selects en el componente de Vue para los elementos del formulario para el filtro.

• 6 Implementar funcionalidad del filtro

  Vamos a terminar de implementar del filtro

• 7 Filtrar por rango de fecha

  Vamos a crear un filtro por fechas

• 8 Valores aplicados en los filtros desde el componente en Vue

  Vamos a colocar los valores de los props en el componente de Vue.

• 9 Campo de búsqueda: HTML

  Vamos a crear los selects en el componente de Vue para los elementos del formulario para el filtro.

• 10 Aplicar filtros sin usar un botón

  Vamos a enviar los datos sin usar un botón.

• 11 debounce, retardo en los eventos

  Vamos a realizar un retardo al momento de escribir en el campo de tipo búsqueda.

• 12 Extra: Filtros con cláusulas condicionales, when

  Vamos a aplicar los filtros definidos antes empleando los whens, que es la manera predefinida en Laravel.

• 13 Publicar en github

  Código fuente: https://github.com/libredesarrollo/book-course-laravel-inertia/releases/tag/v0.8

Ordenación

• 1 Introducción

• 2 Presentación

  Vamos a hablar sobre el desarrollo a implementar.

• 3 Ordenación: Controlador

  Vamos a crear la estructura necesaria para la ordenación desde el controlador.

• 4 Ordenación: HTML y pruebas

  Vamos a crear la estructura para la ordenación de las columnas del listado.

• 5 Limpiar filtros

• 6 Publicar en github

  Puedes consultar el código fuente en: https://github.com/libredesarrollo/book-course-laravel-inertia/releases/tag/v0.9

Blog: Listado y detalle de post

• 1 Introducción

• 2 Layout

  Definimos el layout.

• 3 Página de listado: Diseño

  Vamos a trabajar en el diseño de la página de listado.

• 4 Página de listado: Diseño

  Vamos a trabajar en el diseño de la página de listado.

• 5 Página de detalle

  Vamos a crear la página de detalle.

• 6 Colocar formulario paso por paso en detalle

  Vamos a colocar el formulario paso por paso en el detalle del post.

• 7 Publicar en github

  Puedes consultar el código fuente en: https://github.com/libredesarrollo/book-course-laravel-inertia/releases/tag/v0.10

Carrito de compras

• 1 Introducción

• 2 Listado de productos: Esquema inicial

  Vamos a crear el esqueleto del módulo.

• 3 Item de carrito

  Vamos a crear el controlador y estructura inicial para administrar un item del carrito.

• 4 Componente de Vue para administrar un Item del carrito

  Vamos a implementar la opción de agregar un producto al carrito.

• 5 Compartir datos del carrito mediante la sesión a Vue

  Vamos a realizar la adaptación para compartir la sesión en los componentes de Vue.

• 6 Listado de Post en el carrito: Adaptar

  Adaptamos el listado de post del carrito al nuevo esquema.

• 7 Vista de detalle del carrito

  Vamos a crear una página para el detalle del carrito.

• 8 BD: Crear migración y modelo

  Vamos a crear la estructura para trabajar con la base de datos.

• 9 BD: Registrar cambios en la base de datos

  Vamos a guardar la sesión del carrito en la base de datos.

• 10 BD: Replicar carrito de la base de datos a sesión al momento del login

  Vamos a escuchar cuando ocurre el login y replicar en la sesión el carrito.

• 11 Componente de Toast de Oruga UI

  Vamos a utilizar el componente de Toast cada vez que realicemos un cambio en el carrito.

• 12 Calcular total

  Vamos a calcular el total de elementos en el carrito.

• 13 Crear botón flotante

  Vamos a mostrar el total en una vista y crear el botón de carrito mostrando el total.

• 14 Palabras finales

• 15 Publicar en github

  Puedes consultar el código fuente en: https://github.com/libredesarrollo/book-course-laravel-inertia/releases/tag/v.10

Aplicación de To Do

• 1 Introducción

• 2 Crear el esqueleto de la aplicación de to do: Controlador y componente Vue

  Vamos a crear la estructura base de la app to do.

• 3 Crear el esqueleto de la aplicación de to do: Listado y Formulario

  Vamos a crear la estructura base de la app to do para el listado de to do.

• 4 Crear migración y modelo

  Vamos a crear el modelo  y migración de los to do.

• 5 Crear to do

  Vamos a crear un to do desde en el servidor.

• 6 Crear to do: Errores y validaciones

  Vamos a aplicar validaciones y mostrar errores al momento de crear un to to.

• 7 Popular listado de todos

  Vamos a mostrar el listado de to do de la base de datos.

• 8 Editar un todo

  Vamos a actualizar un to do.

• 9 Editar un todo: Mostrar errores

  Vamos a aplicar validaciones y mostrar errores al momento de actualizar un to to.

• 10 Eliminar un to do

  Vamos a eliminar un to do en la base de datos.

• 11 Marcar completado un to do

  Vamos a marcar como completado un to do.

• 12 Eliminar todos los to do

  Vamos a eliminar todos los to do.

• 13 Reordenación, e instalar el plugin

  Vamos a instalar el plugin de Drag and Drop para reordenar los todos.

• 14 Reordenación, configuración inicial con los To Do en Vue

  Vamos a configurar nuestro listado de To Do con el plugin de reordenar.

• 15 Reordenación, crear listado de To Dos ordenados

• 16 Reordenación, aplicar cambios en el servidor

  Vamos a reordenar los to do desde el servidor.

• 17 Problemas con la sincronización de las operaciones

  Hablaremos sobre los problemas que tenemos al momento de sincronizar los datos.

• 18 Publicar en github

  Código fuente del capitulo en: https://github.com/libredesarrollo/book-course-laravel-inertia/releases/tag/v0.11

• 19 Extra: Problemas de Sync, Otras soluciones

Pruebas

• 1 Introducción

• 2 Repaso

  Presentamos conceptos claves e importancias de las pruebas.

• 3 Prueba base

  Vamos a crear la prueba básica como lo haríamos en Laravel básico.

• 4 De Laravel a Inertia

  Vamos a conocer el método de aserción de inertia.

• 5 Objeto $page

  Vamos a crear la prueba básica como lo haríamos en Laravel básico.

• 6 Método has

  Vamos a conocer cómo emplear el método de has.

• 7 Método where

  Vamos a conocer el método de where para comprobar por valores.

• 8 has y where: Anidaciones

  Vamos a conocer cómo inspeccionar datos anidados.

• 9 Terminar la prueba

  Palabras finales sobre la prueba actual.

• 10 Blog: Prueba para el detalle

  Crearemos la prueba para el detalle de un post en el blog.

• 11 Dashboard: Prueba para listado

  Prueba para el dashboard del listado.

• 12 Dashboard, Categoría: Prueba para crear, GET

  Prueba para el formulario de creación de una categoría.

• 13 Configurar base de datos

  Vamos a configurar una base de datos de prueba.

• 14 Facades y adaptar pruebas anteriores

  Vamos a crear unos factories para generar datos de prueba.

• 15 Autenticación

  Vamos a autenticar un usuario para los módulos protegidos por autenticación.

• 16 Dashboard: Prueba para crear, POST

  Vamos a crear la prueba para crear una categoría.

• 17 Tarea: Dashboard: Prueba para editar

  Vamos a crear la prueba para editar una categoría.

• 18 Dashboard: Prueba para eliminar

  Vamos a crear la prueba para eliminar una categoría.

• 19 Dashboard: Pruebas para el Post

  Crearemos las pruebas para el post, partiendo de las pruebas de las categorías.

• 20 Dashboard: Pruebas para el Post

  Crearemos las pruebas para el post, partiendo de las pruebas de las categorías.

• 21 Dashboard: Pruebas para el Post, upload

  Vamos a realizar una corrección en el módulo de dashboard sobre el upload.

• 22 Dashboard: Pruebas para el Post, aserciones adicionales

  Vamos a implementar algunos métodos de aserciones adicionales.

• 23 Paso por Paso: Primer paso, Get

  Vamos a crear las pruebas para el primer paso del formulario paso por paso, el get.

• 24 Paso por Paso: Primer paso, Post

  Vamos a crear las pruebas para el primer paso del formulario paso por paso, el post.

• 25 Paso por Paso: Segundo paso, Company, Get

  Vamos a crear las pruebas para el segundo paso del formulario paso por paso, el get.

• 26 Verificar step

  Verificar la propiedad de step.

• 27 Implementar Factories para los pasos

  Implementamos los Factories de los pasos por pasos.

• 28 Paso por Paso: Segundo paso, Company, Post

  Vamos a crear las pruebas para el segundo paso del formulario paso por paso, el post.

• 29 Paso por Paso: Segundo paso, Person

  Vamos a crear las pruebas para el segundo paso del formulario paso por paso, el de personas el GET y POST.

• 30 Paso por Paso: Tercer paso, Detail

  Vamos a crear las pruebas para el tercer paso del formulario paso por paso, GET y POST.

• 31 Paso por Paso: Primer paso, Editar, Get

  Vamos a crear las pruebas para el primer paso del formulario paso por paso, el GET para editar.

• 32 Paso por Paso: Primer paso, Editar, Put

  Vamos a crear las pruebas para el primer paso del formulario paso por paso, el de detalle para editar en Put.

• 33 Paso por Paso: Segundo paso, Company, Get

  Vamos a crear las pruebas para el segundo paso, el de company del formulario paso por paso, editar en Get.

• 34 Historial y Shared data

  Hablaré sobre la comprobación del shared data.

• 35 Paso por Paso: Segundo paso, Company, Edit

  Vamos a crear las pruebas para el segundo paso, el de company del formulario paso por paso, editar en Put.

• 36 Paso por Paso: Segundo paso, Person

  Vamos a crear las pruebas para el segundo paso, el de person del formulario paso por paso, editar.

• 37 Paso por Paso: Tercer paso, Detail

  Vamos a crear las pruebas para el tercer paso, el de detail del formulario paso por paso, editar.

• 38 Paso por Paso: Primer paso, General, Error de validaciones

• 39 Paso por Paso: Primer paso, General, Error de validaciones, página anterior

  Prueba para crear un contacto general con errores de validaciones, página para el back.

• 40 Paso por Paso: Primer paso, General, Edit, Error de validaciones

  Prueba para editar un contacto general con errores de validaciones.

• 41 Paso por Paso: Segundo paso, Company, Error de validaciones

  Prueba para crear/editar un contacto compañía con errores de validaciones.

• 42 Paso por Paso: Segundo paso, Person, Error de validaciones

  Prueba para crear/editar un contacto persona con errores de validaciones.

• 43 Paso por Paso: Tercer paso, Detail, Error de validaciones

  Prueba para crear/editar un contacto detalle con errores de validaciones.

• 44 Carrito: Index

  Vamos a crear la prueba para verificar el index del carrito de compra.

• 45 Carrito: Agregar

  Vamos a crear la prueba para verificar cuando agregamos un item en el carrito en la base de datos.

• 46 Carrito: Modificar

  Vamos a crear la prueba para verificar cuando modificamos un item en el carrito en la base de datos.

• 47 Carrito: Sesión

  Vamos a verificar la sesión del carrito.

• 48 Carrito: Eliminar

  Vamos a crear las pruebas para cuando eliminemos un ítem existente y no existente en el carrito.

• 49 Carrito: Últimos detalles

  Hablamos sobre los cambios finales.

• 50 Todo: Listado

  Creamos la prueba para el listado de to dos

• 51 Todo: Crear

  Creamos la prueba para crear de to dos

• 52 Todo: Actualizar

  Creamos la prueba para actualizar to dos

• 53 Todo: Eliminar

  Creamos la prueba para eliminar to dos

• 54 Todo: In/Completado

  Vamos a crear las pruebas para probar si el To Do fueron in/completados.

• 55 Todo: Reorden

  Vamos a implementar la prueba para probar la reordenación.

• 56 Todo: Error de validación

  Vamos a implementar la prueba para errores de validación en el nombre del todo.

• 57 Prueba para upload

  Vamos a realizar una prueba para conocer el upload.

• 58 Prueba para upload: Crear

  Vamos a realizar una prueba para conocer el upload al momento de crear un post.

• 59 Prueba para upload: Imagen eliminada

  Vamos a realizar una prueba para verificar si se elimina la imagen anterior el upload.

Integración con Inertia - Laravel 9/10

• 1 Introducción

• 2 Crear controladores y modelos

  Vamos a crear los modelos y controladores que usaremos a lo largo de las secciones.

• 3 Crear migraciones

  Vamos a crear las migraciones que usaremos a lo largo de las secciones.

• 4 Demo: Rutas Inertia y Rutas Laravel

  Vamos a crear realizar una demostración sobre las rutas en Inertia y su funcionamiento con las rutas de Laravel.

• 5 Create: Crear un formulario y proceso de crear

  Vamos a crear el primer formulario que cree una categoría

• 6 Sobre los siguientes videos - Router e importación

• 7 Create: Crear una categoría

  Vamos a crear el proceso para crear una categoría.

• 8 Create: Aplicar validaciones y mostrar errores

  Vamos a realizar validaciones sobre el formulario.

• 9 Usar el layout de la aplicación

  Vamos a configurar el layout de la aplicación.

• 10 Usar componentes Vue de Inertia

  Vamos a ver cuales son los componentes de Inertia disponibles.

• 11 Usar componentes Vue de Inertia

  Vamos a reutilizar componentes existentes para mejorar el diseño de la aplicación.

• 12 Componentes y siguientes videos

• 13 Detalles del formulario

  Últimos detalles del formulario.

• 14 Editar registro: Crear un formulario

  Vamos a crear el apartado de edición.

• 15 Editar registro: Actualizar una categoría

  Vamos a actualizar un registro en la base de datos desde Laravel.

• 16 Generar SLUG de manera automática

  Vamos a generar el slug desde el validation.

• 17 Link: Enlace para crear y editar

  Vamos a crear enlaces para crear y editar.

• 18 Listado: Todos los registros

  Vamos a crear un listado inicial de registros.

• 19 Listado: Paginación

  Vamos a crear un listado paginado.

• 20 ProgressBar

  Vamos a conocer el funcionamiento de la barra de progreso.

• 21 Listado: Mejorar diseño

  Vamos a agregar un poco más de estilo para el listado.

• 22 Crear Container

  Vamos a crear un contenedor para la aplicación.

• 23 Crear componente de carta

  Crearemos el componente típico de carta.

• 24 Mejorar el aspecto de la paginación

  Vamos a mejorar el diseño del componente de paginación y botones de acción.

• 25 Botones de acción, estilo

  Vamos a dar algo de estilo para los enlaces de acción del listado.

• 26 Eliminar registro

  Vamos a realizar el proceso de eliminar el registro desde el listado.

• 27 Eliminar registro: Renderizar el enlace como un botón

  Vamos a cambiar de un enlace a un botón en el enlace de eliminar.

• 28 Publicar en git

Redirecciones y mensajes por sesión - Laravel 9/10

• 1 Introducción

• 2 Redirecciones

  Vamos a conocer cómo emplear las redirecciones junto con Inertia.

• 3 Mensajes Flash en Inertia

  Vamos a crear un mensaje flash para mostrar en inertia.

• 4 Extra: Estilo para el contenedor del mensaje Flash

  Vamos a dar algo de estilo a la caja del componente de flash message.

• 5 Publicar en git

CRUD para los post - Laravel 9/10

• 1 Aplicar con el código actual

• 2 Introducción

• 3 Replicar CRUD de las categorías

  Vamos a replicar el esquema existente para crear categorías, para los post.

• 4 Crear: Formulario base

  Vamos a terminar el proceso de creación.

• 5 Crear: Popular categoría de crear post

  Vamos a obtener el listado de post.

• 6 Editar: Formulario base

  Vamos a terminar el proceso de edición.

• 7 Extra: Fusionar creación y actualización en un solo componente de Vue

  Vamos a fusionar el proceso de editar y crear en un solo componente de vista.

• 8 Publicar en git

Upload de archivos - Laravel 9/10

• 1 Introducción

• 2 Simple

  Vamos a ver el esquema por defecto al momento de hacer un upload.

• 3 Vía componente de Oruga UI

  Vamos a conocer cómo extender Inertia con otros frameworks.

• 4 Vía Drag and Drop de Oruga UI - dropFiles constante

• 5 Vía Drag and Drop de Oruga UI

  Vamos a conocer el proceso de upload.

• 6 Extra: Mostrar imagen cargada

  Vamos a mostrar la imagen cargada.

• 7 Extra: Eliminar imagen cargada

  Vamos a crear una función de upload.

• 8 Extra: Descargar imagen cargada

  Vamos a mostrar el proceso de descarga.

• 9 Publicar en git

CKEditor - Laravel 9/10

• 1 Introducción

• 2 Instalar y configurar CKEditor

  Instalaremos y usaremos CKEditor en el proyecto.

• 3 Acomodar CSS

  Definimos un CSS para acomodar el diálogo de Oruga.

• 4 Publicar en git

Diálogos de confirmación - Laravel 9/10

• 1 Introduccion

• 2 List: Configurar esquema inicial para eliminación

  Creamos un sencillo esquema de eliminación para los post.

• 3 Tarea: Replicar en Categoría

  Replicamos el esquema de eliminación anterior para las categorías.

• 4 Acomodar CSS

  Vamos a agregar un CSS para el CKEditor.

• 5 Modals de Inertia

  Presentaremos los modales de Inertia.

Formulario paso por paso - Laravel 9/10

• 1 Introducción

• 2 Crear migraciones principales

  Vamos a crear las migraciones para los formularios.

• 3 Crear modelos principales

  Vamos a crear los modelos.

• 4 Formulario General: Estructura

  Crear controlador, validaciones y ruta.

• 5 Formulario General: Crear

  Vamos a crear el esquema para poder crear el contacto.

• 6 Formulario General: Actualizar

  Vamos a crear el esquema para poder actualizar el contacto.

• 7 Formulario Company: Crear y Actualizar

  Vamos a crear el esquema para poder crear el contacto para el paso 2.

• 8 Crear layout

  Vamos a crear el layout del formulario paso por paso.

• 9 Formulario Person: Crear y Actualizar

  Vamos a crear el esquema para poder crear el contacto para el paso 2.

• 10 Formulario Detail: Crear y Actualizar

  Vamos a crear el esquema para poder crear el contacto para el paso 2.

• 11 Integrando el formulario de Empresa en el paso por paso

  Vamos a integrar el segundo paso en el componente de Step.

• 12 Integrando el formulario de Persona en el paso por paso

  Vamos a integrar el segundo paso en el componente de Step.

• 13 Integrando el formulario de General en el paso por paso

  Vamos a integrar el primer paso en el componente de Step.

• 14 Integrando el formulario de Detalle en el paso por paso

  Vamos a integrar el tercer paso en el componente de Step.

• 15 Demo: Experimentar con las propiedades globales

  Vamos a conocer algunos mecanismos para crear propiedades globales.

• 16 Compartir datos, propiedad de step, primeros pasos

  Vamos a realizar pruebas con el mecanismo que permite generar datos globales.

• 17 Compartir datos, Implementar helper para indicar el paso actual

  Vamos a crear la función de ayuda que genera el paso actual.

• 18 Crear estilo para el paso por paso

  Vamos a crear un sencillo estilo para mostrar el paso por paso.

• 19 Renderizar un paso por vez

  Vamos a mostrar el formulario que corresponde al paso.

• 20 Paso anterior

  Vamos a crear la opción de paso anterior.

• 21 Parámetro de contacto general para los paso por paso

  Vamos a pasar el contacto general al resto de los pasos.

• 22 Paso 2 en el back, empresa o compañía

  Vamos a pasar un parámetro adicional para manejar el back desde detalle al formulario correcto.

• 23 Publicar en git

Filtros y campos de búsqueda - Laravel 9/10

• 1 Introducción

• 2 Seeders para los post

  Vamos a crear seeders para generar datos de pruebas para los posts.

• 3 Filtros

  Vamos a crear la opción de los filtros para los seleccionables.

• 4 Cambios realizados al código anterior

• 5 Campo de búsqueda

  Vamos a crear un campo de búsqueda para varios campos.

• 6 Filtrar por rango de fecha

  Vamos a crear un filtro por fechas.

• 7 Valores aplicados en los filtros desde el componente en Vue

  Vamos a colocar los valores de los props en el componente de Vue.

• 8 Cambios en la tabla

  Vamos a realizar algunos cambios en la tabla.

• 9 Aplicar filtros sin usar un botón

  Vamos a enviar los datos sin usar un botón.

• 10 debounce, retardo en los eventos

  Vamos a realizar un retardo al momento de escribir en el campo de tipo búsqueda.

• 11 Publicar en git

Ordenación - Laravel 9/10

• 1 Introducción

• 2 Ordenación

  Vamos a crear la estructura para la ordenación de las columnas del listado.

• 3 Corrección al código anterior

• 4 Publicar en git

• 5 Quinto Proyecto: Efectos del toast al remover, definir efectos en CSS

  Quinto Proyecto: Efectos del toast al remover, definir efectos en CSS

Filtros y campos de búsqueda: Detalles finales - Laravel 9/10

• 1 Introducción

• 2 Foco campo de texto

  Vamos a implementar el foco automático para el campo de búsqueda.

• 3 Definir un texto para la opción por defecto en los SELECT y Placeholder

  Vamos a mostrar un labels para los SELECT.

• 4 Botón submit largo

  Vamos a acomodar el diseño para el botón de filtrar.

• 5 Limpiar filtros

  Vamos a crear un botón para limpiar el filtro.

• 6 Publicar en git

Blog: Listado y detalle de post - Laravel 9/10

• 1 Introducción

• 2 Página de listado: Estructura inicial

  Vamos a crear el esqueleto de la app.

• 3 Cambios en el código anterior

• 4 Página de listado: Diseño

  Página de listado: Diseño

• 5 Página de detalle

  Vamos a crear la página de detalle.

• 6 Colocar formulario paso por paso en detalle

  Vamos a colocar el formulario paso por paso en el detalle del post.

• 7 Publicar en git

Carrito de compras: Estructura inicial - Laravel 9/10

• 1 Introducción

• 2 Listado de productos: Esquema inicial

  Vamos a crear el esqueleto del módulo.

• 3 Item de carrito

  Vamos a crear el controlador y estructura inicial para administrar un item del carrito.

• 4 Agregar un producto

  Vamos a implementar la opción de agregar un producto al carrito.

• 5 Compartir sesión

  Vamos a realizar la adaptación para compartir la sesión en los componentes de Vue.

• 6 Listado de productos: Adaptar

  Adaptamos el listado de post del carrito al nuevo esquema.

• 7 Item de carrito: Detalles finales

  Vamos a definir los detalles finales en el uso del item del carrito.

• 8 Vista de detalle del carrito

  Vista de detalle del carrito

• 9 Vista de detalle del carrito

  Vamos a crear una página para el detalle del carrito.

• 10 Publicar en git

Carrito de compras: Replicar en la base de datos - Laravel 9/10

• 1 Introducción

• 2 Crear migración y modelo

  Vamos a crear la estructura para trabajar con la base de datos.

• 3 Registrar cambios en la base de datos

  Vamos a guardar la sesión del carrito en la base de datos.

• 4 Establecer sesión en el login

  Vamos a escuchar cuando ocurre el login y replicar en la sesión el carrito.

• 5 Publicar en git

Carrito de compras: Mensajes - Laravel 9/10

• 1 Introducción

• 2 Componente de Toast de Oruga UI

• 3 Publicar en git

Carrito de compras: Total de ítems - Laravel 9/10

• 1 Introducción

• 2 Calcular total

  Vamos a calcular el total de elementos en el carrito.

• 3 Crear botón flotante

  Vamos a mostrar el total en una vista y crear el botón de carrito mostrando el total.

• 4 Publicar en git

Aplicación de To Do - Laravel 9/10

• 1 Introducción

• 2 Crear el esqueleto de la aplicación de to do: Controlador y componente Vue

  Vamos a crear la estructura base de la app to do.

• 3 Crear el esqueleto de la aplicación de to do: Listado

  Vamos a crear la estructura base de la app to do para el listado de to do.

• 4 Crear el esqueleto de la aplicación de to do: Formulario

  Vamos a crear la estructura base de la app to do para el formulario de crear to do.

• 5 Crear migración y modelo

  Vamos a crear el modelo y migración de los to do.

• 6 Crear to do

  Vamos a crear un to do desde en el servidor

• 7 Crear to do: Errores y validaciones

  Vamos a aplicar validaciones y mostrar errores al momento de crear un to to.

• 8 Popular listado de todos

  Vamos a mostrar el listado de to do de la base de datos.

• 9 Editar un todo

  Vamos a actualizar un to do.

• 10 Editar un todo: Mostrar errores

  Vamos a aplicar validaciones y mostrar errores al momento de actualizar un to to.

• 11 Eliminar un to do

  Vamos a eliminar un to do en la base de datos.

• 12 Marcar completado un to do

  Vamos a marcar como completado un to do.

• 13 Eliminar todos los to do

  Vamos a eliminar todos los to do.

• 14 Reordenación, instalar plugin y configuración inicial

  Vamos a instalar el plugin de Drag and Drop para reordenar los todos

• 15 Revisión al código anterior

• 16 Reordenación, aplicar cambios en el servidor

  Vamos a reordenar los to do desde el servidor.

• 17 Cambios finales

• 18 Validaciones

• 19 Publicar en git

Videos Legacy

• 1 2 - Create: Crear un formulario

  Vamos a crear el primer formulario.

• 2 2 - Create: Crear una categoría

  Vamos a crear el proceso para crear una categoría.

• 3 2 - Usar componentes Vue de Inertia

  Vamos a reutilizar componentes existentes para mejorar el diseño de la aplicación.

• 4 2 - ProgressBar

  Vamos a conocer el funcionamiento de la barra de progreso.

• 5 9 - Filtrar por rango de fecha

  Vamos a crear un filtro por fechas.

• 6 9 - Valores aplicados en los filtros desde el componente en Vue244

  Vamos a colocar los valores de los props en el componente de Vue.

Videos generales sobre el desarrollo en Laravel Inertia - Sección Free exclusiva

• 1 Emplear Laravel Inertia o crear una app en Laravel Rest Api Vue React

  Te doy MIS motivos de cuando debes de emplear una Rest API o Laravel Inertia y adicionalmente comento la importancia de conocer como funciona la herramienta Inertia para poder aprovecharla y evitar confusiones implementando hibridos Inertia Rest API

22-07-2022 - Andrés Cruz

• Categoría
• /
• Laravel
• /
• Curso y Libro primeros pasos con Laravel Inertia + Vue.js y Tailwind.css - 2025