Vue3: avançando no framework

Bem começado, metade feito - Apresentação

Olá, meu nome é Vinícius Neves e eu estou mega feliz de ter você aqui comigo para estudarmos juntos esse framework incrível que é o Vue, agora na versão 3. Nós vamos trabalhar em cima de um projeto que já existe, trazendo um paralelo para o mundo real, para o mercado de trabalho, onde é muito comum trabalharmos em softwares que já estão rodando.

Então nós vamos adicionar e refatorar alguma coisa de algo que já existe. É totalmente diferente de quando estamos criando algo novo, algo do zero. O que vamos ver aqui? Vamos dar uma olhada no Tracker e olha o que ele está fazendo agora.

Nós vamos adicionar todo esse conceito de projetos. Por exemplo, aqui eu tenho cadastrado dois projetos pessoais, eu tenho o meu plano de estudos e eu tenho um específico para estudar Vuex na versão 4.

Agora, quando eu vou na minha lista de tarefas, eu posso dizer que eu estou, por exemplo, estudando mutations, que é um dos temas que vamos estudar neste curso. Vou dizer aqui que ele faz parte do projeto de Vuex. Vou dar o "Play", ele vai começar a contar o tempo, quando eu finalizo, ele desce aqui e já exibe a tarefa para mim. Ele vai vincular ao projeto, vai dizer quanto tempo eu gastei. Ele vai fazer o tracking.

Ele vai controlar quanto tempo eu estou gastando em cada tarefa no meu dia. É isso o que vamos ver juntos. Vamos para um pouco de spoiler aqui, vamos dar uma olhada no que vamos desenvolver. Logo de cara, que eu deixei aqui para te dar um pouco de spoiler. Vamos ver algumas vantagens de se trabalhar com typescript.

Vamos ver alguns operadores bem bacanas, que podemos utilizar. Também vamos aprender a reaproveitar código, utilizando o mixin.

Ao invés de ficarmos fazendo aquele copy e paste, "Ctrl + C" e "Ctrl + V", de um método, de um componente para o outro, vamos ver uma boa forma de reaproveitar. Além de reaproveitarmos código com o mixin, vamos aprender a criar hooks customizados.

Vamos ver quais são as vantagens e as desvantagens, e onde eu posso usar o mixin e onde eu vou usar o hook. Uma outra coisa bem bacana, que vamos ver durante o curso inteiro, é a parte do Vuex.

É controlar o estado da aplicação. Teremos que compartilhar com a nossa lista de tarefas, fazer com que isso fique persistido, não podemos perder a lista de projetos conforme vamos e voltamos de uma rota para a outra. Então tem muita coisa bacana para aprendermos, eu estou doido para começar. Te espero no próximo vídeo, vem comigo, vamos evoluir esse Alura Tracker juntos. Te vejo lá.

Bem começado, metade feito - Vue-router e a primeira rota

Olá. Que incrível ter você comigo aqui neste curso de Vue.js. Se você me acompanhou no curso anterior, você já tem esse Alura Tracker rodando e você já conhece ele. Se você não conhece, fique tranquilo, vamos dar uma olhada nele agora, e você poderá baixar o repositório e colocar ele para funcionar, exatamente como você está vendo aqui, para começarmos a adicionar coisas novas a ele.

Então o que é o Aluta Tracker? Ele é uma aplicação responsável por controlar o tempo gasto em cada tarefa. Por exemplo, podemos vir no Alura Tracker e colocar "Estudar Vue 3". Dou o "Play", o cronômetro vai começar a contar quanto tempo eu estou levando para executar essa tarefa.

Quando eu finalizo a tarefa, ele limpa o formulário, zera o cronômetro e adiciona a tarefa executada aqui na lista.

Então se eu vir aqui, por exemplo, e "Estudar Typescript", eu dou o "Play" aqui, cronômetro mais uma vez começa a correr. Quando eu finalizo, limpa o cronômetro, limpa o input e adiciona a tarefa executada aqui.

