Desarrollo Web

Incorporando Vue.js en WordPress

Como parte de la evolución en el desarrollo de WordPress, decidimos incluir a nuestro flujo de trabajo una herramienta que está dando mucho de qué hablar, gracias a sus características, las que hacen que el desarrollo en javascript sea mucho más fácil. Hablamos de la herramienta Vue.js.

Vue.js es un framework javascript progresivo que permite construir interfaces de usuarios en proyectos de pequeño y gran alcance. El mismo, está diseñado para ser adaptado de forma incremental, lo que permite integrarse con otras bibliotecas o feature de forma sencilla, según las necesidades que vayan surgiendo.

Características destacadas de Vue.js

Entre las características destacadas del vue.js encontramos aspectos de mucha relevancia, entre los que podemos mencionar:

¿Por qué Vue.js y no otro framework?

Vue.js tiene múltiples ventajas que destacamos en las siguientes líneas. Se trata de una serie de componentes importantes a considerar a la hora de trabajar con cualquier framework.

• Simplicidad: Tiene una curva de aprendizaje muy corta en comparación de otros frameworks. Además, cuenta con características y una sintaxis de buena legibilidad y de fácil entendimiento.
• Usabilidad: Tiene la cualidad de implementarse fácilmente. Permite estructurar nuestra aplicación de la forma que deseemos a través de componentes, sin imponer una estructura específica como Angular, por ejemplo.
• Rendimiento: Es calificado como unos de los framework con mejor performance y rapidez debido a su biblioteca de peso ligero y su capacidad de renderizado y procesamiento. En las comparaciones realizadas con los otros framework como React y Angular se evidencia.

Incorporando Vue.js en un tema

El método recomendado para instalar Vue.js es a través de NPM con el siguiente comando, lo instalas y lo guardas como dependencia. Para esto, tendrás que tener el NPM iniciado y configurado como gestor de paquetes en tu tema.

npm init

npm install –save vue

Instalando Laravel Mix

Para aprovechar la modularidad que nos ofrece Vue.js debemos tener en cuenta el “divide y vencerás”. Lo ideal es estructurar las funcionalidades en pequeños componentes segmentados. Quizás podrían estar en diferentes archivos que harán que nuestro código sea más manejable a futuro.

Posteriormente, estos componentes deberán ser procesados y empaquetados para generar la versión final del javascript compatible para todos los navegadores. Aquí, es donde entra la participación del webpack, un empaquetador de módulos que hace esta tarea por nosotros.

Para poder compilar nuestros archivos.vue necesitarás instalar webpack junto con todos los paquetes necesarios para pre-procesar y llevar a acabo esta compilación.

Para esto, la comunidad de Vue nos proporciona vue-cli un paquete basado en webpack que nos provee las configuraciones que nos permite iniciar una aplicación vue en tiempo record y que facilita su compilación.

No obstante, vue-cli solo nos provee funcionalidades para compilar nuestro javascript. Pero, ¿Qué pasa si aparte de esto necesitamos compilar un archivo Sass, Less o ejecutar una tarea como concatenación y minificación de archivos como actualmente requerimos al desarrollar un tema? Es aquí donde recomendamos ver Laravel mix.

Laravel Mix es un modulo potente y también se basa en webpack instalado por defecto en el framework Laravel. Sin embargo, es totalmente independiente. Este paquete nos provee todas las funcionalidades necesarias para compilar todos los archivos de una aplicación moderna con una sintaxis limpia y fácil como su documentación lo indica.

Ejecutando la siguiente línea se instala y guardas:

npm install laravel-mix –save

Luego, solo queda copiar el archivo de configuración en la raíz del tema:

cp -r node_modules/laravel-mix/setup/webpack.mix.js ./

El primer componente

Ahora, crearemos un directorio en donde agrupamos todos nuestro componentes. Este directorio lo puedes ubicar en la raíz del tema o en el directorio destinado para los archivos no compilados. En nuestro caso, es assets. Aquí explicamos un poco la forma que estructuramos un tema, quedando assets de la siguiente manera.

Posteriormente, en components creamos nuestro primer componente hello.vue que imprime nuestro primer Hola Mundo. Para esto, definimos la plantilla y el objeto, donde declaramos la variable text que contiene el string que deseamos imprimir.

Después, debemos importarlo en app.js y creamos la instancia Vue principal, definiendo el id de nuestro elemento raíz.

Configuramos webpack para compilar app.js y definimos el destino.

Registramos el script en el tema.

Solo queda definir el elemento raíz. En este punto recomendamos que se incluya en el header.php para que esté presente en todas las páginas, y llamar el componente donde lo desees.

Con este artículo esperamos que puedan incorporar Vue.js. Proximamente, enseñaremos a desarrollar un componente más avanzado utilizando el atributo inline-template para generar el contenido de nuestro componente a través de un loop.

Recuerda que puedes revisar la instalación de Vue.js aquí.