Vue JS - Guia Completo (Vue CLI, Vue Router, Vuex e GraphQL)

• Introdução ao curso

• Criando primeira aplicação VueJS

• Evoluindo a aplicação

• Setup local

• Fique por dentro das novidades

• Codigo fonte da seção

• Sobre a seção

• O que é o VueJS?

• Entendendo os templates do Vue

• Como a instância Vue se conecta ao template

• Acessando dados da instância Vue internamente

• Data Binding em atributos

• Usando diretivas

• Desabilitando novas renderizações com v-once

• Exibindo HTML puro

• Manipulando eventos

• Entendendo o objeto Event

• Passando seus próprios argumentos junto com o evento

• Usando modificadores de eventos

• Trabalhando com eventos do teclado e modificadores de tecla

• Modificando eventos do mouse

• Atalhos para property e event binding

• Trabalhando com Computed Properties

• Computed Properties vs Methods

• Computed Properties vs Watchers

• Quando usar Watchers

• Computed Properties: getter e setter

• Two-way data binding com v-model

• Estilização dinâmica com CSS

• Estilização dinâmica com classes CSS usando nomes

• Estilização dinâmica com classes CSS usando objetos

• Estilização dinâmica com classes CSS usando arrays

• Estilizando propriedades CSS dinamicamente com style

• Código fonte da seção

• Conclusão da seção

• Sobre a seção

• Renderização condicional com v-if e v-else

• Trabalhando com v-else-if

• Renderizando grupos de elementos condicionalmente

• Controlando reutilização de elementos com key

• Ocultando elementos com v-show

• Diferenças entre v-if e v-show

• Renderizando listas com v-for

• Acessando o índice do item iterado no v-for

• Iterando objetos com v-for

• Iterando intervalos numéricos

• Rastreando identidade dos elementos no v-for com key

• Agrupando elementos com template

• v-for junto com v-if e filtragem de arrays

• Detectando mudanças em arrays

• Detectando mudanças em objetos

• Código fonte da seção

• Conclusão da seção

• Sobre a seção

• Conceitos básicos sobre a instância Vue

• Trabalhando com múltiplas instâncias

• Acessando propriedades de outras instâncias

• Como o Vue gerencia os dados e métodos

• Vue é simplesmente JavaScript

• Usando $refs

• Montando templates

• Usando components

• Limitações em templates

• VueJS e Virtual DOM

• Lifecycle Hooks: Ciclo de Vida de uma Instância Vue

• Lifecycle Hooks na prática

• Código fonte da seção

• Conclusão da seção

• Sobre a seção

• Ferramentas necessárias

• Instalando Vue CLI com NPM

• Criando novo projeto com "vue create"

• Entendendo a estrutura do projeto

• Entendendo os Single File Components

• Usando plugins

• Trabalhando com pré-processadores CSS

• Variáveis de ambiente e modos

• Como gerar um build de producao

• Usando o linter para correções no código

• Prototipagem Instantânea (Instant Prototyping)

• Customizando o Webpack

• Build targets

• Interface Gráfica do Vue CLI

• Vue Devtools

• Como usar o comando "vue init" do Vue CLI 2

• Código fonte da seção

• Conclusão da seção

• Sobre a seção

• Criando novo projeto com Vue CLI

• Introdução aos Components no Vue

• Use a propriedade "data" como uma função

• Registrando components globalmente e localmente

• Criando novos components

• Boas práticas para nomes de components

• Estrutura de diretórios para components

• Contendo estilos CSS do Component com "scoped" e "module"

• Código fonte da seção

• Conclusão da seção

• Sobre a seção

• Criando novo projeto com Vue CLI

• Criando components necessários

• Como tornar os components reutilizáveis

• Props: passando dados do component pai para o filho

• Passando dados para "props" dinamicamente

• Usando "props" dentro da instância do Component

• Nome das "props" e case insensitive do DOM

• Removendo código desnecessário

• Tipagem em props

• Validando props

• Atalho para passar objeto inteiro como "props"

• Atributos Non-prop

• Solução melhor ao trabalhar com objetos

