No cenário digital atual, a criação de experiências web dinâmicas e interativas tornou-se uma prioridade máxima para os desenvolvedores. Com o surgimento de estruturas JavaScript como Vue.js e o uso generalizado de sistemas de gerenciamento de conteúdo (CMS) como WordPress, a combinação dessas tecnologias tornou-se uma solução poderosa para a construção de sites ricos em recursos.
Neste guia, exploraremos como aproveitar o poder do Vue.js no ecossistema WordPress. Percorreremos o processo de configuração do Vue.js com WordPress, cobrindo tudo, desde a instalação até técnicas avançadas para integração perfeita. Quer você seja um desenvolvedor iniciante ou experiente, este guia irá equipá-lo com o conhecimento e as ferramentas necessárias para usar Vue.js de maneira eficaz com WordPress e criar experiências web envolventes.
O que é VueJs?
Vue.js é uma estrutura JavaScript progressiva usada para construir interfaces de usuário. É conhecido por sua simplicidade e flexibilidade, tornando-o uma escolha popular entre os desenvolvedores para a criação de aplicações web dinâmicas e interativas.
Vue.js adota uma arquitetura baseada em componentes, permitindo aos desenvolvedores dividir suas aplicações em componentes reutilizáveis e modulares, que podem ser facilmente gerenciados e mantidos. Com sua curva de aprendizado suave e extensa documentação, Vue.js capacita os desenvolvedores a construir aplicativos web modernos com eficiência e facilidade.
Create Amazing Websites
Com o melhor criador de páginas gratuito Elementor
Comece agoraPor que usar Vue no WordPress?
Existem vários motivos convincentes para usar o Vue.js em conjunto com o WordPress.
Em primeiro lugar, Vue.js é conhecido pela sua simplicidade, tornando-o uma escolha ideal para desenvolvedores que procuram aprender e adotar rapidamente uma estrutura JavaScript moderna.
Além disso, há benefícios práticos na integração do Vue.js com o WordPress.
Por exemplo, bibliotecas tradicionais como jQuery podem ser menos escaláveis e levar a conflitos em determinados cenários. Ao utilizar o Vue.js junto com o WordPress como API, os desenvolvedores podem melhorar significativamente a velocidade e o desempenho de seus sites.
Vue.js também é altamente combinável, permitindo uma implementação mais fácil de interfaces de usuário em plug-ins, painéis de administração e outras áreas de um site WordPress. Sua arquitetura baseada em componentes o torna uma ferramenta versátil e eficiente para a construção de aplicativos web modernos dentro do ecossistema WordPress.
Além disso, o WordPress domina mais de 25% da web conhecida, o que significa que provavelmente já faz parte de sua pilha de desenvolvimento ou de seus clientes. Essa ampla adoção do WordPress torna a integração do Vue.js uma escolha natural para o desenvolvimento front-end.
Maneiras de usar WordPress e Vue?
Aqui discutiremos 2 maneiras de usar Vue e WP juntos. Vamos ver como fazê-los funcionar juntos!
1. Crie um SPA como um subsite/aplicativo
O Vue pode ser utilizado para desenvolver um “subsite” dentro do painel de administração do WordPress. Essa abordagem é benéfica para a criação de plug-ins complexos ou páginas de administração personalizadas que exigem sistemas de guias ou sistemas de múltiplas páginas.
Ao contrário dos métodos regulares do WordPress, o uso do Vue permite transições mais suaves entre páginas sem recarregamentos de página inteira, melhorando a experiência do usuário.
Além disso, o Vue permite a criação de elementos de UI mais elegantes e personalizados em comparação com os elementos de UI padrão do WordPress. Abaixo está um exemplo de página de administração personalizada criada usando Vue.
A interface do usuário (IU) apresentada aqui pertence ao plugin WP Rocket no painel de administração do WordPress. Esta UI é totalmente personalizada e apresenta suas próprias subpáginas apresentadas como guias. Cada guia corresponde a um subURL distinto, facilitando o compartilhamento com outras pessoas. Essencialmente, parece um site em miniatura dentro do painel de administração do WP.
Conseguir essa personalização é simples com Vue e Vue-router. No entanto, há um aspecto que requer atenção cuidadosa: o tratamento de URLs. Dada a coexistência de dois “sites” – o painel de administração do WordPress e a interface baseada em Vue – podem surgir potenciais conflitos de URL.
Para resolver essa preocupação, basta um simples ajuste na instância do Vue Router. Especificamente, você precisa modificar duas opções:
- A opção base: deve ser definida como a rota personalizada da sua página WP.
- A opção de modo: Deve ser definida como "hash".
A adoção do modo "hash" garante que os hashes sejam usados em vez de modificar a URL inteira, mitigando assim possíveis conflitos.
Além disso, é importante ressaltar que você também pode substituir outras páginas do WordPress, como a página do editor de conteúdo, por meio de técnicas semelhantes, como exemplificado pelo editor Elementor .
O editor convencional do WordPress se transforma em uma interface estruturada, empregando símbolos hash para delinear sub-URLs.
Essencialmente, é possível estabelecer um subsite em várias seções do painel de administração do WordPress, como páginas de plugins, editores, painéis ou interfaces de middle-office.
Para conseguir isso, o processo envolve a utilização do Vue CLI ou uma ferramenta alternativa para gerar um aplicativo de página única (SPA) Vue independente. Posteriormente, configure as opções de base e modo do roteador adequadamente, exportando o aplicativo e integrando-o ao WordPress por meio de ganchos apropriados no ecossistema WordPress.
2. Crie componentes reutilizáveis no frontend ou administrador
Os sites incorporam várias microinterações, como alternadores de menu, menus suspensos, acordeões e carrosséis. Esses elementos formam coletivamente o que é conhecido como UI Kit. Além disso, determinados componentes podem interagir com os dados de forma assíncrona, como botões de curtir ou votar, formulários e players de mídia personalizados.
É importante observar que ao integrar componentes Vue.js ao WordPress ou qualquer outro modelo de backend, pode ser necessário optar pela versão Runtime + Compiler do Vue. Isso garante funcionalidade e compatibilidade perfeitas com o ambiente de back-end.
Certos componentes irão interagir com os dados renderizados, enquanto outros não. Com base nesta distinção, será necessário criar diferentes tipos de componentes. Algum componente terá seu modelo.
Vue.component('alert-box', {
template: `
<div class="demo-alert-box">
<strong>Error!</strong>
<slot></slot>
</div>
`
})
Enquanto outros utilizarão a marcação gerada.
<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>
O Vue também pode ser aproveitado para criar Web Components nativos , oferecendo a vantagem de reutilização em vários projetos semelhantes aos ionicons (criados com Stencil JS).
Esses componentes podem ser integrados em modelos PHP do WordPress ou funções que geram HTML. Os dados podem ser passados para instâncias ou componentes Vue do WordPress, stringificando-os em uma variável global ou atribuindo-os diretamente à propriedade do componente. O conceito envolve carregar o Vue e associar instâncias do Vue a IDs HTML para uma integração perfeita.
<?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 );
?>
Aqui está a parte superior e inferior de um modelo WP.
<html>
<div id="app">
{{ message }}
</div>
</html>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
3. Crie um site front-end separado
Por último, é importante destacar uma característica que pode ser aparente para alguns, mas não para todos.
Desde a versão 4.7, o WordPress incorporou uma API REST, permitindo que os desenvolvedores acessem vários endpoints e recuperem dados como posts, páginas e campos personalizados com a ajuda de plugins. Esta funcionalidade está alinhada com o conceito de Headless CMS.
Na verdade, as aplicações desta capacidade vão muito além do que inicialmente pode vir à mente. Seu front-end separado, que consome a API REST do WordPress, pode assumir vários formatos:
- Um aplicativo ou site SPA (aplicativo de página única)
- Um aplicativo ou site SSR (Server-Side Rendered)
- Um site gerado estaticamente seguindo a arquitetura JAMStack
- Um aplicativo da Web progressivo (PWA)
- Um aplicativo móvel
- Outro back-end monolítico que utiliza um mecanismo de modelo mais simples ou mais rápido
Em essência, qualquer cliente que possa consumir a API e onde você mantenha controle total sobre o frontend é viável. O WordPress serve essencialmente como uma fonte de dados semelhante a uma API de back-end. Notavelmente, plug-ins como ACF (Advanced Custom Fields) ou Pods também podem expor campos personalizados por meio da API.
Além disso, você tem a flexibilidade de adicionar endpoints personalizados à API do WordPress e utilizar o sistema de autenticação, incluindo a geração de nonces e outros componentes necessários.
Empacotando
Concluindo, a integração do Vue.js com WordPress oferece aos desenvolvedores uma solução robusta para a criação de experiências web dinâmicas e interativas dentro do ecossistema WordPress. Vue.js, conhecido por sua simplicidade e flexibilidade, capacita os desenvolvedores a construir aplicativos web modernos com eficiência e facilidade por meio de sua arquitetura baseada em componentes.
