Olá! 🐢

Muito prazer! Me chamo Luiz Henrique e sou um desenvolvedor web, trabalhando com Vue.js no front-end. Venho hoje, neste breve artigo, apresentar o básico de Vue e responder: por que utilizá-lo?

Imagem com o logo do Vue e a frase "Por que Vue.js?"

The Progressive JavaScript Framework

O Vue.js é um framework JavaScript moderno e open source. Foi criado por Evan You, na época desenvolvedor de ferramentas para projetos internos da Google. Ele buscava unir o melhor de AngularJS e React, iniciando, assim, a desenvolver o Vue como projeto pessoal, em 2013. Seu nome é inspirado na palavra francesa "vue", que pode ser traduzida para o inglês como "view". Paralelamente, a pronúncia das duas palavras também é semelhante.
O Vue.js foi oficialmente lançado em 2014 e, desde então, vem sendo adotado pela comunidade e aprimorado, competindo hoje com grandes frameworks como React e Angular.

O básico

Para iniciar um projeto Vue localmente, basta rodar:

npm init vue@latest

Esse comando vai instalar e rodar create-vue, a ferramenta oficial de criação de projetos Vue, que roda em cima do Vite (também criado pelo Evan You!). Inclusive, o Vite em si também pode ser usado para a criação do projeto:

# npm 7+
npm create vite@latest my-vue-app -- --template vue

# npm 6.x
npm create vite@latest my-vue-app --template vue

Para maior aprofundamento, confira a documentação do Vite.

No caso do primeiro comando (npm init vue@latest), diversas perguntas serão feitas, como nome do projeto, e confirmação para ferramentas adicionais como suporte a TypeScript, testes, ESLint, etc. Agora, basta rodar:

cd <nome-do-projeto>
npm install

E o projeto será todo seu!

A pasta virá com vários componentes e códigos prontos, que criam uma tela bonitinha de introdução. Porém, o arquivo que nos interessa é o App.vue. Adicionando a ele o seguinte código:

<template>
  <button @click="count++">Count: {{ count }}</button>
</template>

<script setup>
import { ref } from "vue";
const count = ref(0);
</script>

<style scoped>
button {
  background-color: #42b983;
  border: none;
  border-radius: 6px;
  color: #000;
  font-size: 20px;
  padding: 8px 16px;
}
</style>

Rodando npm run dev e acessando o localhost na porta definida, você terá um botão que, ao ser clicado, aumentará a contagem de 1 em 1. Temos nosso primeiro código Vue!

Explicando algumas partes e nomenclaturas desse código:

SFC (Single File Component): é a "sintaxe" desse arquivo, que junta HTML, CSS e JS no mesmo arquivo para a criação de um componente, mas deixando-os devidamente separados.
<template>: é a "tag do Vue" que define onde vai o HTML de um SFC.
<script>: é a mesma tag do HTML onde se coloca JavaScript. Nesse caso, o setup é um atributo que age definindo esse arquivo como componente e o exportando. Há também o atributo lang que, ao receber o valor "ts", permite a utilização de TypeScript nessa tag (quando devidamente instalado).
<style>: também é a mesma tag do HTML onde se coloca CSS. O atributo scoped define que esses estilos serão únicos desse componente. Ela também possui o atributo lang, que define o pré-processador a ser utilizado, podendo receber "scss", "postcss", etc.
{{ count }}: é o template string do Vue, ou seja, entre essas chaves duplas, pode se inserir variáveis e propriedades.
directive: são instruções especiais colocadas em tags HTML como atributos, que permitem controlar o DOM e fornecer funcionalidades específicas. Alguns exemplos são v-if, v-else, v-on, v-for, entre outras.
@click: é uma forma abreviada da directive v-on, responsável por escutar eventos. Nesse caso, seria como o onclick no HTML.
ref: se assemelha ao useState do React, mas possui sintaxe mais concisa e utilização mais simples. Nesse caso, usamos count++, mas também poderia ser feita uma função que executaria count.value += 1, tendo o mesmo efeito prático.

Ecossistema

O Vue.js, com uma comunidade ativa e dedicada, construiu um ecossistema rico de bibliotecas e recursos ao longo dos anos. Alguns exemplos chave são:

Vue Router: biblioteca de roteamento com recursos para criação de SPAs (Single Page Applications).
Vuex / Pinia: gerenciadores de estado para aplicações mais complexas em relação a dados. Vuex é o "pioneiro", mas foi substituído pelo Pinia, com recursos melhores e API mais simples.
Vuetify: biblioteca de componentes UI, feita sobre o Material Design, da Google.

Além disso, há vários outros que podem ser explorados no site Awesome Vue.js!

Vantagens e Desvantagens

Como toda ferramenta, o Vue possui seus lados fortes e fracos. Vamos a eles:

Vantagens

Fácil aprendizado: o Vue possui uma sintaxe intuitiva e fácil de aprender.
Flexibilidade: permite usar componentes individuais ou construir SPAs.
Reatividade: as alterações nos dados são automaticamente refletidas na interface.
Ecossistema robusto: possui uma ampla gama de bibliotecas e ferramentas.
Performance: oferece um desempenho rápido e eficiente, mesmo quando a aplicação escala e se torna complexa.

Desvantagens

Ecossistema em expansão: apesar do ecossistema rico, algumas bibliotecas podem não estar tão maduras.
Menor comunidade: a comunidade Vue.js, apesar de ativa, é menor em comparação com Angular e React.
Falta de suporte corporativo: Algumas organizações podem preferir frameworks mais estabelecidos, como o Angular e React, que possuem big techs por trás deles (Google e Meta, respectivamente).

Por que Vue.js?

Finalmente respondendo ao título do post:
Como vimos, o Vue é uma ótima escolha de framework, possuindo uma curva de aprendizado leve, sintaxe simples e declarativa, flexibilidade, reatividade, ecossistema robusto, escalabilidade e bom desempenho. Sua comunidade, apesar de menor, é ativa e vem crescendo cada vez mais. É um framework simples e divertido de se utilizar, integrando facilmente com outras ferramentas quando necessário, e entregando desde aplicações simples a sistemas complexos.

Se possuir oportunidade de aprendê-lo, não perca tempo e venha para o lado Vue da força.
~~dizer "lado verde da força" seria meio sugestivo~~

Finalização

Obrigado por ler até aqui! Espero que tenha gostado e sinta vontade de estudar esse ótimo framework que, apesar de ofuscado por outros, tem muito a entregar. Caso deseje maior aprofundamento nos temas tratados ou explicações mais intuitivas, confira a documentação oficial do Vue.js. Caso possua algum feedback ou crítica, sinta-se livre para expressar nos comentários.
Obrigado mais uma vez e até o próximo post! 🐢

🟢 Por que Vue.js?