• Custom Events: passando dados do component filho para o pai

• Bônus: ativando item ao ser selecionado

• Como funciona o Fluxo de Dados Unidirecional

• Comunicação entre components irmãos

• Centralizando comunicação com Event Bus

• Reaproveitando código e dados com Event Bus

• Bônus: enviando item para edição

• Bônus: reativando item selecionado

• Bônus: evite causar mutações em "props"

• Truque: atualizando "props" sem causar mutações

• Bônus: atualizando item usando Event Bus

• Bônus: detalhes finais

• Melhor forma de reagir a alterações em props

• Comunicando via $parent e $root

• Codigo fonte da seção

• Conclusão da seção

• Sobre a seção

• Criando novo projeto com Vue CLI

• Criando Post Component

• Passando dados para o component

• Customizando o template com slots

• Trabalhando com multiplos slots (nomeados)

• Slots default e conteúdo default em slots

• Escopo de estilização e compilação dos slots

• Usando slots com escopo

• Atribuição via desestruturação no slot-scope

• Update: Unificação de slots com "v-slot"

• Alternando vários Components com Components Dinâmicos

• Usando "props" em Components Dinâmicos

• Entendendo como funcionam os Components Dinâmicos

• Mantendo mesma instância com keep-alive

• Ciclo de vida de Components Dinâmicos

• Customizando keep-alive com include, exclude e max

• Otimizando o start da aplicação com Components Assíncronos

• Manipulando estado de carregamento de Components Assíncronos

• Bônus: propriedade "name" nos Components

• Conclusão da seção

• Sobre a seção

• Criando novo projeto com Vue CLI

• Usando v-model para ligação de dados em inputs

• Agrupando dados e setando valor inicial nos inputs

• Modificando entrada de dados com modificadores

• Manipulando textarea

• Manipulando radio buttons

• Manipulando inputs do tipo checkbox

• Usando checkbox com valores para true ou false

• Armazenando valores de checkboxes em arrays

• Trabalhando com "select" e "option"

• Submetendo formulário

• Resetando formulário

• Como a diretiva v-model trabalha

• Criando nosso próprio campo de formulário

• Bônus: customizando v-model em Components

• Código fonte da seção

• Bônus: Resetando Range Component

• Conclusão da seção

• Sobre a seção

• Entendendo transições no Vue

• Criando novo projeto

• Usando v-if ou v-show para mostrar/ocultar elementos

• Preparando código para usar <transition>

• Animando um único elemento com <transition>

• Nomeando animações

• Abreviando uso das classes

• Criando animação de "zoom" com CSS Transitions

• Criando animação de "slide" com CSS Animations

• Mesclando "transition" e "animation" CSS

• Indicando "tipo" de regra principal

• Configurando tempo de duração das transições manualmente

• Bônus: alterando curva de animação com "timing functions"

• Usando classes CSS personalizadas

• Ouvindo eventos de transição com Gatilhos JavaScript (JavaScript Hooks)

• Gatilhos JavaScript na prática

• Desativando CSS das animações

• Usando JavaScript para criar animações

• Animando na renderização inicial

• Usando classes CSS personalizadas na renderização inicial

• Gatilhos JavaScript na renderização inicial

• Atributos e transições dinâmicas

• Transitando entre múltiplos elementos

• Ajustando animações com modos de transição

• Usando atributo key para alternar múltiplos elementos

• Transitando Components Dinâmicos

• Como animar múltiplos itens com <transition-group>

• Estrutura inicial para usar <transition-group>

• Usando <transition-group> para animar uma lista de itens

• Animando reposicionamento na adição/entrada de novos itens

• Animando reposicionamento na remoção/saída de itens existentes

• Bônus: embaralhando itens da lista

• Dica: animações reutilizáveis

• Introdução a animação de estados

• Preparando código para animar números

• Animando troca de valores em números com Green Sock

• Mais sobre animações de estado

• Código fonte da seção

• Conclusão da seção

• Sobre a seção

• Criando novo projeto com Vue CLI

• Adicionando e configurando Vue Router

