Você está navegando a documentação da v2.x e anterior. Para a v3.x, clique aqui.

Instalação

Sobre a Compatibilidade

Vue não suporta IE8 e versões anteriores, pois usa funcionalidades ECMAScript 5 incompatíveis nestes. Entretanto, suporta todos os navegadores compatíveis com ECMAScript 5.

Versionamento Semântico

Vue segue o Versionamento Semântico em todos os seus projetos oficiais onde são documentados features e comportamentos. Para comportamentos não documentados ou partes internas expostas, as mudanças estão descritas nas notas de lançamento.

Notas de Lançamento

Última versão estável: 2.6.14

Notas detalhadas para cada versão estão disponíveis no GitHub.

Vue Devtools

Antes de mais nada, ao utilizar Vue também recomendamos que você instale a extensão Vue Devtools em seu navegador, lhe permitindo inspecionar e depurar suas aplicações Vue em uma interface mais amigável.

Inclusão Direta com <script>

Simplesmente faça o download e inclua a tag <script> com o caminho correto. Vue será registrado como uma variável global.

Não use a versão minificada (de produção) durante o desenvolvimento. Você irá perder todos os avisos interessantes para os erros mais comuns!

CDN

Para propósitos de prototipação ou aprendizado, você pode usar a versão mais recente com:

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

Para produção, recomendados vincular a um número de versão específico para evitar quebra de funções das versões mais novas:

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>

Se você está usando Modulos ES nativos, existe uma build compatível com isso:

<script type="module">
  import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.esm.browser.js'
</script>

Você pode navegar pelos códigos-fonte do pacote NPM em cdn.jsdelivr.net/npm/vue.

Vue também está disponível no unpkg e no cdnjs (cdnjs leva algum tempo para sincronizar, então a última versão lançada pode não estar disponível ainda).

Tenha certeza de ler sobre as diferentes distribuições do Vue e usar a versão para produção em seu projeto publicado, alterando vue.js por vue.min.js. Este é um pacote menor otimizado para desempenho ao invés de experiência de desenvolvimento.

NPM

NPM é o método de instalação recomendado para construção de aplicações em larga escala com o Vue. Ele combina perfeitamente com empacotadores de módulos, tais como Webpack ou Browserify. Vue também oferece ferramentas para a criação de Componentes Single-File.

# última versão estável
$ npm install vue

CLI

Vue.js oferece um CLI oficial para rapidamente construir ambiciosas Single Page Applications. Ele possui um conjunto de configurações de build prontas para um processo de trabalho de front-end moderno. Leva apenas alguns minutos para estar pronto e executando com hot-reload, lint ao salvar e empacotamento pronto para distribuição em produção. Dê uma olhada na documentação do Vue CLI para mais detalhes.

Este assunto pressupõe conhecimento prévio em Node.js e ferramentas de build associadas. Se você é novo no Vue ou neste tipo de ferramenta, recomendamos fortemente que passe por todo o guia antes de tentar usar o CLI.

Explicação das Distribuições

No diretório dist/ do pacote NPM você encontrará muitas distribuições diferentes do Vue.js. Aqui está uma visão geral das variações entre cada uma delas:

	UMD	CommonJS	ES Module (para empacotadores)	ES Module (para navegadores)
Completa	vue.js	vue.common.js	vue.esm.js	vue.esm.browser.js
Apenas Runtime	vue.runtime.js	vue.runtime.common.js	vue.runtime.esm.js	-
Completa (produção)	vue.min.js	-	-	vue.esm.browser.min.js
Apenas Runtime (produção)	vue.runtime.min.js	-	-	-

Termos

• Completa: pacotes que contêm tanto o compilador quanto o motor de tempo de execução (em inglês, runtime).

• Compilador: código responsável por compilar Strings com templates para funções de renderização em JavaScript.

• Runtime: código responsável por criar instâncias Vue, renderizar e atualizar o Virtual DOM, etc. Basicamente, tudo menos o compilador.

• UMD: definição de módulos universal, pode ser usada diretamente no navegador através de uma tag <script>. O arquivo padrão no jsDelivr CDN em https://cdn.jsdelivr.net/npm/vue@2.6.14 é a distribuição Compilador + Runtime em formato UMD (vue.js).

• CommonJS: formato destinado a empacotadores antigos como browserify ou webpack 1. O arquivo padrão para estes empacotadores (pkg.main) é a distribuição apenas Runtime em formato CommonJS (vue.runtime.common.js).

