RoadMap Vue

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

Nível 4: Ecossistema

│

├─ Vite / CLI avançado

├─ Tailwind / Vuetify

├─ Nuxt.js (SSR)

├─ PWA

└─ Deploy