Construyendo un SPA con Vue.js & Laravel

En esta serie aprenderemos a integrar Vue.js y Vue Router para construir una SPA (Single Page Application) utilizando Laravel como backend.

Construyendo un SPA con Vue.js & Laravel

Resumen del curso

  • De principiante a experto
  • 2h 52m de video HD
  • 27 lecciones
  • Ejercicios prácticos
  • Acceso de por vida
  • Aprende a tu propio ritmo

Lecciones cortas, concisas y precisas.

No te quemes en búsquedas exhaustivas que te impiden lograr tus metas.

En Aprendible obtienes:

  • Lecciones que optimizan tu aprendizaje en menor tiempo
  • Audios y videos de alta calidad
  • Explicaciones paso a paso, sin rodeos, ni balbuceos.

Construye desde HOY tu camino como Desarrollador Web Moderno

Contenido del curso

2h 52m de contenido, 27 lecciones

1. Introducción a SPA
FREE
02:05
En este video introductorio haremos una pequeña explicación de lo que significa y cómo funciona un SPA, además revisaremos la aplicación que construiremos.
795
2. Instalación de dependencias
FREE
02:38
En esta lección vamos a instalar las dependencias necesarias de javascript necesarias para nuestro SPA con Vue.js
690
3. Compilación de archivos
PRO
07:17
Una vez que tenemos instaladas las dependencias NPM, necesitamos una forma de procesarlas, empaquetarlas y optimizarlas (automáticamente) para que nuestra aplicación pueda correr en un navegador fluidamente y sin problemas.
533
4. Configurando BrowserSync
PRO
04:36
En esta lección vamos hacer que el navegador refleje los cambios inmediatamente después de hacer un cambio en la aplicación. Para ello vamos a utilizar browserSync.
488
5. Definiendo la vista principal
PRO
05:20
En esta lección definiremos la vista inicial que cargaremos con Laravel. Luego de esta carga inicial, Vue.js y VueRouter se encargarán de la navegación.
473
6. Instalando Vue Router
PRO
03:42
En esta lección instalaremos Vue Router y solucionaremos un problema que nos ocurre cuando laravel-mix intenta instalar dependencias automáticamente.
449
7. Creando las rutas
PRO
03:24
En esta lección veremos cómo funcionan las rutas en Vue Router, y definimos las rutas que necesitamos para nuestra aplicación.
377
8. Definiendo la navegación
PRO
07:56
En esta lección definimos la navegación de nuestro SPA y vemos cómo activar y desactivar links dependiendo de la página en la que estemos.
325
9. Creando las vistas
PRO
06:50
En esta lección crearemos componentes de Vue.js para cada una de las vistas de nuestra aplicación.
306
10. Mostrando los posts via AJAX
PRO
09:54
En esta lección definimos una ruta API para obtener los posts via AJAX con AXIOS, y así poder mostrarlos en la vista Home.vue
301
11. Mostrando los posts - parte 2
PRO
06:22
En esta lección mostramos la categoría, las etiquetas, el usuario de cada publicación. Utilizamos "accesores" de Eloquent para formatear la fecha de publicación.
269
12. Rutas con nombre
PRO
05:39
En esta lección le damos nombre a las rutas al igual que lo hacemos en Laravel y definimos una vista 404 para las rutas no definidas.
267
13. Mostrando posts individuales
PRO
09:25
En esta lección veremos cómo pasar y recibir parámetros a través de las rutas de Vue Router y creamos la ruta API en Laravel para que nos devuelva publicaciones individuales.
246
14. Uso de API Resources en Laravel
PRO
08:02
En esta lección modificamos la respuesta del post individual para que nos devuelva también sus relaciones. También vemos brevemente qué son y cómo utilizar API Resources de Eloquent en Laravel.
265
15. Extracción de componentes
PRO
07:20
En esta lección extraemos la cabecera de los posts para poder reutilizarlo y organizar mejor nuestra aplicación, y extraemos también la navegación del sitio.
227
16. Mostrar posts por categoría
PRO
05:12
En esta lección implementaremos la vista para mostrar solamente los posts que pertenecen a cierta categoría.
218
17. Mostrar posts por etiquetas
PRO
03:30
En esta lección implementamos la vista para mostrar las publicaciones filtradas por etiquetas.
215
18. Componentes para los posts
PRO
05:15
Actualmente en la vista Home CategoryPosts y TagsPosts, tenemos prácticamente el mismo contenido en cuanto al template, así que vamos a extraer todo este contenido a un componente dedicado para listar las publicaciones.
212
19. Parámetros a propiedades
PRO
08:01
En esta lección permitimos que los parámetros de las rutas sean enviados automáticamente como propiedades a los componentes, y de esa forma quitar la dependencia del router dentro de las vistas. También solucionamos un problema de renderización con la vista TagsPosts.
208
20. Implementando la vista archivo
PRO
09:01
En esta lección implementamos la página de archivo y extraemos los links de categorías y publicaciones para poder reutilizarlos fácilmente.
199
21. Agregando los comentarios
PRO
02:11
En esta lección creamos un componente dedicado para mostrar los comentarios de Disqus en la página individual de las publicaciones.
205
22. Paginación con Vue Router
PRO
08:49
En esta lección vamos a implementar la paginación posts con Vue Router utilizando la información de paginación que nos devuelve Laravel desde la API.
204
23. Componente de paginación reutilizable
PRO
09:47
En esta lección vamos a extraer la paginación que creamos en la lección anterior, para poder reutilizarla en la vista de categorías y etiquetas.
186
24. Efectos de transición
PRO
08:57
En esta lección veremos cómo utilizar efectos de transición en Vue.js, y lo utilizaremos para cambiar de páginas. También veremos cómo utilizar las animaciones la librería Animate.css con Vue.js.
201
25. Botones de compartir
PRO
05:25
En esta rápida lección creamos un componente que encapsule los botones de compartir las publicaciones en redes sociales.
189
26. Formulario de contacto
PRO
10:12
En esta lección implementaremos el formulario de contacto para que envíe la información del usuario vía AJAX y le agregamos transiciones de Vue.js
204
27. Quitando el hash de la URL
PRO
05:13
En esta lección vamos a quitar el hash de las urls de nuestro SPA para utilizar el modo historial. Veremos también cómo corregir algunos errores en Laravel causados por este cambio.
243

Tu instructor

Jorge García

Jorge García Coello

Aprendible.com

Jorge García es creador de Aprendible.com yDesarrollador Certificado en LaravelA través de su plataforma de aprendizaje y de otras plataformas de estudio, desde 2015 ha ayudado a decenas de miles de desarrolladores a mejorar sus oportunidades dentro del Desarrollo Web.

Lo que opinan nuestros estudiantes

Miles de desarrolladores han transformado su carrera con nosotros
WOW! Cada vez me impresionas más! Excelente trabajo! Ahora a probarlo
Beto Vásquez
Beto Vásquez
Estos videos son impresionantes, no he visto nada mejor que ello. Un material muy limpio muy claro y profesional.
Kenneth Ruiz
Kenneth Ruiz
Excelente tutorial ! Mil gracias. Como siempre todo muy bien explicado y de una manera sencilla.
Dileydi Ramos
Dileydi Ramos
Muchas gracias Jorge, muy clara la explicación. Gracias por aprendible.com enserio AMO tus videos los AMO.
César Cruz
César Cruz
Más del 90% de nuestros estudiantes recomiendan Aprendible por la calidad de los cursos.