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.

Vue Devtools

Ao 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, 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.