Créer une application Vue #

L'instance de l'application #

Chaque application Vue commence par créer une nouvelle instance d'application avec la fonction createApp :

import { createApp } from 'vue'

const app = createApp({
  /* options du composant racine */
})

Le composant racine #

L'objet que nous passons dans createApp est en fait un composant. Chaque application nécessite un "composant racine" qui peut contenir d'autres composants en tant qu'enfants.

Si vous utilisez des composants monofichiers, nous importons généralement le composant racine à partir d'un autre fichier :

import { createApp } from 'vue'
// import du composant racine App à partir d'un composant monofichier.
import App from './App.vue'

const app = createApp(App)

Bien que de nombreux exemples de ce guide ne nécessitent qu'un seul composant, la plupart des applications réelles sont organisées en une arborescence de composants imbriqués et réutilisables. Par exemple, l'arborescence des composants d'une application Todo pourrait ressembler à ceci :

App (root component)
├─ TodoList
│  └─ TodoItem
│     ├─ TodoDeleteButton
│     └─ TodoEditButton
└─ TodoFooter
   ├─ TodoClearButton
   └─ TodoStatistics

Nous discuterons de la façon de définir et de composer plusieurs composants ensemble dans les sections ultérieures du guide. Avant cela, nous allons nous concentrer sur ce qui se passe à l'intérieur d'un seul composant.

Montage de l'application #

Une instance d'application n'affichera rien tant que sa méthode .mount() ne sera pas appelée. Il attend un argument "container", qui peut être soit un élément DOM réel, soit une chaîne de sélection :

<div id="app"></div>

app.mount('#app')

Le contenu du composant racine de l'application sera rendu à l'intérieur de l'élément de montage. L'élément de montage lui-même n'est pas considéré comme faisant partie de l'application.

La méthode .mount() doit toujours être appelée après les différentes configurations (de l'application et des ressources). Notez également que sa valeur de retour, contrairement aux méthodes d'enregistrement des ressources, est l'instance du composant racine au lieu de l'instance de l'application.

Template de composant racine depuis le DOM #

Lorsque vous utilisez Vue sans outils de construction, nous pouvons écrire le modèle de notre composant racine directement dans l'élément de montage :

<div id="app">
  <button @click="compteur++">{{ compteur }}</button>
</div>

import { createApp } from 'vue'

const app = createApp({
  data() {
    return {
      compteur: 0
    }
  }
})

app.mount('#app')

Vue utilisera automatiquement le contenu HTML du conteneur comme modèle si le composant racine n'a pas déjà une option template.

Configuration d'application #

L'instance d'application expose un objet .config qui nous permet de configurer quelques options au niveau de l'application, par exemple en définissant un gestionnaire d'erreurs au niveau de l'application qui capture les erreurs de tous les composants descendants :

app.config.errorHandler = (err) => {
  /* gérer l'erreur */
}

L'instance d'application fournit également quelques méthodes pour enregistrer les ressources propres à l'application. Par exemple, enregistrer un composant :

app.component('TodoDeleteButton', TodoDeleteButton)

Cela rend TodoDeleteButton disponible pour une utilisation n'importe où dans notre application. Nous discuterons de l'enregistrement des composants et d'autres types de ressources dans les sections ultérieures du guide. Vous pouvez également parcourir la liste complète des APIs concernant l'instance d'application dans sa référence API.

Assurez-vous d'appliquer toutes les configurations d'application avant de monter l'application !

Instances multiples d'une application #

Rien ne vous limite à n'avoir qu'une seule instance d'application sur la même page. L'API createApp permet à plusieurs applications Vue de coexister sur la même page, chacune avec sa propre portée pour la configuration et les ressources globales :

const app1 = createApp({
  /* ... */
})
app1.mount('#conteneur-1')

const app2 = createApp({
  /* ... */
})
app2.mount('#conteneur-2')

Si vous utilisez Vue pour améliorer l'HTML rendu par le serveur et que vous n'avez besoin de Vue que pour contrôler des parties spécifiques d'une grande page, évitez de monter une seule instance d'application Vue sur la page entière. Au lieu de cela, créez plusieurs petites instances d'application et montez-les sur les éléments dont elles sont responsables.