• ES Module: a partir de 2.6 Vue fornece dois builds ES Modules (ESM):

  • ESM para empacotadores: destinado ao uso com empacotadores modernos como o webpack 2 ou rollup. O formato ESM é projetado para ser estaticamente analisável, de modo que os empacotadores possam tirar proveito disso para realizar “tree-shaking” e eliminar o código não utilizado de seu pacote final. O arquivo padrão para estes empacotadores (pkg.module) é a distribuição apenas Runtime em formato ES Module (vue.runtime.esm.js).

  • ESM para navegadores (somente 2.6+): destinado a importações diretas em navegadores modernos via <script type="module">.

Runtime + Compilador vs. Runtime

Se você precisar compilar templates em tempo real no cliente (por exemplo, passando uma String na opção template, ou usando elementos pré-existentes no DOM através do HTML como template), você vai precisar do compilador e, portanto, do build completo:

// Isso requer o compilador
new Vue({
  template: '<div>{{ hi }}</div>'
})

// Isso não requer
new Vue({
  render: h => h('div', this.hi)
})

Ao utilizar vue-loader ou vueify, templates dentro de arquivos *.vue são pré-compilados para JavaScript durante o processo de construção. Você realmente não precisa do compilador no seu pacote final, desta forma pode utilizar apenas a distribuição Runtime.

Uma vez que as distribuições apenas com o código de Runtime são aproximadamente 30% mais leves que as completas, você deve usá-las sempre que puder. Se você ainda assim desejar utilizar a distribuição completa, precisará configurar um alias no seu empacotador:

Webpack

module.exports = {
  // ...
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js' // 'vue.common.js' para webpack 1
    }
  }
}

Rollup

const alias = require('rollup-plugin-alias')

rollup({
  // ...
  plugins: [
    alias({
      'vue': require.resolve('vue/dist/vue.esm.js')
    })
  ]
})

Browserify

Adicione no package.json de seu projeto:

{
  // ...
  "browser": {
    "vue": "vue/dist/vue.common.js"
  }
}

Parcel

Adicione no package.json de seu projeto:

{
  // ...
  "alias": {
    "vue" : "./node_modules/vue/dist/vue.common.js"
  }
}

Desenvolvimento vs. Produção

Modos de desenvolvimento/produção estão fixos no código das distribuições UMD: os arquivos não minificados são para desenvolvimento, os arquivos minificados são para produção.

Distribuições CommonJS e ES Module são destinadas a empacotadores, desta forma não oferecemos versões minificadas. Você será responsável por minificar todo seu pacote final.

Tais distribuições também preservam checagens à variável process.env.NODE_ENV, para determinar o modo de operação que utilizarão. Você deve configurar apropriadamente seu empacotador para alterar essa variável de ambiente corretamente, de forma a controlar o modo em que o Vue irá executar. Alterar process.env.NODE_ENV usando Strings literais também permite que minificadores como UglifyJS possam remover completamente blocos de código exclusivos de desenvolvimento, reduzindo o tamanho final do pacote.

Webpack

No Webpack 4+, você pode usar a opção mode:

module.exports = {
  mode: 'production'
}

No Webpack 3 e anteriores é necessário utilizar o DefinePlugin:

var webpack = require('webpack')

module.exports = {
  // ...
  plugins: [
    // ...
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify('production')
      }
    })
  ]
}

Rollup

Utilize o rollup-plugin-replace:

const replace = require('rollup-plugin-replace')

rollup({
  // ...
  plugins: [
    replace({
      'process.env.NODE_ENV': JSON.stringify('production')
    })
  ]
}).then(...)

Browserify

Aplique uma transformação envify global em seu pacote.

NODE_ENV=production browserify -g envify -e main.js | uglifyjs -c -m > build.js

Veja também Dicas de Publicação para Produção.

Ambientes CSP

Alguns ambientes, como aplicativos do Google Chrome, forçam Content Security Policy (CSP), a qual proíbe o uso de new Function() para avaliar expressões. A distribuição completa depende deste recurso para compilar os templates, portanto não é viável nestes ambientes.

Por outro lado, a distribuição apenas Runtime é totalmente compatível. Ao utilizar este tipo de distribuição com Webpack + vue-loader ou Browserify + vueify, seus templates serão pré-compilados em funções render, as quais funcionam perfeitamente neste tipo de ambiente.

Compilação de Desenvolvimento

Importante: os arquivos compilados no diretório /dist do GitHub são criados apenas nos lançamentos de novas versões. Se quiser usar o Vue a partir do código-fonte mais recente do GitHub (e portanto, possivelmente não estável), você terá que compilá-lo você mesmo!

git clone https://github.com/vuejs/vue.git node_modules/vue
cd node_modules/vue
npm install
npm run build

Bower

Apenas distribuições UMD estão disponíveis através do Bower.

# última versão estável
$ bower install vue

Módulos AMD

Todas as distribuições UMD podem ser utilizadas diretamente como módulos AMD.