You’re browsing the documentation for v2.x and earlier. For v3.x, click here.

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.

Gestion sémantique de version

Vue suit la gestion sémantique de version dans tous ses projets officiels pour les fonctionnalités et les comportements documentés. Les changements concernant les comportements non documentés et les fonctionnalités internes exposées sont décrits dans les notes de version.

Notes de version

Dernière version stable : 2.7.14

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

Vue Devtools

Quand vous utilisez Vue, nous vous recommandons également d’installer Vue Devtools dans votre navigateur. Cela vous permettra d’inspecter et de déboguer vos applications Vue dans une interface dédiée et intuitive.

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 !

CDN

Pour du prototypage ou de l’apprentissage, vous pouvez utiliser la dernière version avec :

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

Pour la production, nous vous recommandons de vous figer à une version et un build défini pour éviter les changements non compatibles des nouvelles versions :

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

Si vous utilisez des Modules ES natifs, il y a également un build compatible avec les Modules ES :

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

Vous pouvez parcourir la source du package npm à l’adresse : cdn.jsdelivr.net/npm/vue.

Vue est également disponible sur unpkg et cdnjs (cdnjs met du temps à se synchroniser ce qui signifie que la dernière version peut ne pas être encore disponible).

Assurez vous de lire la partie dédiée aux différents builds de Vue et d’utiliser la version de production dans vos sites publiés, en remplaçant vue.js par vue.min.js. C’est un build plus léger optimisé pour la rapidité plutôt que l’expérience de développement.

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 officielle (« interface en ligne de commande ») 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. Consultez la documentation Vue CLI pour plus de détails.

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 trouverez plusieurs builds différents de Vue.js. Voici un aperçu des différences entre chacun d’eux :

Termes

• Full: des builds qui contiennent la partie Compiler ainsi que la version Runtime.

• Compiler: le code qui est responsable de la compilation des chaînes de caractère de template en des fonctions de rendu en JavaScript.

• Runtime: le code qui est responsable de la création des instances de Vue, de faire le rendu et les modifications du DOM virtuel. C’est à dire tout, sauf ce que fait la partie Compiler.

• UMD : les builds UMD peuvent être utilisés directement dans un navigateur avec la balise <script>. Le fichier par défaut du CDN jsDelivr à l’adresse https://cdn.jsdelivr.net/npm/vue@2.7.14 est le build UMD Runtime + Compiler (vue.js).

• CommonJS: Les builds CommonJS sont prévus pour une utilisation avec les vieux outils de paquetage (« bundle ») comme browserify ou webpack 1. Le fichier par défaut pour ces outils (pkg.main) est le build CommonJS Runtime (vue.runtime.common.js).

• ES Module: apparut avec la 2.6, Vue fournit deux builds pour Modules ES (ESM) :

  • ESM pour empaqueteur : destiné à être utiliser avec des empaqueteurs modernes comme webpack 2 ou Rollup. Le format ESM est conçu pour être statiquement analysable ainsi les empaqueteurs peuvent avantageusement faire du retrait de fonctionnalité inutile et éliminer ce code de votre paquetage final. Le fichier par défaut pour ces paquetages (pkg.module) est le Runtime seulement pour build Module ES (vue.runtime.esm.js).

  • ESM pour navigateur (2.6+ seulement): destiné à l’import direct des modules dans les navigateurs modernes via <script type="module">.

Runtime + Compiler vs. Runtime seul

Si vous avez besoin de compiler des templates en temps réel (par 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 complet :

// 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 paquetage 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 d’empaquetage :

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': require.resolve('vue/dist/vue.esm.js')
    })
  ]
})

Browserify

Ajoutez au fichier package.json de votre projet :

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

Parcel

Ajoutez au fichier package.json de votre projet :

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

Mode développement 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 paquetage, donc nous ne fournissons pas de version minifié pour eux. Vous aurez à votre charge de minifier le paquetage 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 d’empaquetage appropriée pour remplacer ces variables d’environnement afin de contrôler lequel des modes Vue s’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 pans de code réservés au développement, réduisant ainsi la taille du fichier final.

webpack

Dans webpack 4+, vous pouvez utiliser l’option mode :

module.exports = {
  mode: 'production'
}

Mais dans webpack 3 et précédent, vous devez utiliser la fonction DefinePlugin :

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 paquetage.

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 complet 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.