# Vue.js e WordPress Vue.js WordPress é a integração entre o Vue.js — framework JavaScript progressivo criado por Evan You em 2014 — e o WordPress, em projetos onde o WP atua como backend de conteúdo e o Vue como camada de interface. Aparece em três cenários principais: WordPress headless servindo dados via REST API para frontend Vue (Nuxt), interfaces ricas dentro do wp-admin, e plugins WordPress customizados com UI complexa. Diferente do React, que é o framework oficial do Gutenberg, Vue exige integração manual — mas oferece curva de aprendizado mais suave. ## O que é Vue.js Vue.js é um framework JavaScript reativo focado em construção de interfaces de usuário. Foi criado por Evan You, ex-engenheiro do Google que trabalhava em projetos Angular e queria algo mais leve. Lançado em 2014, ganhou tração em 2017-2018 e hoje é o terceiro framework JavaScript mais usado depois de React e Angular, com forte presença na Ásia e Europa. O diferencial técnico do Vue é a progressividade. Pode ser adotado gradualmente: você começa adicionando uma tag script com Vue em uma página HTML existente, integra reatividade em apenas uma seção, e expande conforme precisar. Em React, o modelo padrão é tudo-ou-nada — projeto inteiro vive dentro de componentes React. Em Vue, dá para ter ilhas de Vue dentro de páginas tradicionais. O sistema de templates do Vue usa sintaxe próxima do HTML padrão, com diretivas como *v-if*, *v-for*, *v-bind*. Quem vem do HTML/CSS aprende rápido. Componentes single-file (.vue) combinam template, script e estilo em um arquivo só, o que facilita organização para times pequenos. Em 2024, Vue 3 é a versão estável dominante, com Composition API que se aproxima do paradigma de hooks do React. Vue Router, Pinia (state management) e Vite (build) compõem o ecossistema oficial recomendado. Para projetos full-stack, Nuxt.js é o framework SSR/SSG sobre Vue — equivalente Vue do Next.js. ## Vue vs React no WordPress React tem vantagem natural no ecossistema WordPress: o próprio Gutenberg é construído em React. Tudo que envolve criar blocos customizados, modificar editor, estender Inspector Controls passa por React. Não há equivalente Vue — escolher Vue significa descartar boa parte do que o WordPress moderno oferece nativamente. Vue ganha em curva de aprendizado e desenvolvimento rápido fora do Gutenberg. Para construir um painel admin customizado, uma página de configuração de plugin, ou um frontend headless, Vue costuma ser mais produtivo para time pequeno. A documentação oficial do Vue é considerada uma das melhores entre frameworks JS. Em comunidade, React lidera em número absoluto de bibliotecas, exemplos e desenvolvedores. Vue tem comunidade ativa mas menor. Para WordPress especificamente, encontrar ajuda em fóruns, tutoriais e plugins exemplo é mais fácil em React. Para projetos onde isso pesa, React tende a vencer. Performance entre os dois é equivalente em uso normal. Vue 3 com tree-shaking entrega bundles competitivos, e ambos rodam em produção em grandes plataformas. A escolha entre [React no WordPress](https://full.services/glossario/react-wordpress/) e Vue raramente é técnica pura — é mais sobre familiaridade do time, projeto futuro e ecossistema. ## Como integrar Vue com WordPress O caminho mais comum é WordPress headless: WP serve conteúdo via REST API ou GraphQL (via WPGraphQL), e Vue (Nuxt.js) consome esses dados em frontend separado. WP roda em domínio próprio (cms.exemplo.com), Vue roda em outro (app.exemplo.com), e os dois conversam por API. Setup típico de projeto headless usa Nuxt 3 + WordPress. O Nuxt faz fetch de posts, páginas e custom post types via fetch para o endpoint */wp-json/wp/v2/posts*. Renderiza com SSG (Static Site Generation) para SEO ou SSR (Server-Side Rendering) para conteúdo dinâmico. Combine com [WordPress headless](https://full.services/glossario/headless-wordpress/) para detalhes da arquitetura completa. Outro modelo é Vue dentro do tema WordPress tradicional. Você inclui Vue.js via wp_enqueue_script, monta um div com id específico em algum template (single.php, page.php), e inicializa Vue ali. É útil para áreas dinâmicas — sistema de busca instantânea, configurador de produto, calculadora — sem ir 100% headless. Em plugins WordPress, Vue.js também serve para painéis admin customizados. Crie uma página admin via add_menu_page, renderize um div, monte a UI inteira em Vue rodando dentro do wp-admin. É comum em plugins de relatórios complexos, dashboards customizados, ferramentas internas. Combine com [REST API do WordPress](https://full.services/glossario/rest-api-wordpress/) para endpoints customizados. ## Plugins WordPress com Vue Plugins WordPress podem usar Vue como tecnologia de UI principal. O padrão é criar uma página admin via PHP, fazer enqueue do Vue compilado (gerado por Vite) e inicializar o app dentro de um div da página. Toda a interatividade vive em Vue, e o backend WordPress responde via custom REST endpoints registrados no plugin. Build moderno usa Vite + Vue 3 + TypeScript. Diretório src/ contém os componentes Vue; comando *vite build* gera assets otimizados em dist/; o plugin enfileira esses assets via wp_enqueue. Em desenvolvimento, vite serve com HMR (hot module reload) — mudanças no código aparecem na tela em milissegundos. Comunicação com o WordPress acontece via fetch para endpoints REST customizados. Você registra um endpoint via register_rest_route com permission_callback adequada, valida nonces, e Vue chama via axios ou fetch nativo. Para áreas autenticadas, o nonce do WordPress (gerado via wp_create_nonce) precisa ser passado em cada request via header X-WP-Nonce. Plugins consagrados que usam Vue incluem WP Spectra (anteriormente Ultimate Addons for Gutenberg) em algumas áreas internas, e diversos plugins de admin dashboards e analytics. Em projetos onde o builder visual padrão do WordPress não cobre, Vue entrega controle e produtividade equivalente — ou superior — a soluções com [AJAX](https://full.services/glossario/ajax-wordpress/) tradicional. Para projetos WordPress que combinam Vue.js (ou qualquer framework JavaScript moderno) com infraestrutura sólida — REST API ajustada, CORS configurado, performance que sustenta requisições constantes do frontend — os planos da FULL Services entregam hospedagem WordPress profissional preparada para essas integrações. É a base técnica que faz frontend Vue rodar com latência baixa e backend WordPress aguentar volume real de uso. **Também conhecido como:** vue wp, vuejs ## Termos relacionados - [Headless WordPress](https://full.services/glossario/headless-wordpress/) - [React e WordPress](https://full.services/glossario/react-wordpress/) - [REST API WordPress](https://full.services/glossario/rest-api-wordpress/) - [AJAX WordPress](https://full.services/glossario/ajax-wordpress/) --- Glossário WordPress da FULL Services: [Vue.js e WordPress](https://full.services/glossario/vue-wordpress/)