Installation

Compatibilité

Vue ne supporte pas IE8 et les versions antérieures, car il utilise des fonctionnalités ECMAScript 5 qui ne peuvent pas être émulées sur IE8. Cela dit, Vue supporte tous les navigateurs compatibles ECMAScript 5.

Notes de version

Les notes de version détaillées pour chaque version sont disponibles sur GitHub.

Inclusion directe <script>

Il suffit de télécharger et de l’inclure avec une balise script. Vue sera déclaré comme une variable globale.

N’utilisez pas la version minifiée pendant le développement. Vous ne bénéficieriez alors pas des avertissements pour les erreurs courantes !


Version de développementAvec tous les avertissements et le mode de débogage

Version de productionAvertissements retirés, 26.87ko min+gzip

CDN

Recommandé : https://unpkg.com/vue, qui reflète la dernière version aussitôt qu’elle est publiée sur NPM. Vous pouvez également parcourir la source du package NPM sur https://unpkg.com/vue/.

Également disponible sur jsDelivr ou cdnjs, mais ces deux services mettent du temps à se synchroniser ce qui signifie que la dernière version peut ne pas être encore disponible.

NPM

NPM est la méthode d’installation recommandée lors du développement de grosses applications avec Vue. Il s’associe bien avec des empaqueteurs de modules comme Webpack ou Browserify. Vue fournit également des outils d’accompagnement pour la rédaction de Composants Mono-fichier.

# dernière version stable
$ npm install vue

CLI

Vue.js offre une CLI (interface en ligne de commande) officielle pour mettre rapidement en place les bases d’une application monopage ambitieuse. Il offre une série de builds pré-configurés pour un workflow frontend moderne. Cela ne prend que quelques minutes pour commencer et lancer des rechargements à chaud, de l’analyse syntaxique à la sauvegarde, et des builds prêts pour la production :

# installer vue-cli
$ npm install --global vue-cli
# créer un nouveau projet en utilisant le template "webpack"
$ vue init webpack my-project
# installer les dépendances et c'est parti !
$ cd my-project
$ npm install
$ npm run dev

Utiliser la CLI nécessite des connaissances préalables en Node.js et les outils de build associés. Si vous êtes nouveau sur Vue ou les outils de build front-end, nous vous recommandons fortement de parcourir le guide sans aucun outil de build avant d’utiliser l’interface CLI.

Explication des différents builds

Dans le dossier dist/ du package NPM vous trouverrez plusieurs builds différents de Vue.js. Voici un aperçu des différences entre chacun d’eux :

UMD CommonJS ES Module
Full vue.js vue.common.js vue.esm.js
Runtime-only vue.runtime.js vue.runtime.common.js vue.runtime.esm.js
Full (production) vue.min.js - -
Runtime-only (production) vue.runtime.min.js - -

Termes

Runtime + Compiler vs. Runtime seul

Si vous avez besoin de compiler des templates en temps réel (ex. : passer une chaîne de caractère à l’option template, ou monter un élément en vous servant de sa représentation HTML dans le DOM comme template) vous aurez besoin du compilateur et donc du build Full :

// ceci a besoin d'un compilateur
new Vue({
template: `<div>{{ hi }}</div>`
})
// ceci n'en a pas besoin
new Vue({
render (h) {
return h('div', this.hi)
}
})

En utilisant vue-loader ou vueify, les templates à l’intérieur des fichiers *.vue sont pré-compilés en JavaScript pendant l’étape de build. Vous n’avez donc pas réellement besoin du compilateur dans le bundle final et pouvez dans ce cas utiliser la version du build Runtime.

Puisque le build Runtime est approximativement 30% plus léger que son homologue le build Full, vous devriez l’utiliser autant que possible. Si vous souhaitez toujours utiliser le build Full à la place, vous avez besoin de configurer un alias dans votre outil de bundle :

Webpack

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

Rollup

const alias = require('rollup-plugin-alias')
rollup({
// ...
plugins: [
alias({
'vue': 'vue/dist/vue.esm.js'
})
]
})

Browserify

Ajoutez au fichier package.json de votre projet :

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

Mode dévelopement vs. mode production

Les modes développement et production sont écrits en dur dans les builds UMD : les fichiers non minifiés sont pour le développement, et les fichier minifiés sont pour la production.

Les builds CommonJS et ES Module sont prévus pour les outils de bundle, donc nous ne fournissons pas de version minifié pour eux. Vous aurez à votre charge de minifier le bundle final vous-même.

Les builds CommonJS et ES Module contiennent une utilisation de process.env.NODE_ENV pour déterminer le mode qu’ils doivent suivre. Vous devriez utiliser une configuration d’outil de bundle appropriée pour remplacer ces d’environnements afin de contrôler lequel des modes Vue exécutera. Remplacer process.env.NODE_ENV avec une chaîne de caractère littérale permet aux outils de minification comme UglifyJS de complètement retirer les pends de code réservés au développement, réduisant ainsi la taille du fichier final.

Webpack

Utiliser la fonction DefinePlugin de Webpack :

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

Rollup

Utilisez le rollup-plugin-replace :

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

Browserify

Appliquez une transformation envify globale à votre bundle.

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

Référez vous également aux conseils de déploiment en production.

Environnements CSP

Certains environnements, tels que les Applications de Google Chrome, font respecter la politique de sécurité de contenu (Content Security Policy - CSP), qui ne permet pas l’utilisation de new Function() pour évaluer les expressions. Le build standalone a besoin de cette fonctionnalité pour compiler les templates, elle n’est donc pas utilisable dans ces environnements.

D’un autre côté, le build runtime respecte pleinement les CSP. Quand vous utilisez le build runtime avec Webpack + vue-loader ou Browserify + vueify, vos templates vont être pré-compilés dans les fonctions render qui fonctionnent parfaitement dans des environnements CSP.

Build de développement

Important: les fichiers générés dans le dossier /dist sur GitHub sont seulement vérifiés lors des releases. Pour utiliser la dernière version du code source de Vue sur GitHub, vous aurez à lancer le build vous-même !

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

Bower

Seulement les builds UMD sont disponibles depuis Bower.

# dernière version stable
$ bower install vue

Chargeurs de module AMD

Les versions standalone ou installées via Bower sont encapsulées selon UMD ce qui permet de directement les utiliser sous forme de module AMD.