Rutas anidadas o sub-rutas con vue-router

La mayoría de las aplicaciones están compuestas por múltiples componentes anidados unos dentro de otros y estos componentes suelen compartir los mismos segmentos de una URL (/tasks y /tasks/1, por ejemplo). vue-router nos da la posibilidad de crear rutas anidadas o sub-rutas para cubrir esta necesidad de una forma muy simple y de esta forma poder organizar mejor nuestro código y nuestras rutas.

Regístrate para ver ésta y cientos de lecciones exclusivas.

Manejo de errores 404 con vue-router

Crea una SPA con vue-router

Cuando creamos un Single Page Application (SPA) con un framework de JavaScript como Vue.js, debemos manejar escenarios donde el usuario intente acceder a una URL que no existe o ha sido eliminada, al igual que cuando trabajamos con frameworks de backend como Laravel. En esta lección aprenderemos cómo podemos manejar errores de tipo 404 en Vue.js utilizando una ruta y un componente para ello. Además veremos algunos trucos y técnicas adicionales usando navegación mediante código, helpers y más.

Regístrate para ver ésta y cientos de lecciones exclusivas.

Manejo de estado básico con Vue.js

Crea una SPA con vue-router

En esta lección aprenderemos cómo podemos extraer el estado (datos) de nuestra aplicación a un objeto centralizado al cual todos los otros componentes tendrán acceso. De esta forma entonces podremos obtener la tarea desde el componente de Detalles (o de cualquier otro componente) y sincronizar las tareas a lo largo de todos nuestros componentes sin necesidad del paso de propiedades ni del manejo de eventos. Esta lección es una antesala a una próxima parte del curso donde aprenderemos a utilizar Vuex.

Regístrate para ver ésta y cientos de lecciones exclusivas.

Menú dinámico en Laravel

Banner menú dinámico

Establecer un menú dinámico en nuestro proyecto web, nos permitirá abrir la posibilidad de cambiar la estructura web sin que esto afecte el diseño. En ocasiones podemos encontrarnos en la situación de crear un proyecto cuyas opciones de menú sean dinámicas o dependan directamente del contenido, en estos casos lo ideal es adaptar el proyecto para que el cambio en su estructura sea rápido y ágil con la creación de un menú dinámico.

En el siguiente tutorial exploraremos todos los pasos necesarios para crear dicho menú:

Ver post

Rutas dinámicas con vue-router

Crea una SPA con vue-router

En esta lección vamos a asumir que necesitamos agregar más campos a la tarea (por ejemplo una descripción detallada) y por lo tanto necesitamos crear nuevas rutas para mostrar el detalle de la tarea y poder editarla. Estas nuevas rutas serán dinámicas (puesto que cada tarea tiene un identificador -o ID- diferente). Además en esta lección te enseñaré cómo navegar de forma programática (o mediante código) con vue-router, cómo pasar propiedades desde una ruta hacia un componente y mucho más.

Regístrate para ver ésta y cientos de lecciones exclusivas.

Convenciones de nombres de Eloquent en Laravel

banner Convenciones de Modelos de Eloquent en Laravel

Laravel es un framework que usa el paradigma de programación “Convención por encima de Configuración” (Convention over Configuration), el cual consiste en que el framework toma decisiones triviales y el desarrollador sólo necesita especificar los aspectos no convencionales de la aplicación. La principal ventaja de conocer y usar las convenciones establecidas por el framework es que te permite desarrollar una aplicación de una forma más fácil y rápida. Así que veamos a continuación cuáles son algunas de las convenciones en Eloquent y de qué manera podemos trabajar con ellas.
Ver post

Personalizar el estilo del menú de Vue Router

En la lección anterior sobre Vue Router, aprendimos cómo utilizar este paquete para crear los enlaces de nuestra Single Page Application (SPA), sin embargo a estos enlaces aún les hace falta un poco de estilo. Es por esto que en esta nueva lección vamos a agregarle los estilos de Bootstrap en nuestro caso, pero te enseñaré cómo puedes modificar el HTML para que se adapte a cualquier otro framework de CSS.

Regístrate para ver ésta y cientos de lecciones exclusivas.

Instalación y uso de Vue Router en Vue.js 2

Crea una SPA con vue-router

Crear una aplicación de una sola página o SPA (por sus siglas en inglés “Single Page Application”) es muy sencillo con Vue.js.

Esto es debido a que con Vue.js nosotros podemos “componer” nuestra aplicación de pequeños componentes independientes como hemos aprendido hasta ahora y también contamos con un paquete llamado vue-router que nos permite atar o enlazar una o más URLs a uno o más componentes específicos, indicarle a Vue dónde queremos mostrar las secciones y por supuesto también nos ayuda a generar los enlaces de las diferentes secciones.

Es por ello que a partir de ahora crearemos componentes con la intención de que estos representen secciones o sub-secciones dentro de nuestra aplicación y vamos a instalar y a utilizar vue-router para enlazar estos componentes a diferentes URLs. Vamos a comenzar con un ejemplo sencillo en el siguiente video:

Ver post

Organización de los componentes en Vue.js 2

Si quieres crear un SPA con Vue 2, es posible que necesites agregar muchos componentes, por lo tanto sería conveniente organizarlos en diferentes subdirectorios y esto es lo que haremos en la siguiente lección, apoyándonos por supuesto de vue-cli y de webpack como ya hemos aprendido. Además veremos tips adicionales sobre cómo usar objetos globales, configurar PurifyCSS y más.

Regístrate para ver ésta y cientos de lecciones exclusivas.

Suscríbete a nuestro boletín

Te enviaremos publicaciones con consejos útiles y múltiples recursos para que sigas aprendiendo.

Suscríbete a nuestro boletín

Recibe consejos útiles, promos y múltiples recursos directamente en tu correo.

Tu nombre y correo serán enviados directamente a MailChimp. No compartiremos tus datos con otras empresas.