# 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

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.

# Download and Self Host

If you want to avoid using build tools but can't use a CDN in production then you can download the relevant .js file and host it using your own web server. You can then include it using a <script> tag, just like with the CDN approach.

The files can be browsed and downloaded from a CDN such as unpkg (opens new window) or jsDelivr (opens new window). The various different files are explained later but you would typically want to download both a development build and a production build.

# 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

Vue also provides accompanying tools for authoring Single File Components (SFCs). If you want to use SFCs then you'll also need to install @vue/compiler-sfc:

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

If you're coming from Vue 2 then note that @vue/compiler-sfc replaces vue-template-compiler.

In addition to @vue/compiler-sfc, you'll also need a suitable SFC loader or plugin for your chosen bundler. See the SFC documentation for more information.

In most cases, the preferred way to create a webpack build with minimal configuration is to use Vue CLI.

# CLI

Vue oferece uma CLI oficial (opens new window) para projetar, rapidamente, ambiciosas Single Page Applications. Esta oferece conjuntos prontos de configurações de distribuiçã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. Confira a documentação da Vue CLI (opens new window) para mais detalhes.

TIP

A CLI pressupõe que você já possui conhecimento prévio em Node.js e das ferramentas de distribuição (build tools) associadas. Se Vue ou as ferramentas de distribuição frontend associadas são assuntos novos para você, recomendamos fortemente que você passe por todo o guia sem qualquer ferramenta de distribuiçã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 distribuiçã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

# 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.