Imagem do Curso gratuito Vue.js 3 do Zero ao Intermediário (Router, Vuex e Composition API)

Curso online gratuitoVue.js 3 do Zero ao Intermediário (Router, Vuex e Composition API)

Duração do curso online: 6 horas e 48 minutos

Novo

Aprenda Vue.js 3 na prática e crie SPAs com Router, Vuex e Composition API. Curso online gratuito, com exercícios e projeto para portfólio.

Neste curso gratuito, aprenda sobre

  • Fundamentos do Vue 3 e estrutura de um app no ecossistema
  • Formas de instalação: CDN vs Vite/NPM e quando usar cada uma
  • SFC (.vue): uso de template, script e style no mesmo arquivo
  • Renderização condicional: diferenças e uso de v-if e v-show
  • Listas com v-for: uso de key para performance e consistência
  • Data binding com v-bind e bindings dinâmicos de class/style
  • Two-way data binding com v-model em formulários
  • Eventos no Vue: v-on, modifiers como .prevent e boas práticas
  • Computed vs watch: derivação reativa e reação a mudanças
  • Ciclo de vida: hooks para iniciar libs no DOM e limpar recursos
  • Componentização: slots, scoped CSS, props e emit (pai/filho)
  • Vue Router: RouterView e acesso a params em rotas dinâmicas
  • Vuex: state global, mutations, getters, actions e fluxo de dados
  • Composition API: setup, ref/reactive, computed/watch e props/emit

Descrição do curso

Desenvolver interfaces modernas e escaláveis exige mais do que saber “montar telas”: é preciso dominar componentes, reatividade e organização de estado e rotas. Neste curso online gratuito de Vue.js 3, você evolui do zero ao nível intermediário criando aplicações front-end com uma base sólida, entendendo como o framework funciona e, principalmente, como aplicar cada recurso com intenção e boas práticas.

Você começa pelos fundamentos essenciais do ecossistema Vue, aprendendo diferentes formas de instalação e como trabalhar com Single File Components (SFC) para estruturar projetos de maneira profissional. A partir daí, ganha fluência na construção de templates com controle de renderização e listas, data binding em atributos, classes e estilos, além da ligação bidirecional de dados em formulários. Tudo isso é complementado com o uso correto de eventos, computed properties e watchers para tornar sua aplicação mais eficiente, previsível e fácil de manter.

Para que seus componentes sejam realmente reutilizáveis, o curso aprofunda comunicação entre pai e filho com props e emit, além do uso de slots para composição de layout. Você também entende a diferença entre CSS global e escopado e aprende a evitar efeitos colaterais visuais em projetos maiores. Com isso, você passa a montar interfaces por partes, com responsabilidade bem definida e código mais limpo.

No nível intermediário, o foco vai para arquitetura de SPA com Vue Router, trabalhando com rotas, rotas dinâmicas e a renderização de páginas dentro da aplicação. Em seguida, você aprende gerenciamento de estado global com Vuex, entendendo na prática quando e por que usar state, mutations, actions e getters para manter consistência entre componentes e tratar fluxos assíncronos de forma segura.

Para fechar, você entra na Composition API do Vue 3, aprendendo setup, reatividade com ref e reactive, computed e watch no novo modelo, além de lifecycle hooks e padrões para lidar com props e emissão de eventos. O curso culmina em um projeto completo, incluindo a simulação de back-end e a evolução do código, reforçando decisões de arquitetura, sincronização de estado e organização de componentes — um ótimo material para demonstrar habilidades em entrevistas e fortalecer seu portfólio.

