RoadMap Vue

Ivamar Júnior — Tue, 20 Jan 2026 18:12:35 +0000

Nível 0 – Pré-requisitos

Antes de mergulhar no Vue, é fundamental ter uma base sólida em:

1. HTML/CSS

Estrutura de páginas, seletores CSS, Flexbox, Grid, animações básicas.

2. JavaScript

Variáveis (let, const), tipos de dados, funções, arrow functions, arrays, objetos.
DOM: document.querySelector, addEventListener, manipulação de elementos.
ES6+: destructuring, spread/rest, template literals, módulos (import/export).
Conceitos de programação reativa e assíncrona: Promises, async/await.

3. NPM/Yarn e Node.js

Instalar pacotes, rodar scripts, criar projetos básicos.

4. Git

Versionamento, commits, branches.

💡 Dica: se você ainda não domina JS moderno, passe um tempo reforçando antes do Vue.

Nível 1 – Conceitos básicos do Vue.js

Objetivo: entender como Vue funciona, sem se preocupar com grandes apps ainda.

1. Introdução ao Vue

O que é Vue.js e para que serve.
Comparação com React e Angular (opcional, para contexto).
CDN vs CLI (npm init vue@latest).

2. Instalação e configuração

Criar um projeto Vue com Vite (mais rápido que Vue CLI).

3. Estrutura de um projeto Vue

main.js, App.vue, componentes.

4. Template Syntax

{{ }} para interpolação.
Diretivas: v-if, v-else, v-for, v-show.
Eventos: v-on / @click.
Bindings: v-bind / : e v-model.

5. Reatividade

ref e reactive.
Computed properties e watchers.

6. Componentes

Criação de componentes simples.
Props e comunicação pai-filho.
Slots básicos.

📌 Exercício: criar uma lista de tarefas (To-Do List) usando v-for, v-if e v-model.

Nível 2 – Vue intermediário

Objetivo: dominar a arquitetura de aplicativos Vue.
1. Componentes avançados

Slots nomeados e scoped slots.
Emissão de eventos personalizados (emit).

2. Composição API vs Options API

Entender setup(), ref, reactive, computed, watch.
Comparar com a Options API (data, methods, computed).

3. Diretivas personalizadas

Criar v-focus, v-tooltip, etc.

4. Formulários

v-model com objetos e arrays.
Validação básica de formulários.

5. Eventos

Modificadores (.prevent, .stop, .capture).

6. Transições e animações

transition, transition-group.

7. Gerenciamento de estado local

Lidar com estados dentro de componentes.

8. Roteamento

Instalar e configurar Vue Router.
Rotas, rotas aninhadas, rotas dinâmicas.

📌 Exercício: criar um mini blog com múltiplas páginas usando Vue Router.

Nível 3 – Vue avançado

Objetivo: criar aplicações robustas e escaláveis.
1. Gerenciamento de estado global

Pinia (substituto moderno do Vuex).
Criar stores, actions, getters.

2. Consumindo APIs

fetch ou axios.
Integração com back-end (CRUD).

3. Composição API avançada

Reatividade profunda, toRefs, readonly.
Composables (funções reutilizáveis de lógica de estado).

4. Performance

Lazy loading de componentes.
Suspense e async components.

5. Testing

Unit testing com Vue Test Utils e Jest.
E2E testing com Cypress ou Playwright.

6. Boas práticas

Estrutura de pastas, modularização.
Naming conventions.
Linting com ESLint + Prettier.

📌 Exercício: criar um sistema de gerenciamento de tarefas com autenticação e persistência via API.

Nível 4 – Ecossistema e ferramentas avançadas

1. Vue CLI / Vite

Scripts, hot reload, configuração de plugins.

2. Tailwind CSS / Vuetify / BootstrapVue

Estilização rápida e responsiva.

3. SSR (Server Side Rendering)

Nuxt.js (framework Vue para SSR e geração de sites estáticos).

4. PWA com Vue

Progressive Web Apps.

5. Deploy

Netlify, Vercel, Render, ou hospedagem própria.

📌 Exercício: criar um site estático com Nuxt.js + API externa + Tailwind.

Roadmap visual simplificado

Pré-requisitos
│
├─ HTML/CSS
├─ JavaScript moderno
├─ Node/NPM
└─ Git

Nível 1: Básico
│
├─ Vue CDN / CLI
├─ Template syntax
├─ Reatividade
└─ Componentes básicos

Nível 2: Intermediário
│
├─ Componentes avançados
├─ Composição API
├─ Diretivas custom
├─ Forms e eventos
├─ Transições
└─ Vue Router

Nível 3: Avançado
│
├─ Pinia / Vuex
├─ API integration
├─ Composables
├─ Performance
├─ Testing
└─ Boas práticas