Isso foi o que desenvolvemos no curso anterior. Se você ainda não tem aí, fique tranquilo, você pode baixar e colocar para rodar. Mas o que acontece? As aplicações são vivas, elas recebem funcionalidades o tempo todo, ou algumas funcionalidades são alteradas, outras são removidas.

É isso que vamos simular aqui, é isso o que vamos fazer com o Tracker, vamos adicionar funcionalidades em uma aplicação já existente. O que temos que fazer antes de começar a preparar essa aplicação para receber essas funcionalidades? E como podemos fazer - temos várias formas que podemos fazer isso, mas como podemos fazer isso com o Vue3 e como faremos no Alura Tracker?

Vamos pensar na seguinte abordagem: se eu estou na raiz da minha ligação - repare, aqui eu estou no meu localhost, mas esse endereço pode mudar. Por exemplo, você pode publicar no Vercel, ou publicar no seu domínio particular. Estamos aqui na raiz. Quando estivermos na raiz do projeto, nós queremos exibir aqui a funcionalidade principal do Tracker, que é essa lista de tarefas.

Mas eu quero, por exemplo, adicionar uma nova funcionalidade aqui, alguma coisa do tipo "localhost:8080/#/nova-funcionalidade". Eu quero alguma coisa mais ou menos assim, dada a nossa URL, eu vou renderizar uma visualização diferente e eu vou trocar toda a interface que eu estou exibindo para o usuário. Nós queremos fazer funcionalidades baseadas em URLs.

E o Vue, que é esse framework progressivo, que já conhecemos, ele já tem uma forma bem bacana de fazermos isso, que é o Vue Router. Então vamos para a nossa aplicação, vamos instalar esse Vue Router. Vou abrir o meu VS Code.

Repare que eu já estou com o meu Tracker já baixado, rodando. Mandei aqui um npm run server, e ele está rodando a aplicação para mim. Eu vou agora adicionar um novo console e o que eu quero fazer é pedir para o npm instalar para mim, npm install - se você gosta de digitar um pouco menos, igual eu, pode fazer só um npm i, que é a mesma coisa.

Eu quero instalar o npm i vue-router. Porém, preste atenção, estamos utilizando a versão 3 do Vue, e a versão do Vue Router que é compatível com a versão 3 é a versão 4, então eu quero instalar o Vue Router na versão 4, npm i vue-router@4. Esse comando vai adicionar essa dependência no pacote, vai baixar ela para nós, e depois que ela estiver baixada, vamos começar a configurar o nosso roteador.

Então esse processo pode demorar um pouco. Não tem problema, fique tranquilo, quando ele terminar ele estará disponível para começarmos a configurar. Terminou de instalar aqui para mim, ele vai dar aqui algumas mensagens, não tem problema, vou deixar essas mensagens de lado.

Mas o que importa para mim é que ele instalou com sucesso o meu Vue Router. Se olharmos no nosso package JSON - deixa eu fechar esse terminal aqui. Teremos aqui, repare aqui comigo, o Vue Router na versão 4.

O que queremos fazer? É configurar a rota inicial da aplicação. Quando o usuário acessar a raiz do nosso projeto, nós queremos exibir a nossa visualização de tarefas. Vamos dar uma olhada nessa estrutura atual aqui. Se abrirmos o "App.vue", do lado esquerdo, veremos que está tudo aqui.

A barra lateral está aqui, repare que eu tenho uma main, que é a div principal da aplicação, ela tem colunas, eu tenho uma coluna com a barra lateral e outra coluna, que é uma coluna maior - repare, essa primeira tem 1/4, essa outra tem 3/4. E esse conteudo, se não me engano, nós adicionamos um badge. Vamos dar uma olhada no final, nós adicionamos um fundo para ele aqui.

