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

22-07-2022 - Andrés Cruz

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

Precio mínimo:

$8.0

Condiciones:

  • Todo el curso de por vida y descarga individual
  • Un único pago para todo el curso
  • Actualizaciones más frecuentes que en Udemy para agregar más y más clases al curso.
  • Contacto por mensajes

Precio mínimo:

$9.9

Hasta el --/--

Condiciones:

  • Todo el curso de por vida
  • Un único pago para todo el curso
  • Actualizaciones frecuentes para agregar más y más clases al curso.
  • Contacto por mensajes

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:

  • 2 Primeros pasos con Inertia

    En este primer capítulo nos enfocaremos en mencionar el ecosistema empleado para Windows, Mac y Linux, crearemos el proyecto en Laravel Inertia, conoceremos su estructura, que trae cada módulo principal del scaffolding y conoceremos qué estructura trae por defecto.

    CRUD Categorías
    CRUD Categorías
  • 3 Redirecciones y mensajes tipo flash

    Otro elemento fundamental que debemos conocer, es el uso de redirecciones para poder recargar los componentes de Vue en la vista, también el uso de mensajes de tipo flash, que al usar en la vista un cliente como Vue en vez de blade, perdemos este tipo de integraciones que vienen desde Laravel básico y en su lugar usamos la funcionalidad para compartir datos de Inertia.

    • Práctica: Crear CRUD para los Post.
    • En este apartado, vamos a crear un CRUD para los post, poniendo en práctica parte de los conocimientos que aprendimos en secciones anteriores.
    • Formulario paso por paso.
  • 4 Práctica: Crear CRUD para los Post

    En este apartado, vamos a crear un CRUD para los post, poniendo en práctica parte de los conocimientos que aprendimos en secciones anteriores, en este apartado, incluiremos plugins de terceros como CKEditor.

    CRUD post
    CRUD post
  • 5 Formulario paso por paso

    En este apartado, vamos a crear un formulario paso por paso empleando las características de Inertia; aprenderemos a:

    • Incluir componentes de Inertia (Vue) dentro de componentes.
    • Manejo de eventos en Vue.
    • Comunicar componentes.
    • Registrar eventos.
    • Usar la funcionalidad para compartir datos desde los controladores.
    Formulario paso por paso
    Formulario paso por paso
  • 6 Definir filtros y campo de búsqueda

      En este capítulo vamos a usar la combinación de eventos de Vue con peticiones para realizar la búsqueda y filtrado.

    • Manejo de eventos en Vue.
    • Comunicar componentes.
    • Registrar eventos.
    • Definir campos de ordenación para las tablas.
    • Trabajar en definir la ordenación para las columnas bajo demanda del usuario de manera ascendente o descendente, en la práctica, el usuario podrá escoger si ordenar por el id, título y demás columnas.
    Filtros y campo de busqueda
    Filtros y campo de busqueda
  • 7 Carrito de compras

    Siguiendo con la creación de pequeños proyecto para la aplicación y poniendo en práctica y conociendo variaciones sobre el uso de eventos, comunicación entre componentes y componentes padres e hijos, entre otras lógicas aplicadas, vamos a crear un carrito de compras para las publicaciones de tipo publicidad.

    También en varias secciones, vamos a extender el componente de shopping cart para replicar en la base de datos, comunicación vía mensajes para mostrar actualizaciones y definir un botón para mostrar el total de ítems en el carrito.

  • Extra: Introducción a Vue

    Al ser Vue una tecnología imprescindible, traemos la introducción a Vue que forma parte de mi curso gratuito sobre Vue que está disponible en YouTube.

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.

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.


Andrés Cruz
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz en Udemy

Acepto recibir anuncios de interes sobre este Blog.

Conozca nuestros cursos sobre Laravel, CodeIgniter, Flutter, Electron, Django, Flask y muchos más!

Ver los cursos
¡Hazte afiliado en Gumroad!

!Cursos desde!

4$

En Academia

Ver los cursos

!Libros desde!

1$

Ver los libros
!Web Alojada en Hostinger!