Baseado na documentação oficial — pt.vuejs.org
| Comando | Descrição |
|---|---|
node -v |
Verifica se o Node está instalado. |
npm create vue@latest |
Cria um projeto Vue com o instalador oficial (create-vue). Permite escolher TypeScript, Router, Pinia, etc. |
npm install |
Instala as dependências do projeto. |
npm run dev |
Inicia o servidor de desenvolvimento. |
O Vue usa o create-vue (baseado em Vite) como ferramenta oficial de scaffolding, assim como o React usa o Vite.
Vue (pronunciado /vjuː/, como view) é uma abstração JavaScript para construção de interfaces de usuário. Assim como o React, ele brilha em aplicações interativas.
Constrói sobre HTML, CSS e JavaScript padrão, fornecendo um modelo de programação declarativo e baseado em componentes.
Suas duas funcionalidades principais são:
Interpretação Declarativa
Vue estende o HTML com uma sintaxe de template que descreve a saída baseada no estado JavaScript. O que você escreve no template reflete diretamente o que aparece na tela.
Reatividade
Vue rastreia automaticamente mudanças no estado JavaScript e atualiza o DOM de forma eficiente — sem você precisar fazer nada manualmente.
.vueO Vue usa arquivos .vue chamados de SFC (Single File Component). É o equivalente ao .jsx do React.
Cada arquivo .vue encapsula as três partes de um componente em um único lugar:
<script> — lógica JavaScript<template> — estrutura HTML<style> — estilos CSS (opcionalmente com scoped)💡 O scoped no style faz com que o CSS só afete aquele componente, sem vazar para outros.
// MeuComponente.vue
<script setup>
import {"{ ref }"} from 'vue'
const count = ref(0)
</script>
<template>
<button @click="count++">
Cliques: {"{{ count }}"}
</button>
</template>
<style scoped>
button {"{"} font-weight: bold; {"}"}
</style>
O Vue tem duas formas de escrever componentes. Ambas funcionam — são interfaces diferentes sobre o mesmo sistema por baixo.
Options API
Define a lógica do componente por meio de um objeto de opções (data, methods, mounted…). Mais familiar para quem vem de orientação a objetos.
export default {"{"}
data() {"{"}
return {"{"} count: 0 {"}"}
{"}"},
methods: {"{"}
increment() {"{"}
this.count++
{"}"}
{"}"},
mounted() {"{"}
console.log(this.count)
{"}"}
{"}"}
Composition API (recomendada)
Define a lógica usando funções importadas do Vue. Com <script setup>, tudo que você declara fica disponível no template automaticamente.
<script setup>
import {"{ ref, onMounted }"} from 'vue'
const count = ref(0)
function increment() {"{"}
count.value++
{"}"}
onMounted(() => {"{"}
console.log(count.value)
{"}"})
</script>
⚠️ Para projetos novos, prefira a Composition API + <script setup>. A Options API é mais comum em projetos antigos ou para quem vem de POO.
ref e reactiveNo Vue, o equivalente ao useState do React é o ref(). Quando o valor muda, a interface atualiza automaticamente.
ref()
Para valores simples (string, number, boolean). Para alterar, use .value no script — no template, o Vue acessa automaticamente sem o .value.
const nome = ref('Felipe')
const count = ref(0)
// no script: use .value
count.value++
// no template: sem .value
{"{{ count }}"}
reactive()
Para objetos completos. Não precisa de .value — acessa as propriedades diretamente. Melhor para agrupar estados relacionados.
const user = reactive({"{"}
nome: 'Felipe',
idade: 25
{"}"})
// altera direto, sem .value
user.idade = 26
{"{{ user.nome }}"}
O template do Vue usa HTML com diretivas especiais. No React você usa JSX com JavaScript puro — no Vue você usa atributos prefixados com v- ou símbolos como @ e :.
| Sintaxe | React equivalente | Descrição |
|---|---|---|
| {"{{ valor }}"} | {"{valor}"} | Interpola um valor reativo no HTML. |
| v-bind:href ou :href | href={"{valor}"} | Vincula um atributo a um valor reativo. |
| v-on:click ou @click | onClick={"{fn}"} | Escuta eventos do DOM. |
| v-if / v-else | {"{cond && |
Renderização condicional. |
| v-for | {"{arr.map(...)}"} | Renderiza uma lista de elementos. |
| v-model | value + onChange | Two-way binding em inputs — vincula e atualiza o estado automaticamente. |
// exemplos no template
<p :class="ativo ? 'verde' : 'cinza'">Texto</p>
<input v-model="nome" />
<li v-for="item in lista" :key="item.id">{"{{ item.nome }}"}</li>
<div v-if="logado">Bem-vindo!</div>
<button @click="salvar">Salvar</button>
Assim como no React, props passam dados do componente pai para o filho. No Vue com Composition API, você as declara com defineProps().
Para emitir eventos de volta ao pai (como um callback), usa-se defineEmits() — o equivalente de passar uma função como prop no React.
⚠️ Props são somente leitura — nunca altere uma prop diretamente no filho.
// Filho: TaskItem.vue
const props = defineProps({"{"}
title: String,
done: Boolean
{"}"})
const emit = defineEmits(['delete'])
// Pai: App.vue
<TaskItem
:title="task.title"
:done="task.done"
@delete="removeTask"
/>
onMounted e outrosO equivalente ao useEffect(fn, []) do React (executar ao montar) é o onMounted() do Vue.
| Hook Vue | React equivalente | Quando é chamado |
|---|---|---|
| onMounted() | useEffect(fn, []) | Após o componente ser inserido no DOM. |
| onUpdated() | useEffect(fn, [dep]) | Após uma atualização reativa re-renderizar o componente. |
| onUnmounted() | useEffect(() => () => cleanup, []) | Quando o componente é removido do DOM. Ideal para limpar timers e listeners. |
import {"{ ref, onMounted }"} from 'vue'
const tasks = ref([])
onMounted(async () => {"{"}
const res = await fetch('https://jsonplaceholder.typicode.com/todos?_limit=10')
tasks.value = await res.json()
{"})"}
💡 Diferente do React, dentro do onMounted você pode usar async diretamente — sem precisar criar uma função interna.
computedUm valor derivado de um estado reativo. O Vue recalcula automaticamente quando a dependência muda — e armazena em cache até que mude de fato.
Equivale a um useMemo() do React, mas sem precisar declarar dependências manualmente.
⚠️ Não use computed para ações com efeito colateral (chamadas de API, alterar estado). Para isso, use watch.
import {"{ ref, computed }"} from 'vue'
const tasks = ref([...])
// recalcula só quando tasks mudar
const concluidas = computed(() =>{"{"}
return tasks.value.filter(t => t.done)
{"}"})
// no template
{"{{ concluidas.length }}"} tarefas concluídas
watchO watch executa uma função toda vez que um valor reativo muda — o equivalente ao useEffect(fn, [dep]) do React.
Use quando precisa reagir a mudanças com efeitos colaterais: salvar no localStorage, chamar APIs, iniciar animações.
import {"{ ref, watch }"} from 'vue'
const tasks = ref([])
// executa toda vez que tasks mudar
watch(tasks, (novoValor) => {"{"}
localStorage.setItem(
'tasks',
JSON.stringify(novoValor)
)
{"}"}, {"{"} deep: true {"}"})
💡 O {"{ deep: true }"} faz o Vue observar mudanças dentro de objetos e arrays aninhados.
O equivalente ao React Router Dom é o Vue Router — a biblioteca oficial de roteamento do Vue.
Instale com: npm install vue-router@4
| Vue Router | React Router equivalente | Uso |
|---|---|---|
| createRouter() | createBrowserRouter() | Cria o roteador com a lista de rotas. |
| <RouterView /> | RouterProvider | Onde a página/componente da rota atual é renderizado. |
| <RouterLink /> | <Link /> | Link de navegação sem recarregar a página. |
| useRouter() | useNavigate() | Navega programaticamente entre rotas. |
| useRoute() | useSearchParams() | Acessa params e query da rota atual. |
Estado Global
Pinia é a biblioteca oficial de gerenciamento de estado do Vue — equivalente ao Redux/Zustand do React. Mais simples e moderna que o Vuex (antigo padrão).
Formulários
VeeValidate + Zod ou Yup para validação de formulários complexos.
Data Fetching
VueUse (coleção de composables utilitárias) ou TanStack Query (mesma lib do React Query, mas para Vue).
Testes
Vitest + Vue Testing Library + Cypress para testes e2e.
Vue no Servidor
Nuxt.js é o framework Vue para SSR/SSG — equivalente ao Next.js para React. Padrão do mercado Vue.
Componentes UI
Vuetify, PrimeVue ou shadcn-vue para bibliotecas de componentes prontos.