Nesse conteúdo temos um fundo e o que queremos agora é pegar e dada a URL - deixa eu dar um "Ctrl + X" nesse código - eu quero renderizar aqui !!! a visualização de acordo com a URL (com a rota).

Então é isso que eu quero mudar. Deixa eu colar de volta, só para eu não perder. Vou voltar aqui, pronto. Então esse miolo aqui é o que queremos alterar segundo a URL.

Então queremos alterar essa visualização, queremos alterar isso de acordo com a URL acessada. Vamos começar a configurar o nosso roteador. Vou clicar em "src", no menu lateral, com o botão direito, novo arquivo, vou criar uma pasta chamada "roteador/". Dentro dessa pasta chamada "roteador/" eu vou criar um arquivo chamado "roteador/index.ts".

Eu estou fazendo isso aqui, que ele vai exportar para mim, por padrão, na hora em que eu fizer o import, se eu fizer um import de roteador, ele já vai ver que tem um index aqui e vai ler esse arquivo para mim. Como vamos configurar? Precisamos de duas coisas. Primeiro precisamos das rotas em si.

Essas rotas, elas serão um array de alguma coisa, const rotas = [] então todo o meu roteamento estará aqui, uma visualização para cada rota. Eu também vou ter um roteador, um const roteador = {}. Esse roteador vai conhecer essas rotas, e poderemos configurar ele para ele funcionar do jeito que nós queremos. E, no final, eu quero fazer o export default roteador;. É isso o que eu quero fazer.

Como eu gero esse roteador? Ele não pode ser um objeto simplesmente utilizando Vue 4 e utilizando o typescript, então eu vou chamar uma função chamada const roteador = createRouter(). Repare, o VS Code já achou aqui para mim, eu vou clicar, ele vai importar, = createRouter(). Esse é o roteador que eu vou criar.

Repare que ele recebe aqui um objeto de opções, para configurar ele. Eu vou criar aqui um objeto de configurações. Eu vou dizer o history mode dele, history:. O que esse history mode quer dizer? Vou voltar na aplicação. Repare que ele adiciona para nós na URL.

Isso quer dizer, para o navegador, se eu estou alterando só depois dessa tralha, ele não vai recarregar a página, ele não vai entender que eu estou trocando uma requisição, ele vê que é uma âncora, mas está mudando, então isso facilita para o navegador entender que isso não é uma nova URL, que ele vai fazer uma nova requisição. É por isso que esse é o modo padrão do nosso roteador.

Existem outras formas, mas esse modo padrão é o que vamos utilizar. Para criarmos esse modo padrão, vamos chamar um método que chama create - repare que ele já me facilitou, history: createWebHashHistory(), ou seja, eu quero aquele hash, aquela hashtag para me ajudar a configurar e controlar as minhas rotas.

Então nós já passamos o history, agora precisamos passar as rotas para a aplicação. Nós temos um objeto aqui, o routes:, que serão as nossas routes: rotas, routes é rotas em inglês. Agora temos que pegar e passar essas rotas adiante. Esse array de const rotas = [], vamos tipar ele aqui, ele será um objeto do tipo const rota: RouterRecordRaw[] = [].

Repare que ele já autocompletou para mim. Ele será um array de RouteRecordRaw, ou seja, esse é o tipo, a interface que representa cada rota da aplicação. Repare que ele já está compilando, agora, para finalizarmos a configuração dele, vamos adicionar a nossa primeira rota.

Para configurarmos esta rota, teremos várias opções que podemos fazer, que podemos utilizar, mas vamos trabalhar inicialmente com três propriedades: o caminho, o path da rota, ou seja, nesse momento eu só quero olhar a rota raiz, quando o usuário entrar na aplicação, path: '/',.

Eu vou dar um nome para essa rota, o nome desta rota será name: 'Tarefas',, e esta rota terá um componente. Que componente é esse? Repare, nós só temos o App.vue aqui, com vários componentes aqui dentro.

