{"id":1641,"date":"2026-09-22T22:42:46","date_gmt":"2026-09-23T01:42:46","guid":{"rendered":"https:\/\/www.linuxpro.com.br\/?p=1641"},"modified":"2026-09-22T22:53:21","modified_gmt":"2026-09-23T01:53:21","slug":"vue-go-echo-v5-parte-2-frontend-vue-com-vite","status":"publish","type":"post","link":"https:\/\/www.linuxpro.com.br\/es\/2026\/09\/vue-go-echo-v5-parte-2-frontend-vue-com-vite\/","title":{"rendered":"Vue.js + Go con Echo v5, parte 2: frontend Vue con Vite"},"content":{"rendered":"

\"Mascote<\/p>\n

S\u00e9rie Vue.js + Go com Echo v5:<\/strong> Parte 1: ambiente e primeira API<\/a> \u00b7 Parte 2: frontend Vue com Vite<\/a> \u00b7 Parte 3: API REST de tarefas<\/a> \u00b7 Parte 4: login com sess\u00e3o e cookie<\/a> \u00b7 Parte 5: embed, bin\u00e1rio \u00fanico e Docker<\/a><\/p>\n

C\u00f3digo completo:<\/strong> todos os arquivos da s\u00e9rie est\u00e3o no gist vue-go-echo-v5<\/a>, com um README que mostra em qual pasta cada um fica.<\/p>\n

Na parte 1<\/a> subimos a primeira rota da API com Echo v5. Agora \u00e9 a vez do frontend: vamos criar um projeto Vue 3 com Vite<\/strong> dentro do reposit\u00f3rio Go, instalar o Vue Router e configurar o proxy de desenvolvimento<\/strong>. Com o proxy, o navegador enxerga frontend e API na mesma origem, sem CORS, que \u00e9 exatamente o que acontece em produ\u00e7\u00e3o quando o Go servir o Vue embutido.<\/p>\n

<\/p>\n

Crie o projeto Vue com Vite<\/h2>\n

O Vite \u00e9 a ferramenta oficial de build do ecossistema Vue: servidor de desenvolvimento com recarga instant\u00e2nea e build de produ\u00e7\u00e3o otimizado. Na raiz do projeto (vueapp\/<\/code>), crie o frontend na pasta web<\/code> com o template vue<\/code>:<\/p>\n

cd vueapp\nnpm create vite@latest web -- --template vue --no-interactive --no-immediate\ncd web\nnpm install\nnpm install vue-router@4<\/code><\/pre>\n
As op\u00e7\u00f5es evitam as perguntas interativas: --template vue<\/code> escolhe Vue com JavaScript, e --no-immediate<\/code> n\u00e3o sobe o servidor automaticamente. Se preferir TypeScript, use --template vue-ts<\/code>; o resto da s\u00e9rie funciona igual, s\u00f3 com extens\u00f5es .ts<\/code>.<\/p>\n
No teste desta s\u00e9rie, o package.json<\/code> ficou com:<\/p>\n
{\n  \"name\": \"web\",\n  \"private\": true,\n  \"type\": \"module\",\n  \"scripts\": {\n    \"dev\": \"vite\",\n    \"build\": \"vite build\",\n    \"preview\": \"vite preview\"\n  },\n  \"dependencies\": {\n    \"vue\": \"^3.5.42\",\n    \"vue-router\": \"^4.6.4\"\n  },\n  \"devDependencies\": {\n    \"@vitejs\/plugin-vue\": \"^6.0.8\",\n    \"vite\": \"^8.3.0\"\n  }\n}<\/code><\/pre>\n
Apague o componente de exemplo, que n\u00e3o vamos usar:<\/p>\n
rm -rf src\/components src\/assets\/*.svg\nmkdir -p src\/views<\/code><\/pre>\n
Proxy do Vite para a API Go<\/h2>\n
Em desenvolvimento rodam dois servidores: o Vite em localhost:5173<\/code> e o Go em 127.0.0.1:8080<\/code>. Se o navegador chamasse o Go direto, seriam origens diferentes e voc\u00ea teria de configurar CORS, e o cookie de sess\u00e3o da parte 4 complicaria ainda mais. A sa\u00edda mais simples \u00e9 o Vite repassar \/api<\/code> para o Go. Edite web\/vite.config.js<\/code><\/a>:<\/p>\n
import vue from '@vitejs\/plugin-vue'\nimport { defineConfig } from 'vite'\n\nexport default defineConfig({\n  plugins: [vue()],\n  server: {\n    \/\/ Em desenvolvimento, o Vite (5173) repassa \/api para o Go (8080)\n    proxy: {\n      '\/api': 'http:\/\/127.0.0.1:8080',\n    },\n  },\n})<\/code><\/pre>\n
Assim o navegador s\u00f3 conversa com localhost:5173<\/code>. Em produ\u00e7\u00e3o, o Go serve o frontend e a API na mesma porta, e o c\u00f3digo Vue n\u00e3o muda nada: sempre chama \/api\/...<\/code> com caminho relativo.<\/p>\n
Um cliente de API pequeno<\/h2>\n
N\u00e3o precisamos de biblioteca HTTP. Crie web\/src\/api.js<\/code><\/a> com uma fun\u00e7\u00e3o que envia e recebe JSON e transforma respostas de erro em exce\u00e7\u00e3o com a mensagem da API:<\/p>\n
\/\/ Pequeno cliente da API: JSON na ida e na volta, cookie de sess\u00e3o autom\u00e1tico.\nexport async function api(method, path, body) {\n  const res = await fetch(`\/api${path}`, {\n    method,\n    headers: body ? { 'Content-Type': 'application\/json' } : {},\n    body: body ? JSON.stringify(body) : undefined,\n  })\n  if (res.status === 204) return null\n  const data = await res.json().catch(() => ({}))\n  if (!res.ok) {\n    const err = new Error(data.message || `HTTP ${res.status}`)\n    err.status = res.status\n    throw err\n  }\n  return data\n}<\/code><\/pre>\n
Como a API est\u00e1 na mesma origem, o fetch<\/code> envia o cookie de sess\u00e3o automaticamente; o padr\u00e3o credentials: 'same-origin'<\/code> j\u00e1 basta. O Echo devolve os erros no formato {\"message\": \"...\"}<\/code>, ent\u00e3o data.message<\/code> vira o texto exibido na tela.<\/p>\n
Rotas do Vue Router<\/h2>\n
Teremos duas p\u00e1ginas: \/login<\/code> e \/tarefas<\/code>. Crie web\/src\/router.js<\/code><\/a>. A prote\u00e7\u00e3o de rota (meta.auth<\/code>) j\u00e1 fica declarada aqui e passa a funcionar quando a API de login existir, na parte 4:<\/p>\n
import { createRouter, createWebHistory } from 'vue-router'\nimport { api } from '.\/api'\nimport LoginView from '.\/views\/LoginView.vue'\nimport TasksView from '.\/views\/TasksView.vue'\n\nconst router = createRouter({\n  history: createWebHistory(),\n  routes: [\n    { path: '\/', redirect: '\/tarefas' },\n    { path: '\/login', component: LoginView },\n    { path: '\/tarefas', component: TasksView, meta: { auth: true } },\n  ],\n})\n\n\/\/ Antes de abrir uma p\u00e1gina protegida, pergunta ao Go se a sess\u00e3o vale\nrouter.beforeEach(async (to) => {\n  if (!to.meta.auth) return true\n  try {\n    await api('GET', '\/me')\n    return true\n  } catch {\n    return { path: '\/login', query: { next: to.fullPath } }\n  }\n})\n\nexport default router<\/code><\/pre>\n
O createWebHistory()<\/code> usa URLs limpas, como \/tarefas<\/code>, sem o #<\/code>. O pre\u00e7o \u00e9 que o servidor precisa devolver o index.html<\/code> quando algu\u00e9m abre \/tarefas<\/code> direto no navegador. O Vite faz isso sozinho em desenvolvimento; na parte 5 configuramos o Echo para fazer o mesmo.<\/p>\n
Ligue o router em web\/src\/main.js<\/code><\/a> e reduza o App.vue<\/code> a um cont\u00eainer com o <RouterView \/><\/code>:<\/p>\n
import { createApp } from 'vue'\nimport '.\/style.css'\nimport App from '.\/App.vue'\nimport router from '.\/router'\n\ncreateApp(App).use(router).mount('#app')<\/code><\/pre>\n
<template>\n  <main class=\"container\">\n    <RouterView \/>\n  <\/main>\n<\/template><\/code><\/pre>\n
P\u00e1ginas provis\u00f3rias<\/h2>\n
As telas completas v\u00eam nas partes 3 e 4. Por enquanto, crie as duas views com uma chamada \u00e0 rota \/api\/health<\/code> da parte 1, para provar que o proxy funciona. web\/src\/views\/TasksView.vue<\/code>:<\/p>\n
<script setup>\nimport { onMounted, ref } from 'vue'\nimport { api } from '..\/api'\n\nconst status = ref('...')\nonMounted(async () => {\n  status.value = (await api('GET', '\/health')).status\n})\n<\/script>\n\n<template>\n  <section class=\"card\">\n    <h1>Tarefas<\/h1>\n    <p>API: {{ status }}<\/p>\n  <\/section>\n<\/template><\/code><\/pre>\n
E um web\/src\/views\/LoginView.vue<\/code> m\u00ednimo, para a rota existir:<\/p>\n
<template>\n  <section class=\"card\"><h1>Entrar<\/h1><\/section>\n<\/template><\/code><\/pre>\n
Enquanto a rota \/api\/me<\/code> n\u00e3o existe, a guarda do router manda \/tarefas<\/code> para o login. Para testar o proxy nesta etapa, comente temporariamente o meta: { auth: true }<\/code>.<\/p>\n
Rode os dois servidores<\/h2>\n
Terminal 1, na raiz do projeto:<\/p>\n
go run .<\/code><\/pre>\n
Terminal 2, em web\/<\/code>:<\/p>\n
npm run dev<\/code><\/pre>\n
  VITE v8.3.0  ready in 122 ms\n\n  \u279c  Local:   http:\/\/localhost:5173\/<\/code><\/pre>\n
Abra http:\/\/localhost:5173\/tarefas<\/code>: a p\u00e1gina mostra API: ok<\/strong>, vindo do Go pelo proxy. D\u00e1 para conferir tamb\u00e9m pelo terminal:<\/p>\n
curl http:\/\/localhost:5173\/api\/health<\/code><\/pre>\n
{\"status\":\"ok\"}<\/code><\/pre>\n
Repare no endere\u00e7o: o Vite escuta em localhost<\/code>, que em muitos sistemas resolve para ::1<\/code> (IPv6). Se curl http:\/\/127.0.0.1:5173<\/code> recusar a conex\u00e3o, use localhost<\/code>, ou suba o Vite com npm run dev -- --host 127.0.0.1<\/code>.<\/p>\n
Build de produ\u00e7\u00e3o<\/h2>\n
Para ver o que o Go vai embutir no final, rode o build:<\/p>\n
npm run build<\/code><\/pre>\n
dist\/index.html                  0.45 kB \u2502 gzip:  0.29 kB\ndist\/assets\/index-o26dGMpn.css   0.92 kB \u2502 gzip:  0.49 kB\ndist\/assets\/index-U0LYTB29.js   92.56 kB \u2502 gzip: 35.69 kB\n\u2713 built in 59ms<\/code><\/pre>\n
A pasta web\/dist<\/code> tem um index.html<\/code> e os arquivos com hash no nome, prontos para cache longo. O .gitignore<\/code> gerado pelo Vite j\u00e1 ignora dist<\/code>; na parte 5 isso vai importar para o go:embed<\/code>.<\/p>\n
Arquivos desta parte no gist<\/h2>\n
Cada arquivo abre direto no gist da s\u00e9rie<\/a>. O gist traz a vers\u00e3o final<\/strong> do projeto: main.go<\/code> e routes.go<\/code> ainda ganham login na parte 4 e o frontend embutido na parte 5.<\/p>\n