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

Este curso ofrece una introducción desde cero a Laravel Inertia y conocer los detalles más importantes de esta tecnología; uso de componentes en Vue, Tailwind.css, Laravel y Node.

04-04-2025 - Andrés Cruz

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

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 con Laravel.

• 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.

• 6 Jetstream

  Vamos a hablar sobre el paquete que estaba disponible hasta la versión 12.

• 7 Aviso sobre las siguientes clases

• 8 Nuevas características y la marca de Inertia

  Vamos a hablar sobre las nuevas características que tenemos en Inertia.

• 9 Aviso sobre las siguientes clases, usar Laravel 11 o ...

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: Aplicar validaciones y mostrar errores

  Vamos a realizar validaciones sobre el formulario.

• 6 Usar el layout de la aplicación

  Vamos a configurar el layout de la aplicación.

• 7 Usar componentes Vue de Inertia

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

• 8 Componente de migajas de pan: breadcrumbs

  Hablaremos del componente de las migajas de pan.

• 9 Siguientes clases

• 10 Detalles del formulario

  Últimos detalles del formulario, grid y padding.

• 11 Create: Terminar implementación

  Vamos a terminar la implementación.

• 12 Editar registro: Crear un formulario

  Vamos a crear el apartado de edición.

• 13 Editar registro: Actualizar una categoría

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

• 14 Editar registro: Proceso completo

  Te muestro como quedó el formulario de editar.

• 15 Generar SLUG de manera automática

  Vamos a generar el slug desde de validación.

• 16 Listado: Todos los registros

  Vamos a crear un listado inicial de registros.

• 17 Link: Enlace para crear y editar

  ​Vamos a crear enlaces para crear y editar.​

• 18 Listado: Paginación

  Vamos a crear un listado paginado.

• 19 Crear un componente de paginación en Vue

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

• 20 ProgressBar

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

• 21 Cambios hasta este momento

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

  ​Vamos a tratar varios temas que quedaron pendientes.​

• 23 Crear Container

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

• 24 Crear componente de carta

  ​Crearemos el componente típico de carta.​

• 25 Enlaces de acción

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

• 26 Paginación

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

• 27 Eliminar registro

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

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

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

• 29 Publicar en github

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

• 30 Cambios hasta este momento

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_12

• 6 Cambios hasta este momento

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_12

• 8 Cambios hasta este momento

• 9 Cambios hasta este momento

• 10 Extra: Composition API: setup en Atributo

  Haremos una demostración de como pasar el código con el método setup a un atributo.

• 11 Extra: Componentes con TypeScript

  Haremos una demostración de habilitar TypeScript en un componente en Vue

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 Cambios hasta este momento

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

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

• 7 Vía componente de Oruga UI: Upload

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

• 8 Vía Drag and Drop de Oruga UI

  Vamos a conocer el proceso de upload.

• 9 Mostrar imagen cargada

  ​Vamos a mostrar la imagen cargada.​

• 10 Eliminar imagen cargada

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

• 11 Descargar imagen cargada

  ​Vamos a mostrar el proceso de descarga.​

• 12 Publicar en github

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

• 13 Cambios hasta este momento

CKEditor

• 1 Introducción

• 2 Instalar y configurar CKEditor

  Instalaremos y usaremos CKEditor en el proyecto.

• 3 Licencia GPL

  Licencia GPL

• 4 Acomodar CSS

  Vamos a agregar un CSS para el CKEditor.

• 5 Publicar en git

• 6 Cambios hasta el momento

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 Cambios hasta este momento

  Cambios hasta este momento

• 5 Modals de Inertia

  Presentaremos los modales de Inertia.

• 6 Modal para confirmar la eliminación

  Vamos a implementar el modal para eliminar

• 7 Extra: definir enlaces en el menú

  Definimos los enlaces de navegación.

• 8 Publicar en github

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

Formulario paso por paso

• 1 Introducción

  Introducción

• 2 Presentación

• 3 Sobre el resto de la sección

• 4 Crear migraciones principales

  Vamos a crear las migraciones para los formularios.

• 5 Crear modelos principales

  Vamos a crear los modelos.

• 6 Formulario General: Estructura

  Crear controlador, validaciones y ruta.

• 7 Formulario General: Crear

  Vamos a crear el esquema para poder crear el contacto.

• 8 Formulario General: Actualizar

  Vamos a crear el esquema para poder actualizar el contacto.

• 9 Formulario Company: Crear y Actualizar

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

• 10 Formulario Company: Crear y Actualizar

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

• 11 Formulario Person: Crear y Actualizar

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

• 12 Formulario Detail: Crear y Actualizar

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

• 13 Integrando el formulario: Presentación

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

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

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

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

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

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

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

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

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

• 18 Experimentar con las propiedades globales

  Vamos a conocer algunos mecanismos para crear propiedades globales.

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

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

• 20 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.

• 21 Compartir datos propiedad de step actualizar

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

• 22 Crear estilo para el paso por paso

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

• 23 Renderizar un paso por vez

  Vamos a mostrar el formulario que corresponde al paso.

• 24 Paso anterior

  Vamos a crear la opción de paso anterior.

• 25 Parametro de contacto general para los paso por paso

  Par metro de contacto general para los paso por paso

• 26 Detalles finales

  Detalles finales

• 27 Publicar en github

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

• 28 Resumen

• 29 Cambios hasta este momento

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

• 14 Cambios hasta este momento

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

• 7 Cambios hasta este momento

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_12

• 8 Cambios hasta este momento

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

• 16 Mejorar diseño: Listado de Productos

  Vamos a mostrar el diseño para el listado de productos.

• 17 Mejorar diseño: Agregar item desde el detalle del producto

  Vamos a mostrar el diseño para agregar productos al carrito.

• 18 Nombre del producto

  Vamos a mostrar el título del producto en el detalle del item del carrito.

• 19 Remover opción de agregar el producto en detalle si ya est en el carrito

  Si el item esta en el carrito quitamos la opci n desde el detalle

• 20 En detalle, resaltar producto en el carrito

  En detalle, vamos a resaltar el item actual en el carrito.

• 21 En detalle, Animación al agregar producto en el carrito

  Creamos una sencilla animación para mostrar/ocultar la opción de agregar un item al carrito

• 22 Cambios hasta el momento

  Cambios hasta el momento

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

• 20 Cambios hasta este momento

  Cambios hasta este momento

• 21 Siguientes clases

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.

• 60 Corrección filtrado

  Vamos a corregir algunos errores del listado de posts.

• 61 Prueba para filtros

  Vamos a crear una prueba para el filtro de testing.

• 62 Publicar en github

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

• 63 Conclusiones

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

Conclusiones

• 1 Curso de Laravel Livewire

• 2 Laravel a producción

• 3 Laravel a producci n Apache Claves

  Vamos a hablar sobre los aspectos claves a tener en cuenta para subir nuestra app a producci n Apache requisitos variables de entorno y Node npm run build

• 4 Laravel a producci n Apache FTP

  Vamos a hablar sobre subir la app mediante FTP

• 5 Laravel a producción, Apache: Configuraciones finales

  Vamos a hablar sobre el resto de las configuraciones que debes de hacer.