Repare que é esse Formulario que queremos trocar dinamicamente. Os novos componentes em si são componentes pequenos, é uma barra lateral, o cronômetro, o formulário. Nesse cenário, o "roteador", queremos um componente maior, queremos uma visualização. Então vamos criar esse "roteador”, inclusive vamos criar ele em um lugar que indique que ele é uma visualização ao invés de ele ser simplesmente um componente comum.

No menu lateral, em "src", vou clicar com o botão direito, em novo arquivo, eu vou criar uma pasta chamada "views", de visualizações. Dentro dessa pasta eu vou criar uma view chamada "Tarefas.vue", que é a minha visualização de tarefas. Pronto, criei o arquivo, olha o que eu vou fazer.

Eu venho no “App.vue”, como aqui ele já tem tudo, todos os imports que eu preciso, eu vou copiar todo o conteúdo dele, vou jogar para a minha visualização de tarefas e vou tirar daqui, limpar o que eu não preciso. Vou tirar essas duas linhas do final, vou tirar essa primeira parte, esse <main> também sai. Vou ajustar essa indentação aqui.

Pronto, já adicionei. Então ele já tem aqui só o que eu preciso, que é o meu Formulario, vou botar ele para dentro, com a minha lista de tarefas. Repare que ele já disse: você está registrando essa barra lateral, mas você não está usando, então posso vir aqui e remover ela dos components.

Esse import ITarefa eu estou importando e não estou usando, a minha lista de tarefas - minto, eu estou usando, mas ele não está encontrando. Temos que voltar uma pasta, import ITarefa from "../interfaces/ITarefa" - repare, estamos em views, "../", "src > interfacve". A mesma coisa para os nossos componentes, então eu vou ajustar todos com ../, pronto.

Agora eu já estou fazendo os imports certos. Só que, por exemplo, esse modoEscuro, ele não tem nada a ver com essa visualização, nem esse alterarModo e nem esse monte de CSS aqui embaixo. Pronto.

Agora sim, ele está pronto para ser utilizado. Vou salvar ele aqui e vou dizer agora, no meu component: que eu quero renderizar tarefas, component: Tarefas,. Deixa eu ver se ele vai achar para mim, ele não achou, então vamos importar ele na mão. import Tarefas from '../views/Tarefas.vue',.

Agora sim, dentro da nossa pasta "views" temos a nossa visualização de tarefas, que será exibida quando o caminho for o caminho raiz, a barra, a raiz da nossa URL. Só que isso aqui não é suficiente, nós precisamos indicar para o view utilizar esse roteador. Vamos no nosso main, que é onde criamos a nossa aplicação. Antes de montar, vamos só indentar aqui, vamos pedir para o view utilizar o nosso roteador, use(roteador).

“Routeador” não, roteador. Deixa eu ver aqui, repare, ele já faz um auto import para mim, vou clicar, ele está fazendo um import do roteador, que é esse index dentro da pasta "roteador", e está utilizando o roteador.

Agora, no meu "App.vue", eu posso vir e tirar esse miolo do Formulario, porque aqui - vou colocar um comentário aqui, <| -- AQUI VAI A VIEW CORRESPONDENTE -->. Pronto.

Vou salvar. Vamos ver o que ele está reclamando. Ele já está me dizendo: “cara, você está importando esses componentes, mas você não está fazendo nada com eles, você está registrando à toa”.

Vou tirar aqui, vou deletar esses componentes, vou deletar também dos imports. Vamos aproveitar e limpar o nosso "App.vue". Eu não tenho mais uma lista de tarefas, nem tenho um método de salvar tarefas, nem tenho esse computed. Agora sim, está bem clean, só teremos os estilos correspondentes.

Ele terá os métodos correspondentes, eu posso até tirar o import ITarefas dessa interface. Ele está bem mais clean, o nosso "App.vue" aqui, agora ele está bem enxuto. Tudo pronto, vamos testar se esse monte de coisa que fizemos aqui está funcionando. Nós criamos o roteador, criamos a visualização e utilizamos o roteador aqui, apontamos para o view, que essa aplicação tem esse roteador.

