Imagem do Curso gratuito Nuxt.js curso completo e gratuito

Curso online gratuitoNuxt.js curso completo e gratuito

Duração do curso online: 5 horas e 34 minutos

Novo

Domine Nuxt.js e crie apps Vue mais rápidas com SSR e rotas por arquivos. Curso online gratuito com projeto prático, Tailwind, deploy e certificado.

Neste curso gratuito, aprenda sobre

  • Criar e inicializar um projeto Nuxt 3 via CLI e entender o diferencial vs SPA Vue
  • Entender SSR, SSG/Universal, híbrido e CSR; quando usar cada modo de renderização
  • Dominar a estrutura do Nuxt: app.vue, pages, layouts, components e roteamento por arquivos
  • Gerenciar assets: diferença entre public e assets; uso de imagens, fontes e CSS
  • Configurar TailwindCSS em projeto Nuxt e manter dependências atualizadas sem warnings
  • Implementar middlewares no Nuxt: global, nomeado e anônimo, e seus casos de uso
  • Criar rotas dinâmicas por arquivos (ex: [id].vue) e páginas de detalhes por parâmetro
  • Usar query params: sintaxe na URL, leitura via route e renomear parâmetros no Nuxt
  • Consumir APIs (Rick and Morty), paginação padrão e listagens de personagens/episódios
  • Reaproveitar UI com componentes e slots (ex: Card com conteúdo inserível)
  • Criar componentes reutilizáveis com props e valores padrão (ex: tamanho de SVG)
  • Aplicar meta tags por página e organizar layouts/containers (Hero, Footer, PageContainer)
  • Fazer deploy do Nuxt na Vercel/Netlify via GitHub e preparar o projeto para importação

Descrição do curso

Aprenda a desenvolver aplicações modernas com Nuxt.js (baseado em Vue 3) e acelere sua evolução no front-end com um fluxo de trabalho pensado para produtividade e performance. Neste curso online gratuito, você entende por que o Nuxt se destaca em relação a um SPA tradicional, quando usar renderização no servidor, quando optar por CSR e como aplicar abordagens híbridas para melhorar SEO, tempo de carregamento e experiência do usuário.

Ao longo das aulas, você ganha segurança na estrutura de um projeto Nuxt, entendendo a função do app.vue, a organização entre components, layouts e pages, e como o roteamento por arquivos simplifica a criação de páginas e navegação. Você também aprende a lidar corretamente com assets e recursos estáticos, evitando armadilhas comuns entre as pastas public e assets e deixando o projeto pronto para crescer com manutenção simples.

Além da base, o curso leva você para a prática com TailwindCSS e construção de interface reutilizável, reforçando boas decisões de arquitetura para reaproveitar layouts e compor componentes de forma flexível. Você aprende a trabalhar com rotas dinâmicas e parâmetros de URL, incluindo query params, acessando valores, tratando estados como erros e tornando a aplicação mais robusta e previsível.

Para consolidar, você desenvolve um projeto completo consumindo a API de Rick and Morty, criando listagens e telas de detalhes com navegação bem estruturada e componentes reutilizáveis. Também vê como ajustar ícones e propriedades de componentes com valores padrão, mantendo consistência visual sem perder personalização. Na etapa final, você aprende a preparar e publicar seu projeto em plataformas populares como Vercel e Netlify via GitHub, além de atualizar dependências e resolver avisos comuns do ambiente.

Se você busca um caminho direto para dominar Nuxt 3 com prática real, este curso entrega o que importa: fundamentos claros, organização de projeto, integração com APIs, UI eficiente e deploy. Ao concluir, você terá um portfólio mais forte, compreensão dos modos de renderização e confiança para criar aplicações prontas para produção.

