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.
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.
Finalmente, la estructura del curso:
Por aquí tienes el listado completo de clases que vamos a cubrir en el libro y curso:
Introducción
-
1 Introducción
-
2 ¿Qué es Laravel Inertia?
-
3 Sobre el curso
-
4 Mac y Linux: Crear un proyecto con el instalador de Laravel y Sail
Vamos a crear un proyecto en Laravel.
-
5 Windows: Crear un proyecto con el instalador de Laravel y Laragon
Vamos a crear un proyecto Laravel Inertia en entorno Windows.
-
6 Crear un proyecto en git
Vamos a subir el proyecto a git.
-
7 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.
-
8 Rutas definidas por Inertia
Daremos una presentación al funcionamiento y uso de las rutas.
-
9 Realizar preguntas
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
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 Presentació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.
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.
![Andrés Cruz Andrés Cruz](/public/images/perfil.jpg)
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter