[{"data":1,"prerenderedAt":14},["ShallowReactive",2],{"post-como-consumir-dados-via-api-rest-do-wordpress-com-vuejs":3},{"id":4,"imagem":5,"titulo":6,"slug":7,"tags":8,"date":11,"resumo":12,"artigo":13},3,"\u002Fimagens\u002Fblog\u002Ftiago-bernardes-blog-rest-api-wordpress-no-vuejs.webp","Como Consumir Dados via REST API do WordPress com Vue.js","como-consumir-dados-via-api-rest-do-wordpress-com-vuejs",[9,10],"rest api","wordpress","10\u002F10\u002F2025","O WordPress é uma das plataformas mais populares do mundo, e sua REST API oferece uma maneira poderosa[...]","\u003Cp>\n    O WordPress é uma das plataformas de gerenciamento de conteúdo mais populares do mundo, e sua\n    \u003Cstrong>REST API\u003C\u002Fstrong> oferece uma maneira poderosa de acessar e manipular dados. Combinando isso ao\n    \u003Cstrong>Vue.js\u003C\u002Fstrong>, um framework JavaScript leve e eficiente, podemos criar interfaces modernas e dinâmicas que\n    consomem os dados diretamente do WordPress.\n\u003C\u002Fp>\n\u003Cp>Neste post, mostrarei como configurar um projeto básico de Vue.js para consumir a API do WordPress. Vamos criar um\n    exemplo simples que exibe uma lista de posts.\u003C\u002Fp>\n\n\u003Ch2>Pré-requisitos\u003C\u002Fh2>\n\u003Cul>\n    \u003Cli>Ter um site WordPress configurado (local ou em produção).\u003C\u002Fli>\n    \u003Cli>Confirmar que a REST API do WordPress está habilitada (geralmente habilitada por padrão).\u003C\u002Fli>\n    \u003Cli>Ter o \u003Cstrong>Node.js\u003C\u002Fstrong> instalado em sua máquina.\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Ch2>1. Configurando o Projeto Vue.js\u003C\u002Fh2>\n\u003Cp>Primeiro, crie um novo projeto Vue.js usando o Vue CLI (ou outro método de sua escolha):\u003C\u002Fp>\n\u003Cpre>npm install -g @vue\u002Fcli\nvue create wordpress-vue\ncd wordpress-vue\nnpm run serve\u003C\u002Fpre>\n\u003Cp>Após configurar o projeto, abra o arquivo principal, \u003Ccode>App.vue\u003C\u002Fcode>, para iniciar nossa implementação.\u003C\u002Fp>\n\n\u003Ch2>2. Conectando à API do WordPress\u003C\u002Fh2>\n\u003Cp>\n    A REST API do WordPress expõe vários endpoints. Por exemplo, para obter os posts publicados, utilizamos:\n\u003C\u002Fp>\n\u003Cpre>https:\u002F\u002FSEU_SITE\u002Fwp-json\u002Fwp\u002Fv2\u002Fposts\u003C\u002Fpre>\n\u003Cp>Substitua \u003Ccode>SEU_SITE\u003C\u002Fcode> pelo domínio do seu WordPress.\u003C\u002Fp>\n\u003Cp>Vamos instalar o \u003Cstrong>Axios\u003C\u002Fstrong>, uma biblioteca popular para realizar requisições HTTP:\u003C\u002Fp>\n\u003Cpre>npm install axios\u003C\u002Fpre>\n\u003Cp>Agora, adicione o código básico no componente \u003Ccode>App.vue\u003C\u002Fcode>:\u003C\u002Fp>\n\u003Cpre><template>\n<div id=\"app\">\n  <h1>Posts do Blog<\u002Fh1>\n  <ul>\n    <li v-for=\"post in posts\" :key=\"post.id\">\n      <h2>{{ post.title.rendered }}<\u002Fh2>\n      <p v-html=\"post.excerpt.rendered\"><\u002Fp>\n    <\u002Fli>\n  <\u002Ful>\n<\u002Fdiv>\n<\u002Ftemplate>\n\n<script>\nimport axios from \"axios\";\n\nexport default {\ndata() {\n  return {\n    posts: [],\n  };\n},\nmethods: {\n  async fetchPosts() {\n    try {\n      const response = await axios.get(\n        \"https:\u002F\u002FSEU_SITE\u002Fwp-json\u002Fwp\u002Fv2\u002Fposts\"\n      );\n      this.posts = response.data;\n    } catch (error) {\n      console.error(\"Erro ao buscar posts:\", error);\n    }\n  },\n},\nmounted() {\n  this.fetchPosts();\n},\n};\n<\u002Fscript>\n\n<style>\nbody {\nfont-family: Arial, sans-serif;\nline-height: 1.6;\n}\n\nh1 {\ncolor: #333;\n}\n\nul {\nlist-style: none;\npadding: 0;\n}\n\nli {\nmargin-bottom: 20px;\nborder-bottom: 1px solid #ccc;\npadding-bottom: 10px;\n}\n<\u002Fstyle>\u003C\u002Fpre>\n\n\u003Ch2>3. Explicação do Código\u003C\u002Fh2>\n\u003Cul>\n    \u003Cli>\u003Cstrong>Template:\u003C\u002Fstrong> Renderizamos uma lista de posts com os títulos e excertos, usando \u003Ccode>v-for\u003C\u002Fcode>\n        para iterar pelos dados retornados da API.\u003C\u002Fli>\n    \u003Cli>\u003Cstrong>Axios:\u003C\u002Fstrong> Fazemos uma requisição GET ao endpoint de posts.\u003C\u002Fli>\n    \u003Cli>\u003Cstrong>Data Binding:\u003C\u002Fstrong> Os posts são armazenados na propriedade reativa \u003Ccode>posts\u003C\u002Fcode> e\n        automaticamente exibidos na interface.\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Ch2>4. Executando o Projeto\u003C\u002Fh2>\n\u003Cp>Execute o servidor de desenvolvimento:\u003C\u002Fp>\n\u003Cpre>npm run serve\u003C\u002Fpre>\n\u003Cp>Acesse a aplicação em seu navegador, e você verá os posts do WordPress exibidos na interface.\u003C\u002Fp>\n\n\u003Ch2>5. Próximos Passos\u003C\u002Fh2>\n\u003Cp>Agora que você aprendeu a base, pode expandir este projeto para:\u003C\u002Fp>\n\u003Cul>\n    \u003Cli>Implementar paginação usando os parâmetros da API do WordPress.\u003C\u002Fli>\n    \u003Cli>Filtrar posts por categoria ou tag.\u003C\u002Fli>\n    \u003Cli>Criar um formulário para enviar dados para a API (ex.: criar posts).\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Ch2>Conclusão\u003C\u002Fh2>\n\u003Cp>\n    O WordPress REST API combinado com o Vue.js é uma excelente maneira de construir aplicativos web modernos e\n    dinâmicos. Este exemplo é um ponto de partida para que você comece a explorar o poder dessa integração.\n\u003C\u002Fp>\n\u003Cp>Gostou do tutorial? Tem dúvidas? Deixe nos comentários! 🚀\u003C\u002Fp>",1780414804171]