Vue.js

Vue.js
Desenvolvedor	Evan You
Lançamento inicial	fevereiro de 2014 (2014-02)
Lançamento estável	3.5.40 / 16 julho 2026
Repositório	vuejs/core no GitHub
Escrito em	TypeScript
Plataforma	Web
Tipo	Framework para aplicações web
Licença	MIT
Website	vuejs.org

Vue.js (informalmente chamado de Vue; pronunciado [vjuː]) é um framework JavaScript de código-aberto, focado no desenvolvimento de interfaces de usuário e aplicativos de página única.

Visão geral

O Vue.js conta com uma arquitetura que pode ser adotada de forma incremental, e que foca na renderização declarativa e na composição de componentes. Funcionalidades avançadas necessárias para aplicações complexas (como encaminhamento, gestão de estados e automação de compilação) são oferecidas por meio de bibliotecas e pacotes de suporte mantidos oficialmente, sendo o Nuxt.js como uma das soluções mais populares.

História

O Vue foi criado pelo desenvolvedor independente chinês Evan You, após trabalhar para o Google usando o AngularJS em vários projetos. Posteriormente, ele resumiu o pensamento por trás do processo de criação do Vue: "Pensei, e se eu pudesse retirar somente a parte que realmente gostava do Angular e criar algo muito leve?". O primeiro commit ao código-fonte do projeto data de julho de 2013, e o framework foi lançado oficialmente em fevereiro do ano seguinte, em 2014.

Versões

Versão	Data de lançamento	Título
3.5	1 de setembro de 2024 (2024-09-01)	Tengen Toppa Gurren Lagann
3.4	28 de dezembro de 2023 (2023-12-28)	Slam Dunk
3.3	11 de maio de 2023 (2023-05-11)	Rurouni Kenshin
3.2	5 de agosto de 2021 (2021-08-05)	Quintessential Quintuplets
3.1	7 de junho de 2021 (2021-06-07)	Pluto
3.0	18 de setembro de 2020 (2020-09-18)	One Piece
2.7	1 de julho de 2022 (2022-07-01)	Naruto
2.6	4 de fevereiro de 2019 (2019-02-04)	Macross
2.5	13 de outubro de 2017 (2017-10-13)	Level E
2.4	13 de julho de 2017 (2017-07-13)	Kill la Kill
2.3	27 de abril de 2017 (2017-04-27)	JoJo's Bizarre Adventure
2.2	26 de fevereiro de 2017 (2017-02-26)	Initial D
2.1	22 de novembro de 2016 (2016-11-22)	Hunter × Hunter
2.0	30 de setembro de 2016 (2016-09-30)	Ghost in the Shell
1.0	27 de outubro de 2015 (2015-10-27)	Evangelion
0.12	12 de junho de 2015 (2015-06-12)	Dragon Ball
0.11	7 de novembro de 2014 (2014-11-07)	Cowboy Bebop
0.10	23 de março de 2014 (2014-03-23)	Blade Runner
0.9	25 de fevereiro de 2014 (2014-02-25)	Animatrix
0.8	27 de janeiro de 2014 (2014-01-27)	N/A
0.7	24 de dezembro de 2013 (2013-12-24)	N/A
0.6	8 de dezembro de 2013 (2013-12-08)	VueJS

Funcionalidades

Componentes

Os componentes Vue extendem elementos HTML básicos para encapsular código reutilizável. A um alto nível, os componentes são elementos personalizados aos quais o compilador do Vue associa determinados comportamentos. No Vue, um componente é essencialmente uma instância do Vue com opções predefinidas. O trecho de código abaixo contém um exemplo de um componente Vue:

<script setup>
import { computed, ref } from 'vue'

const { start = 5 } = defineProps({ start: Number })
const count = ref(start)
const disabled = computed(() => count.value === 0)

function decrement() {
  if (count.value > 0) {
    count.value--
  }
}
</script>

<template>
  <div class="host">
    <data class="label" :value="count">
      <template v-if="count === 0">Fim.</template>
      <template v-else-if="count === 1">Encerra no próximo clique!</template>
      <template v-else>Encerra em {{ count }} cliques.</template>
    </data>
    <button :disabled @click="decrement">Contar</button>
  </div>
</template>

<style scoped>
.host {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 100vh;
}

.label {
  font: 1.125rem Noto, sans-serif;
}
</style>

E o uso:

<script setup>
  import Counter from './Counter.vue'
</script>

<template>
  <Counter :start="5" />
</template>

Modelos

O Vue usa uma sintaxe de modelo baseada em HTML que permite vincular o DOM renderizado aos dados contidos na instância subjacente do Vue. Todos os modelos do Vue são HTML válido, e podem ser interpretados por navegadores compatíveis e analisadores HTML. Compilando os modelos, o Vue transforma-os em funções de renderização do DOM virtual. O Modelo de Objeto de Documento (ou "DOM") virtual permite ao Vue renderizar componentes internamente antes de atualizar o navegador. Combinado com o sistema de reatividade, consegue calcular o número mínimo de componentes a serem re-renderizados, e manipular minimamente o DOM quando o estado do aplicativo é alterado.

