Como Consumir Dados via REST API do WordPress com Vue.js

O WordPress é uma das plataformas de gerenciamento de conteúdo mais populares do mundo, e sua REST API oferece uma maneira poderosa de acessar e manipular dados. Combinando isso ao Vue.js, um framework JavaScript leve e eficiente, podemos criar interfaces modernas e dinâmicas que consomem os dados diretamente do WordPress.

Neste post, mostrarei como configurar um projeto básico de Vue.js para consumir a API do WordPress. Vamos criar um exemplo simples que exibe uma lista de posts.

Pré-requisitos

• Ter um site WordPress configurado (local ou em produção).
• Confirmar que a REST API do WordPress está habilitada (geralmente habilitada por padrão).
• Ter o Node.js instalado em sua máquina.

1. Configurando o Projeto Vue.js

Primeiro, crie um novo projeto Vue.js usando o Vue CLI (ou outro método de sua escolha):

npm install -g @vue/cli
vue create wordpress-vue
cd wordpress-vue
npm run serve

Após configurar o projeto, abra o arquivo principal, App.vue, para iniciar nossa implementação.

2. Conectando à API do WordPress

A REST API do WordPress expõe vários endpoints. Por exemplo, para obter os posts publicados, utilizamos:

https://SEU_SITE/wp-json/wp/v2/posts

Substitua SEU_SITE pelo domínio do seu WordPress.

Vamos instalar o Axios, uma biblioteca popular para realizar requisições HTTP:

npm install axios

Agora, adicione o código básico no componente App.vue:

<template>
<div id="app">
  <h1>Posts do Blog</h1>
  <ul>
    <li v-for="post in posts" :key="post.id">
      <h2>{{ post.title.rendered }}</h2>
      <p v-html="post.excerpt.rendered"></p>
    </li>
  </ul>
</div>
</template>

<script>
import axios from "axios";

export default {
data() {
  return {
    posts: [],
  };
},
methods: {
  async fetchPosts() {
    try {
      const response = await axios.get(
        "https://SEU_SITE/wp-json/wp/v2/posts"
      );
      this.posts = response.data;
    } catch (error) {
      console.error("Erro ao buscar posts:", error);
    }
  },
},
mounted() {
  this.fetchPosts();
},
};
</script>

<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
}

h1 {
color: #333;
}

ul {
list-style: none;
padding: 0;
}

li {
margin-bottom: 20px;
border-bottom: 1px solid #ccc;
padding-bottom: 10px;
}
</style>

3. Explicação do Código

• Template: Renderizamos uma lista de posts com os títulos e excertos, usando v-for para iterar pelos dados retornados da API.
• Axios: Fazemos uma requisição GET ao endpoint de posts.
• Data Binding: Os posts são armazenados na propriedade reativa posts e automaticamente exibidos na interface.

4. Executando o Projeto

Execute o servidor de desenvolvimento:

npm run serve

Acesse a aplicação em seu navegador, e você verá os posts do WordPress exibidos na interface.

5. Próximos Passos

Agora que você aprendeu a base, pode expandir este projeto para:

• Implementar paginação usando os parâmetros da API do WordPress.
• Filtrar posts por categoria ou tag.
• Criar um formulário para enviar dados para a API (ex.: criar posts).

Conclusão

O WordPress REST API combinado com o Vue.js é uma excelente maneira de construir aplicativos web modernos e dinâmicos. Este exemplo é um ponto de partida para que você comece a explorar o poder dessa integração.

Gostou do tutorial? Tem dúvidas? Deixe nos comentários! 🚀