# Instalação

Vue.js foi projetado propositalmente para ser incrementalmente adotável. Isto significa que pode ser integrado em um projeto de várias formas, dependendo de suas necessidades.

Há quatro formas principais de adicionar Vue.js a um projeto:

  1. Importar a partir de CDN na página desejada
  2. Baixe os arquivos JavaScript e hospede-os você mesmo
  3. Instalar usando npm
  4. Usar a ferramenta CLI oficial para criar o projeto, usando configurações previamente ajustadas para o desenvolvimento frontend moderno (com hot-reload, lint-on-save e muito mais)

# Notas de Lançamento

Última versão: npm

Notas de lançamento detalhadas para cada versão estão disponíveis no GitHub (opens new window).

# Vue Devtools

Learn how to install and use Vue Devtools in a free Vue School lesson

Atualmente em versão Beta - integração com Vuex e Router ainda em andamento

Aprenda como instalar e usar o Vue Devtools em uma aula gratuita da Vue School

Ao utilizar o Vue, recomendamos também instalar a extensão Vue Devtools (opens new window) no seu navegador, que lhe permite inspecionar e realizar debug de suas aplicações Vue através de uma interface mais amigável.

Adquirir a extensão para Chrome (opens new window)

Adquirir a extensão para Firefox (opens new window)

Adquirir a aplicação individual, baseada em Electron (opens new window)

# CDN

Para prototipação ou aprendizagem, você pode utilizar a última versão com:

<script src="https://unpkg.com/vue@next"></script>
1

Para produção, recomendamos vinculá-lo a uma versão e uma distribuição (build) específicas, a fim de evitar incompatibilidade de funcionalidades devido a uma nova versão.

# Baixar e hospedar em seu próprio servidor

Se você não pode usar uma CDN em produção, ou não deseja fazer uso de ferramentas de construção, você pode baixar o arquivo .js e hospedá-lo em seu próprio servidor web. Desta forma, você pode então incluí-lo usando uma tag <script>, da mesma forma como feito com a abordagem CDN.

Os arquivos podem ser encontrados e baixados de uma CDN, como unpkg (opens new window) ou jsDelivr (opens new window). Os vários arquivos diferentes serão explicados mais tarde, mas normalmente você desejará baixar ambas as versões de desenvolvimento e de produção.

# npm

O método de instalação através do npm é o que recomendamos ao construir aplicações de larga escala com o Vue. Ele combina perfeitamente com empacotadores de módulos (module bundlers), como o webpack (opens new window) ou o Rollup (opens new window).

# última versão estável
$ npm install vue@next
1
2

O Vue também fornece ferramentas de acompanhamento para a criação de Componentes Single-File (SFCs). Se você quiser usar SFCs, também precisará instalar @vue/compiler-sfc:

$ npm install -D @vue/compiler-sfc
1

Se você está vindo do Vue 2, observe que @vue/compiler-sfc substitui vue-template-compiler.

Além do @vue/compiler-sfc, você também precisará de um loader ou plugin SFC adequado para o empacotador escolhido. Consulte a documentação de SFC para obter mais informações.

Na maioria dos casos, a maneira preferida de criar uma construção com webpack e configuração mínima é usar o Vue CLI.

# CLI

Vue oferece uma CLI oficial (opens new window) para projetar, rapidamente, ambiciosas Single Page Applications. Esta oferece conjuntos prontos de ambientes de compilação para um processo de desenvolvimento frontend moderno. Basta apenas alguns minutos para ter tudo funcionando e sendo executado com hot-reload, lint-on-save e distribuições (builds) prontas para produção.

TIP

A CLI pressupõe que você já possui conhecimento prévio em Node.js e das ferramentas de construção (build tools) associadas. Se Vue ou as ferramentas de construção frontend associadas são assuntos novos para você, recomendamos fortemente que você passe por todo o guia sem qualquer ferramenta de construção, antes de utilizar a CLI.

Para o Vue 3, você deve utilizar, no mínimo, a Vue CLI v4.5, disponível no npm como @vue/cli. Para atualizá-lo, você deve reinstalar o pacote @vue/cli globalmente, em sua última versão:

yarn global add @vue/cli
# OU
npm install -g @vue/cli
1
2
3

Logo em seguida, em seus projetos Vue, execute:

vue upgrade --next
1

# Vite

Vite (opens new window) é uma ferramenta de construção (build tool) para desenvolvimento Web que permite servir código de maneira ultra rápida devido à sua abordagem de importação ES Module nativa.

Projetos Vue podem ser rapidamente inicializados com Vite ao executar os seguintes comandos no seu terminal:

Com npm:

# npm 6.x
$ npm init vite@latest <nome-do-projeto> --template vue

# npm 7+, é necessário um traço duplo extra:
$ npm init vite@latest <nome-do-projeto> -- --template vue

$ cd <nome-do-projeto>
$ npm install
$ npm run dev
1
2
3
4
5
6
7
8
9

