Tutorial de VueJS 3 para principiantes em 11 capítulos

O Vue.js é uma framework JavaScript progressiva: tanto se acrescenta a uma página existente com uma tag script como serve de base a uma aplicação completa com uma ferramenta de build. Este tutorial segue o segundo caminho, o mesmo da documentação oficial e da quase totalidade dos projetos de hoje.

Em onze capítulos, vais construir uma pequena loja: uma ficha de produto com as suas variantes de cor, um carrinho, um formulário de avaliações e as animações que os acompanham. Cada noção aparece no momento em que a aplicação precisa dela, nunca antes.

O que vais construir

Uma única aplicação, enriquecida capítulo a capítulo. No fim, mostra um produto e a sua imagem, reage à passagem do rato sobre as cores, desativa o botão quando a variante está esgotada, enche um carrinho, aceita avaliações validadas e anima-as ao aparecer.

O código passa a estar dividido em componentes a partir do capítulo 8, como num projeto a sério.

O percurso em onze capítulos

1. Criar uma aplicação Vue, o projeto, o createApp, o primeiro dado reativo.
2. Ligação de atributos, mostrar a imagem do produto com v-bind.
3. Renderização condicional, dizer se o produto está disponível, com v-if e v-show.
4. Renderização de listas, a composição do tecido e as variantes, com v-for.
5. Gestão de eventos, o botão que enche o carrinho.
6. Ligação de classes e estilos, as pastilhas de cor e o botão desativado.
7. Propriedades computadas, deduzir a imagem e a disponibilidade a partir da variante escolhida.
8. Componentes e props, dividir a aplicação e transmitir dados.
9. Comunicação de eventos, fazer subir o clique até ao componente pai.
10. Formulários e v-model, o formulário de avaliações e a sua validação.
11. Transições, animar as entradas e as saídas.

O código completo está disponível para descarregar no topo da página: um projeto Vite com uma pasta por capítulo e a bateria de testes que verifica cada um deles.

Composition API: o estilo deste tutorial

O Vue tem duas maneiras de escrever um componente. A Options API arruma o código em opções: data, methods, computed. A Composition API escreve-o como simples variáveis e funções dentro de um bloco <script setup>.

Este tutorial usa a Composition API, porque é o estilo que a documentação oficial recomenda para um projeto novo e o que vais encontrar na maior parte do código escrito desde o Vue 3. Os dois estilos continuam suportados: a Options API não está descontinuada e ainda a vais cruzar durante muito tempo em projetos existentes.

Aqui fica a tabela de equivalências, para teres à mão.

// Composition API, em <script setup>

data() { return { n: 0 } }         const n = ref(0)
computed: { double() { … } }       const double = computed(() => …)
methods: { faire() { … } }         function faire() { … }
props: { titre: String }           const props = defineProps({ titre: String })
emits: ['valider']                 const emit = defineEmits(['valider'])
mounted() { … }                    onMounted(() => { … })
watch: { n(v) { … } }              watch(n, (v) => { … })

this.n                             n.value   // apenas no script,
                                             // nunca no template

Sempre que faz sentido, o capítulo relembra o equivalente da noção abordada em Options API.

Do que precisas

• As bases de HTML, CSS e JavaScript. Se as funções seta e a desestruturação não lhe dizem nada, reveja-as antes de começar.
• Node.js 22.18 ou mais recente (ou 24.12 e seguintes). Verifique com node -v: o gerador de projetos oficial recusa as versões anteriores. Atualize também o npm com npm install -g npm@latest: o npm 10 fornecido com o Node 22 falha no npm install de um projeto Vue novo.
• Um editor de código. O Visual Studio Code com a extensão oficial « Vue – Official » dá autocompletar nos ficheiros .vue. O WebStorm e o Zed também servem.

Não é preciso conhecer o Vue 2. Se vieres de lá, guarda isto: Vue.use, Vue.mixin e Vue.prototype deixaram de existir, tudo passa agora pela instância de aplicação devolvida por createApp.

Como trabalhar este tutorial

Escreve o código em vez de o copiar. Depois de cada capítulo, parte alguma coisa de propósito e lê a mensagem de erro: é a melhor forma de aprender a descodificá-las.

Cada capítulo acaba com um exercício sobre a noção abordada, que se resolve com aquilo que acabaste de escrever.

Depois deste tutorial

Para ligar a aplicação a dados a sério, vê como acrescentar o Firebase a uma aplicação Vue.

Terminados os onze capítulos, o passo seguinte é a partilha de estado entre componentes com o Pinia e, a seguir, o routing com o Vue Router. Do lado da arquitetura, vê como escrever os teus próprios plugins Vue e como tratar o SEO de uma aplicação Vue.