Instalação

Sobre a Compatibilidade

Vue não suporta IE8 e versões anteriores, porque são usadas funcionalidades ECMAScript 5 que são incompatíveis com o IE8. Entretanto, suporta todos os navegadores compatíveis com ECMAScript 5.

Notas de Lançamento

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

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, 28.96kb min+gzip

CDN

Recomendado: unpkg.com/vue/dist/vue.js, reflete a última versão assim que ela é disponibilizada no npm. Inclusive, pode navegar pelo código-fonte do pacote em https://unpkg.com/vue/.

Também disponível no jsDelivr ou no cdnjs, mas estes dois serviços levam algum tempo para sincronizar com a última versão quando lançada.

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 module bundlers, 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 uma série de funcionalidades e configurações prontas para uso, para o desenvolvimento de aplicações frontend modernas. Leva apenas alguns minutos para estar executando com hot-reload, lint ao salvar, e compilações prontas para produção:

# instala o vue-cli globalmente
$ npm install --global vue-cli
# cria um novo projeto com o template "webpack"
$ vue init webpack my-project
# instala as dependências e executa!
$ cd my-project
$ npm install
$ npm run dev

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"
}
}

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

Utilize o DefinePlugin do Webpack:

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.