VUE 3 Masterclass 2025 | Pinia + Vue Router

Cod3r Cursos•2025-10-28•1 hora 33 minutos•Iniciante a Intermediário
Vue.jsVue 3PiniaVue RouterJavaScriptTypeScriptFront-end

Sobre este curso

Uma masterclass de Vue.js 3, cobrindo os fundamentos do framework, gerenciamento de estado com Pinia e roteamento com Vue Router. A aula foca em ser uma introdução prática e direta.

Esta masterclass do canal Cod3r Cursos é focada em ensinar o Vue.js 3 [00:00:00], apresentando-o como um framework simples e intuitivo. A aula aborda a criação de uma aplicação prática para demonstrar os conceitos fundamentais, incluindo gerenciamento de estado e roteamento [00:04:56].

O que você vai aprender

  • Setup: Criar um projeto Vue 3 do zero usando npm create vue@latest [00:03:40].
  • Configuração: Incluir TypeScript, Vue Router e Pinia no projeto [00:04:11].
  • Estrutura: Organizar o projeto em pastas (módulos, componentes, layouts) [00:06:43].
  • Estilização: Configurar e utilizar Tailwind CSS no projeto Vue [00:09:23].
  • Componentes:
    • O que é um Componente Single File (.vue) (Script, Template, Style) [00:25:24].
    • Criar um layout de página reutilizável (AppLayout) [00:12:12].
    • Passar propriedades (Props) para componentes filhos usando defineProps [00:30:31].
    • Renderização condicional com v-if / v-else [00:41:32].
  • Roteamento (Vue Router):
    • Configurar rotas, incluindo rotas aninhadas (filhas) [00:18:29].
    • Usar <RouterView> para renderizar componentes de página [00:19:41].
    • Criar links de navegação com <RouterLink> [00:27:03].
    • Criar rotas de guarda (autenticação) usando router.beforeEach [01:07:34].
  • Gerenciamento de Estado (Pinia):
    • Criar uma "store" com defineStore [00:53:03].
    • Definir estado (ref), computados (computed) e ações (function) [00:53:35].
    • Usar a store em diferentes componentes para compartilhar estado [00:59:57].
  • Estado Local (Composition API):
    • Gerenciar o estado local do componente com ref() [00:45:12].
    • Lidar com eventos @click para alterar o estado [00:46:56].
  • Autenticação: Simular um fluxo de login/logout com estado global [01:04:52].

Pré-requisitos

  • Conhecimento de HTML, CSS e JavaScript.
  • Node.js e NPM instalados [00:03:40].

Para quem é este curso

Desenvolvedores que desejam aprender os fundamentos do Vue.js 3, incluindo suas ferramentas de ecossistema mais populares (Pinia e Vue Router), de forma prática e direta.