
Construyendo un SPA con Vue.js & Laravel
0%
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:051. 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:382. 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:173. 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:364. 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:205. 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:426. 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:247. 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:568. 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:509. Creando las vistas
En esta lección crearemos componentes de Vue.js para cada una de las vistas de nuestra aplicación.
PRO
09:5410. 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:2211. 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:3912. 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:2513. 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:0214. 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:2015. 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:1216. 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:3017. Mostrar posts por etiquetas
En esta lección implementamos la vista para mostrar las publicaciones filtradas por etiquetas.
PRO
05:1518. 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:0119. 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:0120. 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:1121. 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:4922. 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:4723. 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:5724. 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:2525. 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:1226. 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:1327. 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.