Conteúdo do curso

  • Aula em vídeo: Curso gratuito Vue.js 3 INTRO #1 - Introdução 14m
  • Exercício: No ecossistema do Vue.js, qual ferramenta é responsável por gerenciar o estado global da aplicação?
  • Aula em vídeo: Curso gratuito Vue.js 3 INTRO #2 - Instalando 17m
  • Exercício: Em qual cenário a instalação do Vue via CDN é mais indicada?
  • Aula em vídeo: Curso gratuito Vue.js 3 INTRO #3 - Componentes de arquivo u?nico SFC 11m
  • Exercício: Em um componente Vue no formato SFC (.vue), qual combinação de camadas pode existir dentro de um único arquivo?
  • Aula em vídeo: Curso gratuito Vue.js 3 INTRO #4 - Declarac?o?es condicionais (diretiva v-if v-show) 16m
  • Exercício: Qual é a principal diferença entre as diretivas v-show e v-if ao controlar a exibição de um elemento?
  • Aula em vídeo: Curso gratuito Vue.js 3 INTRO #5 - Instruço?es de loops (diretiva v-for) 07m
  • Exercício: Ao renderizar uma lista com v-for no Vue 3, qual prática melhora a performance e evita problemas de renderização ao identificar cada item?
  • Aula em vídeo: Curso gratuito Vue.js 3 INTRO #6 - Atributos dinâmicos com data binding (diretiva v-bind) 08m
  • Exercício: Em Vue.js, qual é a forma correta de tornar um atributo HTML dinâmico (ex.: src ou alt) usando bind?
  • Aula em vídeo: Curso gratuito Vue.js 3 INTRO #7 - Atributos Class e Style dina?micos 12m
  • Exercício: No Vue.js, como funciona o binding de classes usando objeto em :class?
  • Aula em vídeo: Curso gratuito Vue.js 3 INTRO #8 - Ligac?a?o de dados bidirecional (diretiva v model) 10m
  • Exercício: No Vue.js, qual diretiva é usada para fazer two-way data binding (ligação de mão dupla) em elementos de formulário?
  • Aula em vídeo: Curso gratuito Vue.js 3 INTRO #9 - Eventos 12m
  • Exercício: Em Vue.js, qual alternativa usa corretamente um modificador de evento para impedir o comportamento padrão do formulário ao enviar?
  • Aula em vídeo: Curso gratuito Vue.js 3 INTRO #10 - Propriedade computada (computed) 15m
  • Exercício: Em Vue.js, qual é a principal vantagem de usar uma propriedade computada para gerar um valor (ex.: nome completo) a partir de outros campos?
  • Aula em vídeo: Curso gratuito Vue.js 3 INTRO #11 - Observadores (watch) 12m
  • Exercício: Ao criar um observador (watcher) para a propriedade name, quais parâmetros a função observadora recebe para lidar com a mudança?
  • Aula em vídeo: Curso gratuito Vue.js 3 INTRO #12 - Ciclo de vida (life cycle) 17m
  • Exercício: Em qual fase/gancho do ciclo de vida é mais indicado inicializar uma biblioteca externa que precisa acessar o DOM/template no Vue.js?
  • Aula em vídeo: Curso gratuito Vue.js 3 INTRO #13 - Componentes slot 09m
  • Exercício: Qual é a forma correta de enviar conteúdo para um slot nomeado em um componente Vue 3?
  • Aula em vídeo: Curso gratuito Vue.js 3 INTRO #14 - Scoped e global CSS 08m
  • Exercício: Ao definir estilos dentro de um componente Vue, qual alternativa garante que a classe não afete elementos fora desse componente?
  • Aula em vídeo: Curso gratuito Vue.js 3 INTRO #15 - Enviando dados para o componente filho (props) 17m
  • Exercício: No Vue.js, qual é a finalidade principal de usar props em um componente filho?
  • Aula em vídeo: Curso gratuito Vue.js 3 INTRO #16 - Enviando dados do filho para o pai (emit) 06m
  • Exercício: Como o componente filho pode avisar o componente pai para fechar um Alert no Vue.js?
  • Aula em vídeo: Curso gratuito Vue.js 3 INTRO #17 - Introduc?a?o ao Vue Router parte 1 11m
  • Exercício: Ao usar o Vue Router, qual é a função do componente RouterView na aplicação?
  • Aula em vídeo: Curso gratuito Vue.js 3 INTRO #18 - Introduc?a?o ao Vue Router parte 2 09m
  • Exercício: Em uma rota dinâmica como /usuarios/:id, qual propriedade é usada para acessar o valor do parâmetro id dentro do componente?
  • Aula em vídeo: Curso gratuito Vue.js 3 INTRO #19 - Introduc?a?o VUEX (state) 12m
  • Exercício: Qual é a principal vantagem de usar Vuex para acessar dados do usuário logado em vários componentes?
  • Aula em vídeo: Curso gratuito Vue.js 3 INTRO #20 - Introduc?a?o VUEX Mutations parte 1 06m
  • Exercício: No Vuex, qual método é usado no componente para disparar uma mutation e atualizar o state?
  • Aula em vídeo: Curso gratuito Vue.js 3 INTRO #21 - Introduc?a?o VUEX Mutations parte 2 15m
  • Exercício: Ao clicar em Adicionar em um produto, qual é a forma correta de atualizar o carrinho no Vuex?
  • Aula em vídeo: Curso gratuito Vue.js 3 INTRO #22 - Introduc?a?o VUEX Getters 05m
  • Exercício: No Vuex, qual é a principal função de um getter ao calcular o total do carrinho?
  • Aula em vídeo: Curso gratuito Vue.js 3 INTRO #23 - Introduc?a?o VUEX Actions 11m
  • Exercício: No Vuex, qual é o principal motivo para usar Actions em vez de alterar o state diretamente ou usar apenas Mutations?
  • Aula em vídeo: Curso gratuito Vue.js 3 INTRO #24 - Introduc?a?o a composition API setup 14m
  • Exercício: Na Composition API do Vue 3, o que define quais variáveis e funções ficam disponíveis no template do componente?
  • Aula em vídeo: Curso gratuito Vue.js 3 INTRO #25 - Introduc?a?o a composition API Reatividade 09m
  • Exercício: Ao usar a Composition API no Vue 3, qual é a principal diferença prática entre reactive e ref ao manipular valores no JavaScript?
  • Aula em vídeo: Curso gratuito Vue.js 3 INTRO #26 - Introduc?a?o a composition API Computed e Watch 07m
  • Exercício: Na Composition API do Vue 3, qual é a forma correta de observar uma propriedade específica dentro de um objeto reativo usando watch?
  • Aula em vídeo: Curso gratuito Vue.js 3 INTRO #27 - Introduc?a?o a composition API Ciclo de vida 06m
  • Exercício: No Vue 3 com Composition API, qual é o hook mais indicado para limpar recursos (ex.: listeners, timers e libs de terceiros) e evitar vazamento de memória ao remover um componente?
  • Aula em vídeo: Curso gratuito Vue.js 3 INTRO #28 - Introduc?a?o a composition API Props e Emit 08m
  • Exercício: Na Composition API do Vue 3, como acessar props e emitir eventos dentro do método setup()?
  • Aula em vídeo: Curso gratuito Vue.js 3 INTRO #29 - Projeto aula 01 13m
  • Exercício: Para simular um back-end durante o projeto, qual ferramenta deve ser instalada globalmente para subir uma REST API a partir de um arquivo JSON?
  • Aula em vídeo: Curso gratuito Vue.js 3 INTRO #30 - Projeto aula 02 17m
  • Exercício: Ao organizar a interface em subcomponentes no Vue, qual foi o padrão adotado para nomear componentes do contexto de tarefas (todos)?
  • Aula em vídeo: Curso gratuito Vue.js 3 INTRO #31 - Projeto aula 03 13m
  • Exercício: Ao usar Vuex com actions que retornam Promise, qual é a principal vantagem de retornar a Promise da action e usar .then/.finally no componente?
  • Aula em vídeo: Curso gratuito Vue.js 3 INTRO #32 - Projeto aula 04 15m
  • Exercício: Ao editar o título de uma tarefa, qual abordagem evita o anti padrão de modificar diretamente uma prop e facilita disparar a atualização ao pressionar Enter?
  • Aula em vídeo: Curso gratuito Vue.js 3 INTRO #33 - Projeto aula 05 13m
  • Exercício: Ao atualizar uma tarefa, como sincronizar o estado no Vuex para substituir o item existente (em vez de apenas adicionar um novo)?
  • Aula em vídeo: Curso gratuito Vue.js 3 INTRO #34 - Refazedo o projeto com composition API part 1 09m
  • Exercício: Ao migrar um componente da Options API para a Composition API no Vue 3, qual é a forma correta de disponibilizar uma variável reativa no template?
  • Aula em vídeo: Curso gratuito Vue.js 3 INTRO #35 - Refazedo o projeto com composition API part 2 08m
  • Exercício: Ao migrar um componente para a Composition API no Vue 3, qual é a forma correta de expor variáveis e funções para uso no template?