• Criando primeiras rotas e usando <router-view>

• Habilitando History Mode

• Navegando via <router-link>

• Movendo configurações para arquivo separado

• Aplicando classe CSS no <router-link> ativo

• Navegando de forma programática

• Preparando código para usar parâmetros de rota

• Configurando e usando parâmetros em rotas

• Capturando parâmetros das rotas

• Reagindo a alterações nos parâmetros das rotas com watchers

• Reagindo a alterações nos parâmetros das rotas com beforeRouteUpdate

• Trabalhando com rotas aninhadas

• Component padrão em rotas aninhadas

• Criando rotas nomeadas

• Detalhando navegação programática

• Usando múltiplos Router Views (nomeados)

• Como funciona a correspondência de rotas

• Configurando redirecionamentos de rotas

• Configurando alias de rotas

• Configurando rota curinga para 404 Not found

• Usando Query Params

• Bônus: inspecionando com Vue Devtools

• Parâmetros de rota como Props: Boolean mode

• Parâmetros de rota como Props: Object mode

• Parâmetros de rota como Props: Function mode

• Parâmetros de rota como Props: Casting e Validação

• Bônus: Padrões avançados para correspondência de rotas

• Introdução as Guardas de Rotas

• Usando Guardas de Rota "beforeEach" e "afterEach" (Global)

• Usando Guarda de Rota "beforeEnter" (Na Rota)

• Usando Guarda de Rota "beforeRouteEnter" (No Component)

• Usando Guarda de Rota "beforeRouteUpdate" (No Component)

• Usando Guarda de Rota "beforeRouteLeave" (No Component)

• Usando Guarda de Rota "beforeResolve" (Global)

• Detalhando uso da função "next" em Guardas de Rota

• Conhecendo os "meta fields"

• Caso de uso para os "meta fields"

• Animando navegação com <transition>

• Usando Hash

• Controlando o comportamento de Scroll

• Carregamento sob demanda com Lazy Loading

• Dica: formas de buscar dados ao ativar determinada rota

• Bônus: Centralizando dados e métodos no EventBus

• Bônus: Exibindo mais detalhes dos contatos

• Bônus: Editando contatos

• Código fonte da seção

• Conclusão da seção

• Sobre a seção

• Notas sobre mudanças no ambiente

• Axios vs Vue Resources

• Novo projeto com VueCLI: Task Manager

• Preparando Components necessários

• Preparando nossa API REST

• Instalando o axios via npm

• Requisição GET para buscar lista de Tarefas

• Requisição POST para criar novas Tarefas

• Selecionando Tarefa da lista para edição

• Requisição PUT para editar Tarefas existentes

• Requisição DELETE para excluir Tarefas existentes

• Requisição PUT para concluir Tarefas

• Bônus: ordenando por tarefas não concluídas

• Fix: Melhorando Computed Property tarefasOrdenadas

• Montando requisições com axios

• Inspecionando respostas do servidor

• Capturando e manipulando erros

• Configurações globais no axios

• Criando instância do axios com valores padrões

• Interceptando requisições

• Enviando cabeçalhos na requisição

• Interceptando respostas

• Trabalhando com requisições simultâneas

• Usando async/await do ES8

• Bônus: acompanhando progresso de Download

• Código fonte da seção

• Conclusão da seção

• Sobre a seção

• Introdução ao Vuex e Gerenciamento de Estado Centralizado

• Criando novo projeto com Vue CLI

• Gerenciando estado sem o Vuex

• Instalando e configurando o Vuex

• Gerenciando estado com o Vuex

• Acessando o State via Computed Properties

• Mapeando o State via "mapState"

• Spread Operator: mesclando Computed Properties

• Preparando Gerenciador de Tarefas

• Movendo estado local do Component para Store do Vuex

• Entendendo e implementando Getters

• Usando Getters nos Components: Property-Style

• Usando Getters nos Components: Method-Style

• Mapeando os Getters via "mapGetters"

• Alterando o estado com Mutations

• Commit de Mutations com Payload

• Commit de Mutations com Payload: Object Style

