En el panorama digital actual, la creación de experiencias web dinámicas e interactivas se ha convertido en una prioridad absoluta para los desarrolladores. Con el auge de los marcos de JavaScript como Vue.js y el uso generalizado de sistemas de gestión de contenidos (CMS) como WordPress, la combinación de estas tecnologías se ha convertido en una solución poderosa para crear sitios web ricos en funciones.
En esta guía, exploraremos cómo aprovechar el poder de Vue.js dentro del ecosistema de WordPress. Recorreremos el proceso de configuración de Vue.js con WordPress, cubriendo todo, desde la instalación hasta técnicas avanzadas para una integración perfecta. Ya sea un principiante o un desarrollador experimentado, esta guía le proporcionará el conocimiento y las herramientas necesarias para utilizar Vue.js con WordPress de forma eficaz y crear experiencias web atractivas.
¿Qué es Vue Js?
Vue.js es un marco de JavaScript progresivo que se utiliza para crear interfaces de usuario. Es conocido por su simplicidad y flexibilidad, lo que lo convierte en una opción popular entre los desarrolladores para crear aplicaciones web dinámicas e interactivas.
Vue.js adopta una arquitectura basada en componentes, lo que permite a los desarrolladores dividir sus aplicaciones en componentes modulares y reutilizables, que se pueden administrar y mantener fácilmente. Con su suave curva de aprendizaje y su extensa documentación, Vue.js permite a los desarrolladores crear aplicaciones web modernas de manera eficiente y sencilla.
Create Amazing Websites
Con el mejor generador de páginas gratuito Elementor
Empezar ahora¿Por qué utilizar Vue en WordPress?
Hay varias razones de peso para utilizar Vue.js junto con WordPress.
En primer lugar, Vue.js es conocido por su simplicidad, lo que lo convierte en una opción ideal para los desarrolladores que buscan aprender y adoptar rápidamente un marco de JavaScript moderno.
Además, existen beneficios prácticos al integrar Vue.js con WordPress.
Por ejemplo, las bibliotecas tradicionales como jQuery pueden ser menos escalables y generar conflictos en determinados escenarios. Al utilizar Vue.js junto con WordPress como API, los desarrolladores pueden mejorar significativamente la velocidad y el rendimiento de sus sitios web.
Vue.js también es altamente componible, lo que permite una implementación más sencilla de interfaces de usuario dentro de complementos, paneles de administración y otras áreas de un sitio de WordPress. Su arquitectura basada en componentes la convierte en una herramienta versátil y eficiente para crear aplicaciones web modernas dentro del ecosistema de WordPress.
Además, WordPress impulsa más del 25% de la web conocida, lo que significa que probablemente ya sea parte de su pila de desarrollo o de la de sus clientes. Esta adopción generalizada de WordPress hace que la integración de Vue.js sea una opción natural para el desarrollo front-end.
¿Formas de utilizar WordPress y Vue?
Aquí discutiremos 2 formas de usar Vue y WP en conjunto. ¡Veamos cómo hacer que funcionen juntos!
1. Cree un SPA como un subsitio web/aplicación
Vue se puede utilizar para desarrollar un "subsitio web" dentro del panel de administración de WordPress. Este enfoque es beneficioso para crear complementos complejos o páginas de administración personalizadas que requieren sistemas de pestañas o sistemas de varias páginas.
A diferencia de los métodos habituales de WordPress, el uso de Vue permite transiciones más fluidas entre páginas sin recargas de página completa, lo que mejora la experiencia del usuario.
Además, Vue permite la creación de elementos de interfaz de usuario más elegantes y personalizados en comparación con los elementos de interfaz de usuario estándar de WordPress. A continuación se muestra un ejemplo de una página de administración personalizada creada con Vue.
La interfaz de usuario (UI) que se muestra aquí pertenece al complemento WP Rocket dentro del panel de administración de WordPress. Esta interfaz de usuario está completamente personalizada y presenta sus propias subpáginas presentadas como pestañas. Cada pestaña corresponde a una subURL distinta, lo que facilita compartirla con otros. Esencialmente, se parece a un sitio web en miniatura dentro del panel de administración de WP.
Lograr dicha personalización es sencillo con Vue y Vue-router. Sin embargo, hay un aspecto que requiere especial atención: el manejo de las URL. Dada la coexistencia de dos "sitios web" (el panel de administración de WordPress y la interfaz de Vue), pueden surgir posibles conflictos de URL.
Para solucionar este problema, basta con un simple ajuste dentro de la instancia de Vue Router. En concreto, es necesario modificar dos opciones:
- La opción base: debe configurarse en la ruta de su página de WP personalizada.
- La opción de modo: debe configurarse en "hash".
La adopción del modo "hash" garantiza que se utilicen hashes en lugar de modificar la URL completa, lo que mitiga posibles conflictos.
Además, vale la pena señalar que también puedes reemplazar otras páginas de WordPress, como la página del editor de contenido, utilizando técnicas similares, como lo ejemplifica el editor Elementor .
El editor convencional de WordPress se transforma en una interfaz estructurada que emplea símbolos hash para delinear las subURL.
Básicamente, es posible establecer un subsitio web dentro de varias secciones del panel de administración de WordPress, como páginas de complementos, editores, paneles o interfaces de middle-office.
Para lograr esto, el proceso implica utilizar Vue CLI o una herramienta alternativa para generar una aplicación de página única (SPA) de Vue independiente. Posteriormente, configure las opciones base y de modo del enrutador en consecuencia, exporte la aplicación e integrela en WordPress a través de los enlaces apropiados dentro del ecosistema de WordPress.
2. Cree componentes reutilizables en el frontend o el administrador
Los sitios web incorporan varias microinteracciones, como alternancia de menús, menús desplegables, acordeones y carruseles. Estos elementos forman colectivamente lo que se conoce como kit de interfaz de usuario. Además, ciertos componentes pueden interactuar con datos de forma asincrónica, como botones de me gusta o de voto, formularios y reproductores multimedia personalizados.
Es importante tener en cuenta que al integrar componentes Vue.js en WordPress o cualquier otra plantilla backend, puede ser necesario optar por la versión Runtime + Compiler de Vue. Esto garantiza una funcionalidad perfecta y compatibilidad con el entorno backend.
Ciertos componentes interactuarán con los datos renderizados, mientras que otros no. En base a esta distinción, será necesario crear diferentes tipos de componentes. Algún componente tendrá su plantilla.
Vue.component('alert-box', {
template: `
<div class="demo-alert-box">
<strong>Error!</strong>
<slot></slot>
</div>
`
})
Mientras que otros utilizarán el marcado generado.
<my-component inline-template>
<div>
<p>These are compiled as the component's own template.</p>
<p>Not parent's transclusion content.</p>
</div>
</my-component>
Vue también se puede aprovechar para crear componentes web nativos , ofreciendo la ventaja de la reutilización en varios proyectos similares a ionicons (elaborados con Stencil JS).
Estos componentes se pueden integrar en plantillas PHP de WordPress o funciones que generan HTML. Los datos se pueden pasar a instancias o componentes de Vue desde WordPress encadenándolos a una variable global o asignándolos directamente a la propiedad del componente. El concepto implica cargar Vue y asociar instancias de Vue con ID HTML para una integración perfecta.
<?php
function themeslug_enqueue_style() {
wp_enqueue_style( 'my-theme', 'style.css', false );
}
function themeslug_enqueue_script() {
wp_enqueue_script( 'my-js', 'filename.js', false );
}
add_action( 'wp_enqueue_scripts', 'themeslug_enqueue_style', 10 );
add_action( 'wp_enqueue_scripts', 'themeslug_enqueue_script', 10 );
?>
Aquí está la parte superior e inferior de una plantilla WP.
<html>
<div id="app">
{{ message }}
</div>
</html>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
3. Cree un sitio web frontend independiente
Por último, es importante resaltar una característica que puede resultar evidente para algunos, pero no para todos.
Desde la versión 4.7, WordPress ha incorporado una API REST, que permite a los desarrolladores acceder a varios puntos finales y recuperar datos como publicaciones, páginas y campos personalizados con la ayuda de complementos. Esta funcionalidad se alinea con el concepto de Headless CMS.
De hecho, las aplicaciones de esta capacidad van mucho más allá de lo que inicialmente se podría imaginar. Su interfaz independiente, que consume la API REST de WordPress, podría adoptar varias formas:
- Una aplicación o sitio web SPA (aplicación de página única)
- Una aplicación o sitio web SSR (servidor-side renderizado)
- Un sitio web generado estáticamente siguiendo la arquitectura JAMStack
- Una aplicación web progresiva (PWA)
- Una aplicación móvil
- Otro backend monolítico que utiliza un motor de plantillas más simple o más rápido.
En esencia, cualquier cliente que pueda consumir la API y donde usted conserve el control total sobre la interfaz es viable. Básicamente, WordPress sirve como una fuente de datos similar a una API de backend. En particular, complementos como ACF (Campos personalizados avanzados) o Pods también pueden exponer campos personalizados a través de la API.
Además, tiene la flexibilidad de agregar puntos finales personalizados a la API de WordPress y utilizar el sistema de autenticación, incluida la generación de nonces y otros componentes necesarios.
Terminando
En conclusión, la integración de Vue.js con WordPress ofrece a los desarrolladores una solución sólida para crear experiencias web dinámicas e interactivas dentro del ecosistema de WordPress. Vue.js, conocido por su simplicidad y flexibilidad, permite a los desarrolladores crear aplicaciones web modernas de manera eficiente y sencilla a través de su arquitectura basada en componentes.