Usuários do Vue podem usar a sintaxe de modelo ou optar por escrever diretamente funções de renderização usando JSX. As funções de renderização permitem que o aplicativo seja construído a partir de componentes de software.

Reatividade

O sistema de reatividade do Vue utiliza objetos JavaScript simples e re-renderização otimizada. Cada componente controla suas próprias dependências reativas durante sua renderização, com o objetivo de que o sistema saiba exatamente quando e quais componentes renderizar novamente.

Transições

O Vue permite diversas maneiras de aplicar efeitos de transição quando itens são inseridos, atualizados ou removidos do DOM. Isso inclui ferramentas para:

• Aplicar automaticamente classes para transições e animações CSS
• Integrar bibliotecas de animação CSS de terceiros, como a Animate.css
• Utilizar JavaScript para manipular diretamente o DOM durante ganchos de transição
• Integrar bibliotecas de animação JavaScript de terceiros, como Velocity.js

Quando um elemento envolto em um componente de transição é inserido ou removido, o que acontece é:

1. O Vue detecta automaticamente se o elemento-alvo tem transições ou animações CSS aplicadas; caso em que as classes de transição CSS serão adicionadas ou removidas nos momentos apropriados.
2. Se o componente de transição fornecer ganchos JavaScript, esses ganchos serão chamados nos momentos apropriados.
3. Se nenhuma transição/animação CSS for detectada e nenhum gancho JavaScript for fornecido, as operações do DOM para inserção e/ou remoção serão executadas imediatamente no próximo frame.

Roteamento

Uma desvantagem tradicional dos aplicativos de página única (SPAs) é a incapacidade de compartilhar links para a "sub-página" exata em uma página da web específica. Como os SPAs atendem a seus usuários apenas uma resposta baseada em URL do servidor (normalmente retornando index.html ou index.vue), marcar determinadas telas ou compartilhar links para seções específicas é normalmente difícil, se não impossível. Para resolver esse problema, muitos roteadores do lado do cliente delimitam suas URLs dinâmicas com um hashbang (#!), por exemplo, page.com/#! /. Com o HTML5, no entanto, a maior parte dos navegadores modernos oferece suporte ao encaminhamento sem hashbangs.

O Vue oferece uma interface para alterar o que é exibido na página com base no caminho atual da URL—independentemente de como ela foi alterada (seja por link enviado por email, atualização da página ou links na própria página). Além disso, o uso de encaminhamento front-end permite a transição intencional do caminho do navegador quando certos eventos (por exemplo, cliques) ocorrem em botões ou links. O próprio Vue não vem com roteamento de hash front-end. Mas o pacote de código-aberto "vue-router" fornece uma API para atualizar a URL do aplicativo, suporta o botão voltar (histórico de navegação) e e-mail de redefinição de senha ou verificação de email com parâmetros de URL de autenticação. Suporta ainda o mapeamento de rotas aninhadas para componentes aninhados e oferece controle de transição preciso. Com o Vue, desenvolvedores já estão compondo aplicativos com pequenos blocos construindo componentes maiores. Com o vue-router adicionado à mistura, os componentes devem simplesmente ser mapeados para as rotas às quais pertencem, e as rotas parent/raiz devem indicar onde os "filhos" devem renderizar. Exemplo:

import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'

import App from './App.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: () => import('@/views/HomeView.vue'),
    },
  ],
})

const app = createApp(App)
app.use(router)
app.mount('#app')

E o arquivo App.vue:

<script setup>
import { RouterView } from 'vue-router'
</script>

<template>
  <RouterView />
</template>

Ecossistema

A biblioteca principal vem com ferramentas e bibliotecas desenvolvidas pela equipe principal e por colaboradores.

Ferramentas Oficiais

• Devtools - extensão devtools do navegador para depuração de aplicativos Vue.js
• Vue CLI - Ferramentas padrão para desenvolvimento rápido com Vue.js
• Vue Loader - um loader webpack que permite a escrita de componentes Vue em um formato chamado SFC (Single-File Components)

Bibliotecas oficiais

• Vue Router - O router oficial para o Vue.js
• Vuex - Gerenciamento centralizado de estado inspirado em fluxo para Vue.js
• Vue Server Renderer - Renderização server-side para Vue.js
• Pinia - Gerenciamento de estado inspirado no Vuex, oficial do Vue 3.

Ver também

• Angular (framework)
• React (JavaScript)
• SolidJS
• Svelte
• Pinia

Ligações externas

• Sítio oficial
• vuejs/core no GitHub
• «Vue SFC Playground» (em inglês). Experimente Vue.js online