• Mapeando as Mutations via "mapMutations"

• Mutations devem ser síncronas

• Bônus: Mutations seguem as regras de reatividade do Vue

• Entendendo e implementando Actions

• Usando Actions para executar código assíncrono

• Bônus: compondo Actions

• Mapeando as Actions via "mapActions"

• Bônus: usando ES8 async/await

• Usando Modules para organizar a Store do Vuex

• Acessando State de Módulos em Components

• State Local e Root dentro dos Módulos

• Usando Namespaces para deixar Módulos auto-contidos

• Acessando recursos de Módulos Namespaced

• Melhorando o acesso aos Módulos Namespaced

• Acessando State e Getters globais em Módulos com Namespace

• Executando Actions e Mutations globais em Módulos com Namespace

• Bônus: registrando Actions globais de dentro de um Módulo namespaced

• Estrutura de arquivos e diretórios recomendada

• Bônus: Estruturando Aplicações de Grande Porte

• Bônus: Registrando módulos dinamicamente

• Habilitando Strict Mode

• Dica: usando Constants para nome das Mutations

• Bônus: implementando Mutations do Módulo Tarefas

• Bônus: criando API REST e instalando o axios

• Bônus: implementando TarefasService com o axios

• Bônus: implementando Actions do Módulo Tarefas

• Bônus: listando e concluindo tarefas

• Bônus: deletando tarefas existentes

• Bônus: selecionando tarefa para edição

• Two-way data binding (v-model) e Vuex: criando e editando tarefas

• Manipulando erros com o Vuex

• Visualizando Fluxo do Vuex na Vue Devtools

• Bônus: reutilizando Módulos

• Código fonte da seção

• Conclusão da seção

• Sobre a seção

• Repositórios dos projetos no github

• Introdução ao Projeto

• Instalando Docker e Docker Compose

• Criando Prisma Server e criando Banco de Dados PostgreSQL

• Prisma CLI: Novo serviço para se conectar ao Prisma Server

• Configurando VSCode

• Introdução ao GraphQL

• Apresentando modelagem de dados

• Modelando dados com o Datamodel do Prisma

• Gerando CRUD e Realtime Operations com novo Deploy

• Gerando Prisma Client

• Manipulando dados no PostgreSQL com Prisma Client

• GraphQL Yoga: camada para lógica de negócio

• GraphQL Yoga: implementando o servidor e primeira Query

• Bônus: trivial resolvers

• Organizando arquivos e diretórios

• Rodando API dentro de um Docker Container

• Nodemon e Docker: restart automático do Servidor

• Delegação de Schemas com Prisma Binding

• Dica: executando prisma generate automaticamente

• Modularizando o código e setando objeto context

• Autenticação JWT na API GraphQL

• Extendendo GraphQL Schema com Mutations para login e signup

• Instalando jsonwebtoken e bcryptjs

• Implementando resolver de autenticação para a Mutation de signup

• Implementando resolver de autenticação para a Mutation de login

• Bloqueando Queries e Mutations não autenticadas

• Mutation para criar novas Contas

• Query para buscar lista de Contas

• Mutation para criar novas Categorias

• Query para buscar lista de Categorias

• Mutation para criar novos Lançamentos

• Bônus: validando data com Moment JS

• Apresentando Query para buscar Lançamentos do usuário

• Implementando Query para buscar lista de Lançamentos

• Buscando Lançamentos em um intervalo de datas

• Instalando PG Admin 4

• Acessando PostgreSQL no Docker com PGAdmin

• Prisma: Nomeando Serviço e usando Stages

• Montando Query SQL no PostgreSQL

• Habilitando acesso direto ao banco com rawAccess

• Ajustando Prisma Endpoint no Docker Compose

• Query para somar Saldo do usuário até a data atual

• Conclusão da API GraphQL

• Criando novo projeto com Vue CLI

• Atualizando pacotes NPM

• Adicionando o Vue Router com o Vue CLI 3

• Adicionando o Vuex com o Vue CLI 3

• Adicionando o Vuetify ao projeto

• Atualizando pacotes do Vuetify

