Gerador de Vue Component (Composition API)

Esqueletos de componentes Vue.js em 2026

O Vue.js é um framework JavaScript progressivo criado em 2014 por Evan You, ex-Googler do time do Angular que queria "as partes do Angular que eu gostava, sem o peso". Hoje o Vue roda GitLab, a loja online da Nintendo, Louis Vuitton e Alibaba. O componente é a unidade de composição — cada arquivo .vue é um Single File Component (SFC) que junta três blocos: <template> (marcação HTML com diretivas), <script setup> (estado reativo e lógica) e <style scoped> (CSS isolado àquele componente).

Este gerador monta o boilerplate para você não precisar redigitar defineProps, defineEmits, o bloco de estilo escopado e um template inicial. Digite o nome do componente em PascalCase, copie a saída, salve em src/components/SeuNome.vue e comece a preencher o corpo — trinta segundos por arquivo somam horas ao longo de um projeto real.

Vue 2 vs Vue 3: para qual versão gerar

O Vue 2 (só Options API) atingiu fim de vida em dezembro de 2023; o release 2.7 final fez backport de helpers da Composition API, mas não há mais patches de segurança. O Vue 3 (lançado em 2020) traz Options API e Composition API juntas, inferência de TypeScript muito melhor, sistema de reatividade reescrito com Proxy, fragmentos (múltiplas raízes) e Teleport. Todo projeto novo em 2026 deve mirar Vue 3 — salvo manutenção de legado onde migrar custa mais que o risco de EOL.

Composition API e <script setup>

A Composition API expõe a reatividade como funções: ref() para primitivos, reactive() para objetos, computed() para valores derivados, watch() e watchEffect() para efeitos, mais hooks de ciclo de vida como onMounted(), onUnmounted() e injeção de dependência via provide()/inject(). O açúcar sintático <script setup> transforma o bloco inteiro no corpo do componente — bindings top-level ficam visíveis no template e refs são desempacotadas automaticamente, então você escreve {{ count }} em vez de {{ count.value }}.

Diretivas embutidas — referência

• v-if / v-else-if / v-else — renderização condicional (remove do DOM).
• v-show — alterna display:none; mantém no DOM.
• v-for="item in list" :key="item.id" — listas; o :key é obrigatório.
• :attr (v-bind) e @event (v-on) — bindings e listeners.
• v-model — binding bidirecional; aceita v-model:propName em componentes filhos.
• v-slot, v-html (cuidado com XSS), v-text, v-pre, v-once, v-memo.

Props, emits e slots

Props são declaradas com defineProps<{ name: string; age?: number }>() (TypeScript) ou defineProps({ name: { type: String, required: true } }). Emits são declarados com const emit = defineEmits(['update:modelValue']) e disparados via emit('update:modelValue', val). Slots vêm em três sabores: padrão <slot/>, nomeado <slot name="header"/> e escopado <slot :data="row"/> consumido pelo pai com v-slot="{ data }".

Ecossistema Vue indispensável

• Pinia — gerenciador de estado oficial, sucessor do Vuex; baseado na Composition API e totalmente tipado.
• vue-router v4 — roteamento file-based ou programático; chunks lazy por rota.
• Nuxt 3 — meta-framework full-stack com SSR, SSG, ISR e edge rendering.
• VueUse — 200+ composables utilitários (useLocalStorage, useFetch, useDark, ...).
• Vitest + Vue Test Utils — testes unitários rápidos sobre o Vite.
• VeeValidate / FormKit — validação e renderização de formulários.

Perguntas frequentes

Vue 2 ainda é seguro em produção? Roda, mas o último patch saiu em dezembro de 2023. Novas CVEs no Vue 2 não serão corrigidas pelo time core. Se migrar não é viável, existe o HeroDevs Vue 2 NES, LTS comercial.

Devo usar Options API ou <script setup>? Em componentes novos, prefira <script setup> — menos boilerplate, melhor inferência TS, extração mais fácil de lógica para composables. A Options API continua funcionando no Vue 3 e é boa opção para times vindos do Vue 2 que querem migração gradual.

Vue vs React vs Svelte — qual é melhor? Os três são excelentes. Vue é mais opinated (SFC, reatividade embutida, router e store oficiais), React é mais flexível porém com mais boilerplate, Svelte compila o runtime para fora. A escolha cai em familiaridade do time e mercado de contratação.

Como adiciono TypeScript? Mantenha a extensão .vue e use <script setup lang="ts">. O scaffold create-vue já configura o vue-tsc para checagem de tipos e o Volar no editor.