Vamos voltar na aplicação, vou atualizar aqui, repare, ele traz o app, mas cadê o meu miolo, cadê a minha aplicação? Cadê a minha visualização?

Nós pegamos, configuramos tudo, fizemos tudo, só que precisamos indicar também para o Vue Router onde ele vai colocar a visualização correspondente à rota. Como fazemos isso? Apontando um componente chamado <router-view>, repare que ele até já sugeriu para mim.

Vou abrir ele aqui, vou fechar ele aqui, <router-view></router-view>. Agora sim, estamos indicando para o nosso roteador onde ele vai renderizar a visualização. Vou voltar no navegador, agora sim, está bem bacana, ele já me trouxe a minha visualização de tarefas.

Podemos vir aqui e iniciar uma nova tarefa, "estudar Vue Router", vou botar até entre parênteses aqui, "(na versão 4)". Vou dar um play, ele vai executar, o cronômetro está rolando. Se eu dou um stop aqui, ele já desce a lista.

Então nós refatoramos a aplicação com sucesso, a funcionalidade que existia antes continua existindo. A diferença é que agora existe uma visualização para os tratamentos das tarefas. Agora, a cada nova funcionalidade que tivermos, vamos no nosso array de rotas, vamos criar um novo objeto que terá o caminho, terá o nome e terá o componente relacionado, que ainda não sabemos qual será.

Agora simplifica bastante a nossa vida, para cada funcionalidade uma URL diferente, uma visualização diferente. Então vamos lá, começar a adicionar essas funcionalidades novas. Te vejo no próximo vídeo.

Bem começado, metade feito - Modificando o estado

Trecho de código CSS usado aos 5:31

.panel li {
    margin: 8px 0;
}
.link {
    color: #fff;
}
.link:hover {
    color: #FAF0CA;
}
.link.router-link-active {
    color: #FAF0CA;
}

Tudo pronto para adicionarmos agora a nossa primeira funcionalidade nova, que será o conceito de projetos. Agora o usuário, ele poderá vincular uma tarefa a um projeto, esse projeto pode ser um projeto que ele está trabalhando, um freelancer, um projeto da empresa dele, ou um projeto pessoal, por exemplo, um plano de estudo.

Então o que nós queremos é criar agora essa funcionalidade de "/projeto". Na URL de projetos, ele vai acessar e vamos trazer uma visualização nova, com tudo o que ele pode fazer com os projetos: cadastrar, editar, excluir um projeto.

Vamos agora começar a codar isso. O que nós queremos? Vamos para o nosso "roteador > index", vamos criar uma rota nova. Vamos só organizar a indentação, para ficar bem bacana quando formos criar uma rota nova, fica fácil de ler. Perfeito.

Vamos duplicar esse código, para facilitar. Qual será o caminho? path: '/projetos',. Qual será o nome da rota? name: 'Projetos',. Qual é o componente, qual é a visualização? component: Projetos. Só que ele, quem é o projetos? Nós ainda não temos, vamos criar. Vou pegar esse código, dar um "Ctrl + C". Na pasta "views", novo arquivo, "Projetos.vue". O que nós precisamos aqui?

O nosso <template>, vou colocar só um <h1>Projetos</h1>. Precisamos de um <script>, vou colar aqui. Vou apagar esse miolo, esse eu também não preciso.

Queremos fazer o export default defineComponent. Repare que ele faz um import para nós, do defineComponent, sempre que vamos criar, se olharmos nos nossos outros componentes também. Só que repare que o autocomplete, ele trouxe do runtime core, não precisamos, podemos importar direto do Vue.

Então export default defineComponent({}), ele é uma função, que recebe um objeto de configuração. Pronto. template, <h1>, script, fizemos o import do Vue, estamos fazendo um export default e aqui vamos dar um nome agora para essa visualização, vamos chamar de name: 'Projetos'. Vou salvar, vamos ao navegador para dar uma olhada. Vou atualizar.

