Démarrage rapide ​

En ligne ​

• Pour vous familiariser rapidement avec Vue, vous pouvez l'essayer directement dans notre Playground.

• Si vous préférez une configuration HTML simple sans outil de build, vous pouvez utiliser JSFiddle comme point de départ.

• Si vous êtes déjà familiarisé avec Node.js et le concept des outils de construction, vous pouvez également essayer une configuration de build complète directement dans votre navigateur sur StackBlitz.

Créer une application Vue ​

Dans cette section, nous allons vous présenter comment créer une Single Page Application avec Vue sur votre machine locale. Le projet créé utilisera une configuration de build basée sur Vite et nous permettra d'utiliser les composants monofichiers (SFCs).

Assurez-vous d'avoir une version à jour de Node.js d'installée et que votre répertoire de travail courant est bien celui où vous souhaitez créer un projet. Exécutez la commande suivante dans votre invite de commandes (sans le symbole $) :

$ npm create vue@latest

$ pnpm create vue@latest

# For Yarn (v1+)
$ yarn create vue

# Avec Yarn Moderne (v2+)
$ yarn create vue@latest

# Avec Yarn ^v4.11
$ yarn dlx create-vue@latest

$ bun create vue@latest

Cette commande installera et exécutera create-vue, l'outil officiel de création de projets Vue. Des questions (en anglais) vous seront posées pour un certain nombre de fonctionnalités optionnelles telles que la prise en charge de TypeScript et des tests :

✔ Project name: … <votre-nouveau-projet>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add an End-to-End Testing Solution? … No / Cypress / Nightwatch / Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
✔ Add Vue DevTools 7 extension for debugging? (experimental) … No / Yes

Scaffolding project in ./<votre-nouveau-projet>...
Done.

Si vous n'êtes pas sûr d'une option, choisissez simplement No en appuyant sur entrée pour le moment. Une fois le projet créé, suivez les instructions pour installer les dépendances et démarrer le serveur de développement :

$ cd <votre-nouveau-projet>
$ npm install
$ npm run dev

$ cd <votre-nouveau-projet>
$ pnpm install
$ pnpm run dev

$ cd <votre-nouveau-projet>
$ yarn
$ yarn dev

$ cd <votre-nouveau-projet>
$ bun install
$ bun run dev

Vous devriez maintenant avoir votre premier projet Vue en cours d'exécution ! Notez que les composants d'exemple dans le projet généré sont écrits avec la Composition API et <script setup>, plutôt que l'Options API. Voici quelques conseils supplémentaires :

• L'environnement de développement recommandé est Visual Studio Code + l'extension Vue - Official. Si vous utilisez d'autres éditeurs, lisez la section sur le support des environnements de développement.
• Guide - Outils fournit plus de détails sur les utilitaires, notamment sur l'intégration avec les frameworks back-end.
• Pour en savoir plus sur l'outil de compilation Vite, consultez la documentation Vite.
• Si vous avez choisi d'utiliser TypeScript, consultez le Guide d'utilisation de TypeScript.

Dès que vous êtes prêts à livrer votre application en production, exécutez la commande suivante :

$ npm run build

$ pnpm run build

$ yarn build

$ bun run build

Cela créera une version de votre application prête pour la production dans le répertoire ./dist du projet. Consultez le Guide du déploiement en production pour en savoir plus sur l'envoi de votre application en production.

Étapes suivantes >

Utiliser Vue depuis un CDN ​

Vous pouvez utiliser Vue directement depuis un CDN via une balise script :

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

Ici nous utilisons unpkg, mais vous pouvez utiliser tout autre CDN qui sert des paquets NPM, par exemple jsdelivr ou cdnjs. Bien évidemment, vous pouvez également télécharger le fichier pour le servir par vous-même.

Lorsque Vue est utilisé depuis un CDN, aucun outil de build n'est nécessaire. Cela permet d'avoir une configuration plus simple, et plus adaptée pour enrichir du HTML statique ou intégrer un framework backend. Par contre, vous n'aurez pas la possibilité de bénéficier de la syntaxe des components monofichiers (SFC).

Utiliser le build global ​