Conteúdo do curso

  • Aula em vídeo: ???? Curso COMPLETO e GRATUITO de Nuxt.js – Aula #1 09m
  • Exercício: Qual é um dos principais diferenciais do Nuxt.js em relação a uma aplicação Vue no modelo SPA?
  • Aula em vídeo: ? Renderização universal, Híbrida ou CSR? Entenda os Modos de Renderização no Nuxt.js - Aula #2 03m
  • Exercício: Quais são os três modos de renderização disponíveis no Nuxt.js?
  • Aula em vídeo: ????? Estrutura das Views no Nuxt.js: Components, Layouts, Pages e Mais! (Curso Grátis - Aula #3 04m
  • Exercício: No Nuxt.js, qual é o papel do arquivo app.vue na estrutura de uma aplicação?
  • Aula em vídeo: ?? Assets no Nuxt.js: Como adicionar Imagens, Fontes e CSS no seu Projeto com Nuxt.JS - Aula #4 03m
  • Exercício: No Nuxt.js, qual é a principal diferença entre colocar um arquivo na pasta public e na pasta assets?
  • Aula em vídeo: ???? Instalação e Configuração do Projeto Nuxt.JS com TailwindCSS do Curso Gratuito de NUXT - Aula #5 07m
  • Exercício: Qual comando é usado para iniciar um novo projeto Nuxt (via CLI) no setup inicial?
  • Aula em vídeo: ?? Middlewares no Nuxt.js: Global, Nomeado e Anônimo | O Que São e Como Usar | Aula #6 14m
  • Exercício: No Nuxt, qual é a principal diferença de um middleware global para um middleware nomeado?
  • Aula em vídeo: ???? Como criar páginas e Rotas Dinâmicas no Nuxt | Aula #7 12m
  • Exercício: No Nuxt.js, como uma rota dinâmica é definida no sistema de roteamento por arquivos?
  • Aula em vídeo: ????O que são Parâmetros de Consulta (Query Params) e Para Que Servem? | Aula #8 08m
  • Exercício: Em uma URL, qual elemento marca o início dos parâmetros de consulta (query params)?
  • Aula em vídeo: ????????????? Aprenda a Usar Query Params no Nuxt na Prática | Aula #9 07m
  • Exercício: Em Nuxt.js, como acessar e renomear um parâmetro de consulta como error vindo da URL?
  • Aula em vídeo: ????? Aula prática Nuxt: Criando a listagem de personagens no Nuxt com a API do Rick and Morty #10 1h18m
  • Exercício: Ao consumir a API do Rick and Morty para listar personagens, quantos resultados a API retorna por página automaticamente?
  • Aula em vídeo: ????? Aula Prática Nuxt: Listagem de Episódios com a API Rick and Morty #11 27m
  • Exercício: Ao refatorar a listagem para reaproveitar layout entre personagens e episódios em Nuxt/Vue, qual abordagem foi usada para permitir inserir conteúdo dentro de um componente de Card?
  • Aula em vídeo: ????? Aula Prática Nuxt: Finalizando a listagem de Episódios com a API Rick and Morty #12 41m
  • Exercício: Ao ajustar o tamanho de um ícone SVG em um componente no Nuxt (Vue 3), qual abordagem permite definir valores padrão e ainda aceitar sobrescrita via props?
  • Aula em vídeo: ????? Deploy na Vercel e Netlify via GitHub do projeto do curso gratuito de NuxtJS #13 07m
  • Exercício: Ao fazer o deploy de uma aplicação Nuxt.js em plataformas como Vercel e Netlify, qual é um passo essencial para que elas consigam importar o projeto corretamente?
  • Aula em vídeo: ???? Atualizando as bibliotecas Tailwind CSS e Nuxt no projeto do curso Gratuito de NuxtJS #14 10m
  • Exercício: Ao atualizar dependências em um projeto Nuxt 3, qual foi a ação que resolveu os warnings no console relacionados ao Twind?
  • Aula em vídeo: ????? Aula Prática Nuxt: Meta Tags, Layouts e Rotas no Projeto com Rick and Morty #15 48m
  • Exercício: No Nuxt 3, como criar uma rota dinâmica para exibir detalhes de um personagem pelo ID na URL?
  • Aula em vídeo: ????? Aula Prática Nuxt: Criando Footer, Container e Hero do Projeto #16 47m
  • Exercício: Em Nuxt 3, qual é a finalidade do componente PageContainer criado na aula?

Este curso gratuito inclui:

5 horas e 34 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