Este curso gratuito inclui:

6 horas e 48 minutos de curso online em vídeo

Certificado digital de conclusão de curso ( Gratuito )

Exercícios para treinar seus conhecimentos

100% gratuito, do conteúdo ao certificado

Pronto para começar?Baixe o app e comece hoje mesmo.

Instale o app agora

para ter acesso ao curso
Ícone representando cursos de tecnologia e negócios

+ de 5.000 cursos gratuitos

Programação, Inglês, Marketing Digital e muito mais! Aprenda o que quiser, gratuitamente.

Ícone de calendário com alvo representando planejamento de estudos

Plano de estudos com IA

A Inteligência Artificial do nosso aplicativo pode criar um cronograma de estudos para o curso que você escolher.

Ícone de profissional representando carreira e negócios

Do zero ao Sucesso profissional

Melhore seu currículo com nosso Certificado gratuito e depois utilize nossa Inteligência Artificial para buscar seu emprego dos sonhos.

Você também pode utilizar o QR Code ou os Links abaixo

QR Code - Baixar Cursa - Cursos Online

Mais cursos gratuitos em Programação Front-End

Ebook + Áudiobooks gratuitos! Aprenda ouvindo ou lendo!

Baixe o Aplicativo agora para ter acesso a + de 5000 cursos gratuitos, exercícios, certificado e muito conteúdo sem pagar nada!

  • Cursos online 100% gratuitos do início ao fim

    Milhares de cursos online em vídeo, ebooks e áudiobooks.

  • Mais de 60 mil exercícios gratuitos

    Para testar seus conhecimentos no decorrer dos cursos online

  • Certificado Digital gratuito válido em todo o Brasil

    Gerado diretamente na galeria de fotos do seu celular e enviado ao seu e-mail

Aplicativo Cursa na tela de ebook, na tela de curso em vídeo e na tela de exercícios do curso, mais o certificado de conclusão de curso