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

• Categorías
• /
• Laravel
• /
• Curso primeros pasos con Laravel Inertia + Vue.js y Tailwind.css

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

Integración con Inertia

• 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

• 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

• 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

• 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

• 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

• 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

• 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

• 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

• 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

• 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

• 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

• 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

• 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

• 1 Introducción

• 2 Componente de Toast de Oruga UI

• 3 Publicar en git

Carrito de compras: Total de ítems

• 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

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