Ele ainda não trouxe nada, vamos ver o porquê. Repare aqui, ficou faltando salvar o "index" e importar o nosso projeto. Então vamos começar importando: import Projetos from '../views/Projetos.vue'. Agora sim, salvei, vamos voltar no navegador. Bacana, "/projetos" trouxe já a nossa visualização.

Se eu voltar agora para a raiz do projeto, vou apagar esse "/projetos" da URL, trouxe a minha lista de tarefas.

Eu vim aqui, troquei, "/projetos", ele trouxe projetos. Entrei na raiz, carregou as tarefas. Mas repare que eu tenho que alterar isso manualmente, isso não está legal. O usuário precisa ter um menu, uma navegação inclusa aqui. Vamos fazer esse menu para facilitar a vida do usuário e ele poder selecionar facilmente onde ele está.

Vamos voltar no VS Code, o que queremos fazer agora é mexer na nossa barra lateral, no componente "BarraLateral.vue". Aqui, o que eu quero fazer? Eu quero, logo após o modoEscuro, eu quero adicionar uma barra de navegação. Eu vou adicionar uma <nav>, </nav>.

Estamos usando o Bulma, então temos algumas classes que podemos utilizar. Eu vou adicionar essa classe aqui, ter uma classe chamada nav class = "panel">. Eu quero dar um margin top, = "panel mt-5">, ele vai calcular para mim. Aqui dentro eu terei uma <ul> e terei um item de lista, um <li>, </li>, para cada item que eu for adicionar.

Para eu configurar um link, um link HTML, nós poderíamos pensar em uma tag a, pensar no href qualquer. Só que não é isso o que queremos, estamos trabalhando com o Vue Router, e o Vue Router tem um componente específico para tratar os links, que é o <router-link>. Ele sim, ele é o especialista, é o responsável por trocar e trabalhar com esses links.

A primeira coisa que vamos fazer, para ficar bem bacana, eu vou adicionar um ícone slim, que corresponde ao que o usuário está fazendo. Só vou pegar aqui, da minha cola, eu tenho um item para tarefas, que é essa linha aqui. Vou chamar aqui, tarefas. Aqui embaixo eu vou ter um outro <router-link> para projetos, projetos. Vou consertar o ícone, o ícone de projetos é esse aqui.

Bem bacana, criei uma barra de navegação, mas está faltando eu dizer para onde cada router link vai. O primeiro, ele vai para a raiz e o segundo vai para "/projetos".

Agora sim. Agora, só para botar um estilo bem bacana, eu venho nos dois, vou adicionar uma classe, vou chamar essa classe de class = "link" e vou já trazer um CSS, que está pronto, esse aqui. Vou colar na parte de baixo.

Ele só vai pegar e customizar um pouco esses links para nós. Não é o foco do nosso curso o CSS, por isso eu já trouxe ele pronto. Depois você pode olhar ele com calma e ver o que ele está fazendo. Vou salvar e vou ver se isso tudo funcionou.

Repare que ele já me trouxe tarefas e projetos. Eu posso vir aqui e clicar, ir para projetos, ir para tarefas, ir para projetos e ir para tarefas. Agora sim, a nossa URL já está fazendo, a nossa navegação já ocorre do jeito que precisamos e podemos evoluir os nossos projetos e começar a adicionar as funcionalidades correspondentes. O que queremos, para começar, é criar e adicionar projetos a essa lista. Vamos fazer isso? Te vejo no próximo vídeo.

Sobre o curso Vue3: avançando no framework

O curso Vue3: avançando no framework possui 150 minutos de vídeos, em um total de 48 atividades. Gostou? Conheça nossos outros cursos de VueJS em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Bem começado, metade feito
• Gerenciando o estado
• Evoluindo o Alura Tracker
• Notificando os usuários
• Compilando a aplicação