• Criando módulo Auth e rota de login

• Conhecendo o Layout e Grid System do Vuetify

• Login Component: Interface com Vuetify, Layout e Grid

• Login Component: dimensão e posição com o Grid System

• Ativando tema dark e customizando cores

• Instalando e configurando Vuelidate

• Validando formulário de login com Vuelidate

• Mensagens de erro de validação com Vuetify e Vuelidate

• Preparando formulário para Signup

• Instalando e configurando o Apollo Client

• Usando arquivos GraphQL no Vue

• Criando AuthService e Mutation GraphQL para login

• Salvando token JWT no Local Storage

• Login na API GraphQL com AuthService

• Criando Mutation GraphQL e método para Signup

• Login component: Permitindo signIn e signUp

• Exibindo Loading ao submeter formulário do Login Component

• Exibindo mensagens de erro com Snackbar

• Melhorando tratamento de erros na API e no Client

• Criando módulo Dashboard e rota inicial

• Redirecionando usuario após login/signup bem sucedido

• AuthService: buscando dados do usuario logado

• Vue Router: Protegendo rotas que necessitam de autenticação

• Apollo Link: interceptando requests e adicionando headers

• Apollo Devtools: visualizando cache do Apollo

• Capturando erros globais no Vue

• Component AppLayout para estruturar o Dashboard

• Component para Toolbar do Dashboard com Vuetify

• Menu para o Dashboard com Vuetify NavigationDrawer

• Adicionando conteúdo ao Menu da aplicação

• Exibindo nome do usuário logado no Menu

• Criando Finances Module e rota inicial

• Slot default no AppLayout para exibir Components das rotas filhas

• RecordsQuery para buscar Lançamentos do usuário

• RecordsService: lista de Lançamentos com Query na API GraphQL

• RecordsListItem para exibir Lançamento

• RecordsList: listando lançamentos do usuário

• Formatando moedas com a Intl JavaScript API e Vue Mixins

• Função para agrupar registros com reduce

• Instalando MomentJS

• Agrupando lista de Lançamentos por data

• Calculando e exibindo saldo do mês

• ToolbarByMonth: Component para alternar visualização por mês

• ToolbarByMonth: alternando meses e notificando via evento

• Listando Lançamentos de acordo com o mês selecionado

• Exibindo mensagem para mês sem Lançamentos

• Configurando locale do Moment JS

• Colorindo ToolbarByMonth de acordo com o saldo do mês

• Mantendo mês selecionado mesmo após refresh da página

• Query totalBalance para exibir saldo total atual

• TotalBalance Component: exibindo saldo total atual do usuário

• RecordsAdd e nova rota para cadastrar Lancamentos

• AppMenu: adicionando router-links para a nova rota

• Floating Action Button: navegação adicional

• Vuex: State, Action e Mutation para titulo das páginas

• RecordsAdd: estrutura inicial com Grid System

• RecordsAdd: Record model e validações com Vuelidate

• Adicionando campos iniciais do formulário

• AccountsService e Query para buscar lista de Contas

• CategoriesService e Query para buscar lista de Categorias

• Populando v-selects com as listas de Contas e Categorias

• Ligações com v-model, botão de submit e cor baseada na operação

• Ocultando campos tags e note e usando Tooltips

• Usando modificador trim no v-model

• Campo de data do Lançamento com DatePicker e Dialog

• Component NumericDisplay para exibir teclado numérico e valor monetário

• NumericDisplay: exibindo teclado numérico

• NumericDisplay: exibindo valor monetário

• NumericDisplay: lógica para incrementar e decrementar valor

• Desabilitando botão de submit e resetando categoria

• API GraphQL: garantindo valor com sinal correto nos Lancamentos

• Mutation e método para cadastrar novos Lancamentos

• RecordsAdd: cadastrando novos Lancamentos na API GraphQL

• Acesso ao Cache do Apollo e Optimistic UI: Introdução

• Instalando RxJS

• Apollo watchQuery: monitorando records Query

• Acesso direto ao Cache do Apollo: reescrevendo Query records

