Vue.js 2 #11 : Crear aplicación con Lumen y Vue.js (Parte 2)

Continuamos con la segunda parte de la mini-serie en la que estamos creando una app con Lumen como backend y Vue.js 2 como frontend.

Como ya he dicho, vamos a utilizar Vue.js 2 como framework para el frontend desde el cual haremos las peticiones a la API que creamos en el post anterior y mostraremos los resultados (crear, eliminar o listar). Para hacer estas consultas utilizaremos una librería JS llamada Axios que ya utilizamos anteriormente, también utilizaremos otra librería UI llamada Element creada especialmente para Vue.js con componentes para crear una interface de usuario fácilmente. Por último, utilizaremos una librería llamada Vuex (está inspirada en Flux, Redux y Elm) que es una librería que nos permite gestionar el estado de nuestra app y así facilitar la comunicación entre componentes y no tener que estar utilizando eventos (como vimos anteriormente) para pasar información entre componentes, porque conforme la app vaya creciendo cada vez se haría más complicado el utilizar los eventos. Por tanto, con Vuex, podremos tener un store o almacenamiento global con datos y funciones accesibles por todos los componentes.

Continuar leyendo «Vue.js 2 #11 : Crear aplicación con Lumen y Vue.js (Parte 2)»

Vue.js 2 #10 : Crear aplicación con Lumen y Vue.js (Parte 1)

Ya hemos visto como consumir una API con Vue.js anteriormente, en esta miniserie de entradas (no sé cuántas tendrá), veremos como crear una API con Lumen (micro-framework de los creadores de Laravel) y consumirla con Vue.js 2, es decir, Lumen será el backend y Vue.js 2 será el frontend de la app. La aplicación de ejemplo que crearemos será una web muy simple para compartir enlaces (un link sharing). Digo que la app que crearemos será muy simple porque no tendrá sistema de usuarios (ya veremos en otro momento como hacerlo), ni sistema de votos, ni nada complejo, simplemente se podrán ver, crear y eliminar los enlaces.

En esta primera entrada, veremos como crear la API para esta app. Esta API será súper simple, con ella simplemente podremos obtener todos los enlaces y crear y eliminar un enlace.

Continuar leyendo «Vue.js 2 #10 : Crear aplicación con Lumen y Vue.js (Parte 1)»

Vue.js 2 #9 : vue-cli y componentes de un solo archivo

Hoy vamos a instalar el paquete vue-cli que nos permite generar, desde la línea de comandos, una estructura básica para nuestro proyecto Vue.js. Hay varios tipos de templates con diferentes paquetes y funcionalidades cada uno (las puedes ver aquí) y podemos elegir el que queramos según nuestras necesidades.

También pasaremos el ejemplo creado con componentes en el post #4 a componentes de un solo archivo, es decir, crearemos a partir de uno de los templates que nos provee el paquete vue-cli, un ejemplo igual que el del post #4, pero en vez de que todos los componentes estén en el mismo archivo, cada componente será un archivo .vue con su HTML, JS y CSS.

Continuar leyendo «Vue.js 2 #9 : vue-cli y componentes de un solo archivo»

Vue.js 2 #8 : Crear rutas con vue-router y aplicar una transición al cambiar de ruta

Los mismos creadores de Vue.js han creado un plugin para Vue.js que nos permite añadir rutas a nuestra aplicación. En esta entrada añadiremos esta librería llamada vue-router y crearemos un ejemplo sencillo dándole estilo con la librería llamada Vuetify, que nos permite añadir estilos Material Design. También le añadiremos una transición fade cuando se cambie de ruta, es decir, el contenido de la ruta se mostrará gradualmente según el tiempo que pongamos.

Continuar leyendo «Vue.js 2 #8 : Crear rutas con vue-router y aplicar una transición al cambiar de ruta»

Vue.js 2 #7 : Consumir una API con la librería Axios y crear filtros personalizados

En esta entrada, vamos a explicar como consumir una API con la librería Axios y crearemos un filtro personalizado para darle formato a unos valores que obtendremos de la API. En este caso, el filtro pondrá un punto cada tres números, es decir, hará de separador de millares.

Continuar leyendo «Vue.js 2 #7 : Consumir una API con la librería Axios y crear filtros personalizados»

Vue.js 2 #6 : Custom directives

En esta entrada vamos a tratar las custom directive. Las directivas son atributos que nos permite añadir Vue.js a nuestro HTML. Son atributos del estilo v-*, nosotros algunos ya los hemos practicado y explicado anteriormente. Por tanto, visto qué son las directivas, las directivas personalizadas (custom directives) son directivas que creamos nosotros mismos con una funcionalidad específica.

Continuar leyendo «Vue.js 2 #6 : Custom directives»