Construyendo un SPA con Vue.js & Laravel

Construyendo un SPA con Vue.js & Laravel

27 lecciones 2h 52m

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

FREE
02:05

1. Introducción a SPA

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.

FREE
02:38

2. Instalación de dependencias

En esta lección vamos a instalar las dependencias necesarias de javascript necesarias para nuestro SPA con Vue.js

FREE
07:17

3. Compilación de archivos

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.

FREE
04:36

4. Configurando BrowserSync

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.

FREE
05:20

5. Definiendo la vista principal

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.

FREE
03:42

6. Instalando Vue Router

En esta lección instalaremos Vue Router y solucionaremos un problema que nos ocurre cuando laravel-mix intenta instalar dependencias automáticamente.

PRO
03:24

7. Creando las rutas

En esta lección veremos cómo funcionan las rutas en Vue Router, y definimos las rutas que necesitamos para nuestra aplicación.

PRO
07:56

8. Definiendo la navegación

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.

PRO
06:50

9. Creando las vistas

En esta lección crearemos componentes de Vue.js para cada una de las vistas de nuestra aplicación.

PRO
09:54

10. Mostrando los posts via AJAX

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

PRO
06:22

11. Mostrando los posts - parte 2

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.

PRO
05:39

12. Rutas con nombre

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.

PRO
09:25

13. Mostrando posts individuales

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.

PRO
08:02

14. Uso de API Resources en Laravel

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.

PRO
07:20

15. Extracción de componentes

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.

PRO
05:12

16. Mostrar posts por categoría

En esta lección implementaremos la vista para mostrar solamente los posts que pertenecen a cierta categoría.

PRO
03:30

17. Mostrar posts por etiquetas

En esta lección implementamos la vista para mostrar las publicaciones filtradas por etiquetas.

PRO
05:15

18. Componentes para los posts

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.

PRO
08:01

19. Parámetros a propiedades

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.

PRO
09:01

20. Implementando la vista archivo

En esta lección implementamos la página de archivo y extraemos los links de categorías y publicaciones para poder reutilizarlos fácilmente.

PRO
02:11

21. Agregando los comentarios

En esta lección creamos un componente dedicado para mostrar los comentarios de Disqus en la página individual de las publicaciones.

PRO
08:49

22. Paginación con Vue Router

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.

PRO
09:47

23. Componente de paginación reutilizable

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.

FREE
08:57

24. Efectos de transición

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.

PRO
05:25

25. Botones de compartir

En esta rápida lección creamos un componente que encapsule los botones de compartir las publicaciones en redes sociales.

PRO
10:12

26. Formulario de contacto

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

PRO
05:13

27. Quitando el hash de la URL

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.

Otros cursos que te pueden interesar