Ou com Yarn:

$ yarn create vite <nome-do-projeto> --template vue
$ yarn create vite-app <nome-do-projeto>
$ cd <nome-do-projeto>
$ yarn
$ yarn dev
1
2
3
4
5

Ou com pnpm:

$ pnpm create vite <nome-do-projeto> -- --template vue
$ cd <nome-do-projeto>
$ pnpm install
$ pnpm dev
1
2
3
4

# Esclarecimento sobre as diferentes Distribuições

No diretório dist/ do pacote npm (opens new window), você encontrará diversas distribuições (builds) do Vue.js. A seguir, temos uma visão geral de qual arquivo de dist você deve utilizar, dependendo do seu caso de uso:

# Utilizando a partir de uma CDN ou sem um Empacotador

# vue(.runtime).global(.prod).js:

  • Para uso direto no navegador, através de <script src="...">, ao expor uma variável Vue global.
  • Compilação de templates diretamente no navegador:
    • vue.global.js é a distribuição (build) "completa", que inclui compilador e runtime, a fim de dar suporte à compilação de templates sob demanda.
    • vue.runtime.global.js possui apenas o runtime e exige templates pré-compilados.
  • Inclui todos os pacotes internos básicos do Vue - em outras palavras, é apenas um arquivo, sem dependências externas. Isto significa que você deve importar tudo deste arquivo - e apenas deste arquivo, a fim de garantir que você sempre estará utilizando a mesma instância de código.
  • Possui distribuições (builds) hard-coded para produção e desenvolvimento, sendo a distribuição de produção já pré-minificada. Utilize arquivos *.prod.js em produção.

Note

Distribuições globais (global builds) não são distribuições UMD (opens new window). Elas são geradas como IIFEs (opens new window) e são destinadas apenas para uso direto através de <script src="...">.

# vue(.runtime).esm-browser(.prod).js:

  • Para uso através de importação ES modules nativa (no navegador, através de <script type="module">).
  • Compartilha o mesmo runtime de compilação, o mesmo inlining de dependências e o mesmo comportamento de produção/desenvolvimento, hard-coded, com a distribuição (build) global.

# Utilizando a partir de um Empacotador

# vue(.runtime).esm-bundler.js:

  • Para uso de empacotadores, como webpack, rollup e parcel.
  • Gera distribuições de produção e desenvolvimento a partir de process.env.NODE_ENV guards (deve ser substituído pelo empacotador)
  • Não inclui distribuições (builds) minificadas (a fim deste processo ser realizado junto do resto do código, pelo empacotador)
  • Importa dependências (por exemplo, @vue/runtime-core, @vue/runtime-compiler)
    • Dependências importadas também são distribuições (builds) geradas pelo esm-bundler e, por sua vez, importarão suas dependências (por exemplo, @vue/runtime-core importa @vue/reactivity)
    • Isto significa que é possível instalar ou importar estas dependências individualmente, ficando sem instâncias diferentes. Entretanto, você deve garantir a unicidade, utilizando sempre das mesmas versões.
  • Compilação de template diretamente no navegador:
    • vue.runtime.esm-bundler.js (padrão) compreende apenas o runtime, e requer que todos os templates sejam pré-compilados. Por esta razão, empacotadores (bundlers) acabam utilizando este arquivo, por padrão (definido em module no package.json), uma vez que, normalmente, já pré-compilam os templates do projeto (por exemplo, arquivos *.vue)
    • vue.esm-bundler.js: inclui o compilador e o runtime. Utilize este arquivo se você está utilizando um empacotador, mas ainda assim deseja compilar templates sob demanda (por exemplo, templates disponíveis no DOM ou templates em strings do JavaScript)

# Para Renderização no lado do Servidor

# vue.cjs(.prod).js:

  • Para renderização no lado do servidor, em Node.js, via require().
  • Esta é a distribuição (build) que será carregada se você empacota sua aplicação com webpack utilizando target: 'node' e externalizando vue apropriadamente.
  • Os arquivos de desenvolvimento e produção são previamente gerados, mas o arquivo mais apropriado é automaticamente adquirido baseado em process.env.NODE_ENV.

# Runtime + Compilador vs. somente Runtime

Se você precisar compilar templates no cliente (por exemplo, passando uma string para uma propriedade template ou utilizando do conteúdo de um elemento já existente no DOM do HTML), você precisará do compilador e, portanto, da distribuição (build) completa:

// isto requer o compilador
Vue.createApp({
  template: '<div>{{ hi }}</div>'
})

// isto não requer o compilador
Vue.createApp({
  render() {
    return Vue.h('div', {}, this.hi)
  }
})
1
2
3
4
5
6
7
8
9
10
11

Ao utilizar o vue-loader, templates dentro de arquivos *.vue são pré-compilados para JavaScript durante o processo de construção (build time). Você não precisa, necessariamente, do compilador no seu pacote (bundle) final e, portanto, pode utilizar apenas a distribuição runtime.