• Ajustando exibição da data dos Lancamentos com moment

• Ajustando criação de instâncias do Moment

• Apollo Cache: recalculando Query totalBalance

• RecordsAdd: botão nos selects para criar novas Contas e Categorias

• RecordsAdd: exibindo Dialog para novas Contas e Categorias

• AccountCategoryAdd Component: estrutura inicial

• AccountCategoryAdd: validando formulario com Vuelidate

• AccountsService: Mutation para criar novas Contas e reescrita do Cache

• CategoriesService: Mutation para criar novas Categorias e reescrita do Cache

• Monitorando Queries accounts e categories

• Dica: valor inicial para Operation de novas Categorias

• Cadastrando novas Contas e Categorias na API GraphQL

• RxJS: tratando unsubscribes

• Cacheando e Otimizando Query Records com watchQuery

• GraphQL Fragments para reutilização na subseleção de campos

• RecordsFilter: Component para filtrar lista de Lancamentos

• RecordsFilter: botoes de ação

• RecordsFilter: implementando e populando selects

• RecordsFilter: model filters e binding no evento change

• Função genérica para registrar módulos do Vuex

• Vuex store, state, actions e mutations para os filtros

• RecordsFilter: enviando dados para state do Vuex e filtrando Lancamentos

• ReportsHome: iniciando a construção dos relatórios com Gráficos

• ReportsHome: exibindo ToolbarByMonth

• Mantendo estado do mês entre os Components com Vuex e Vue Router

• ReportsHome: buscando Lançamentos do mês selecionado

• ReportsHome: preparando layout para os Gráficos

• Conhecendo e instalando o ChartJS

• Criando primeiro gráfico com ChartJS

• Função idx para acessar propriedades em objetos aninhados

• Função para gerar configurações dos Gráficos do ChartJS

• Função para gerar dados dos Gráficos

• Função para gerar objeto de opções dos Gráficos

• Renderizando Gráfico de Receitas e Despesas com ChartJS

• Gerando configurações adicionais para Gráficos de Barra

• Gerando dados para Gráficos de Rosca

• Renderizando Gráfico de Despesas por Categoria com ChartJS

• Gerando configurações adicionais para Gráficos de Rosca

• Melhorando métodos createChart e setCharts do RecordsHome

• Gerando cores dinamicamente usando as paletas do Vuetify

• Colorindo ToolbarByMonth baseado no saldo do mês

• Implementando Logout e resetando Cache do Apollo

• Conclusão da seção

• Sobre a seção

• Explicando o plano de ação

• Protegendo Prisma Server e Prisma Service

• Configurando CORS e desabilitando playground em produção

• Script para executar PM2 dentro de containers Docker

• Dockerizando a aplicação Vue

• API URL como variável de ambiente no Vue

• Repositório git para a aplicação Vue

• Repositório git para a API GraphQL

• npm audit: corrigindo vulnerabilidades de segurança das dependências

• Repositório git para monorepo

• Trabalhando com subrepositórios no git

• Adicionando Traefik como Reverse Proxy

• Splitando configurações do Docker e usando labels no traefik

• Configurando PostgreSQL e Prisma

• Configurando API GraphQL

• Enviando deploy do Prisma Service localmente

• Configurando API URL, Porta e hostCheck na aplicação Vue

• Configurando container da aplicação Vue

• Build de produção no Vue e multi-stage build no Docker

• Criando Docker-Compose.prod.yml

• Protegendo Dashboard do Traefik

• Adquirindo um domínio para o projeto

• Instalando Docker Machine

• Docker Machine e Digital Ocean: criando droplet

• Configurando domínio na Digital Ocean

• Configurando Traefik para ambiente de produção

• Variáveis de ambiente em produção e Shell Script para automação

• Arquivo .env.production para aplicação Vue

• Deploy com docker-machine e docker-compose

• Deploy do Prisma Service

• Ajustando Relatórios e Filtro dos registros

• Docker tags e enviando novo deploy

• Aula extra: Dicas adicionais

• Conclusão da seção

• Conclusão do curso

• Aula bônus