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.

Notas de Lançamento

Última versão estável: 2.5.17

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!


Versão DesenvolvedorMensagens de erro completas e modo de depuração

Versão de ProduçãoSem mensagens de erro, 30.90KB min+gzip

CDN

Nós recomendados vincular a um número de versão específico que você possa atualizar manualmente:

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.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
Completa vue.js vue.common.js vue.esm.js
Apenas Runtime vue.runtime.js vue.runtime.common.js vue.runtime.esm.js
Completa (produção) vue.min.js - -
Apenas Runtime (produção) vue.runtime.min.js - -

Termos

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': '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.