Le lien ci-dessus charge le build global de Vue, où toutes les API haut-niveau sont exposées comme des propriétés sur l'objet global Vue. Ci-dessous, un exemple utilisant le build global :

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">{{ message }}</div>

<script>
  const { createApp } = Vue

  createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">{{ message }}</div>

<script>
  const { createApp, ref } = Vue

  createApp({
    setup() {
      const message = ref('Hello Vue!')
      return {
        message
      }
    }
  }).mount('#app')
</script>

Utiliser le build des modules ES ​

Bien que le build global fonctionne, nous utiliserons principalement la syntaxe des modules ES dans le reste de la documentation par souci de cohérence. La plupart des navigateurs supportant désormais les modules ES nativement, nous pouvons utiliser Vue depuis un CDN via les modules ES natifs :

<div id="app">{{ message }}</div>

<script type="module">
  import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

  createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>

<div id="app">{{ message }}</div>

<script type="module">
  import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

  createApp({
    setup() {
      const message = ref('Hello Vue!')
      return {
        message
      }
    }
  }).mount('#app')
</script>

Notez que nous utilisons <script type="module">, et que l'url CDN importée pointe vers le build des modules ES de Vue.

Activer l'Import maps ​

Dans l'exemple ci-dessus, nous importons depuis l'URL CDN complète, mais dans le reste de la documentation, vous verrez un code comme celui-ci :

const { createApp, ref } = Vue

Nous pouvons dire au navigateur où trouver l'import vue par l'usage de l'Import Maps :

<script type="importmap">
  {
    "imports": {
      "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
    }
  }
</script>

<div id="app">{{ message }}</div>

<script type="module">
  import { createApp } from 'vue'

  createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>

<script type="importmap">
  {
    "imports": {
      "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
    }
  }
</script>

<div id="app">{{ message }}</div>

<script type="module">
  import { createApp, ref } from 'vue'

  createApp({
    setup() {
      const message = ref('Hello Vue!')
      return {
        message
      }
    }
  }).mount('#app')
</script>

Vous pouvez ajouter des entrées pour d'autres dépendances à l'Import Map, assurez-vous simplement qu'elles pointent vers la version des modules ES de la bibliothèque que vous avez l'intention d'utiliser.

Séparation des modules ​

Au fur et à mesure que nous progressons dans le guide, il se peut que nous devions diviser notre code en plusieurs fichiers JavaScript distincts afin d'en faciliter la gestion. Par exemple :

<!-- index.html -->
<div id="app"></div>

<script type="module">
  import { createApp } from 'vue'
  import MyComponent from './my-component.js'

  createApp(MyComponent).mount('#app')
</script>

// my-component.js
export default {
  data() {
    return { count: 0 }
  },
  template: `<div>Count est égal à {{ count }}</div>`
}

// my-component.js
import { ref } from 'vue'
export default {
  setup() {
    const count = ref(0)
    return { count }
  },
  template: `<div>Count est égal à {{ count }}</div>`
}

Si vous tentez d'ouvrir le fichier index.html ci-dessus dans votre navigateur, vous trouverez des erreurs relevées parce que les modules ES ne peuvent fonctionner via le protocol file://, qui est le protocole utilisé par le navigateur lorsque vous ouvrez un fichier local.

Pour des raisons de sécurité, les modules ES ne peuvent fonctionner que sur le protocole http://, qui est celui que les navigateurs utilisent lors de l'ouverture de pages sur le Web. Pour que les modules ES fonctionnent sur notre machine locale, nous devons servir le index.html sur le protocole http://, avec un serveur HTTP local.

Pour démarrer un serveur HTTP local, installez d'abord Node.js, puis exécutez npx serve depuis la ligne de commande dans le même répertoire que votre fichier HTML. Vous pouvez également utiliser n'importe quel autre serveur HTTP qui peut servir des fichiers statiques avec les types MIME corrects.

Vous avez peut-être remarqué que le template du composant importé est souligné comme une chaîne JavaScript. Si vous utilisez VS Code, vous pouvez installer l'extension es6-string-html et préfixer les chaînes avec un commentaire /*html*/ pour obtenir la coloration syntaxique.

Étapes suivantes ​

Si vous avez raté l'Introduction, nous vous recommandons fortement d'en prendre connaissance avant de continuer sur la documentation.