Plonger dans Vue.js : le rôle de createApp() et ses composants internes
Quand on découvre Vue.js, on commence souvent par quelques balises HTML enrichies d’une instruction {{ message }} ou d’un petit @click. Mais rapidement, une structure récurrente s’impose : Vue.createApp({ ... }). C’est là que tout commence. Cette fonction est le point de départ de chaque application Vue : elle sert à définir l’état initial de l’interface, les actions disponibles, les valeurs calculées, les composants utilisés et le comportement général du rendu.
Dans l’article Présentation et introduction à Vue.js, nous avons vu comment une page HTML pouvait devenir dynamique grâce à Vue.js : des données affichées en temps réel, des boutons qui interagissent sans recharger, des listes qui se filtrent à la volée. C’est ce fil rouge que nous poursuivons ici, en allant plus loin : comprendre ce que Vue fait en coulisses, et comment chaque bloc déclaré dans createApp() prend vie dans l’interface.
À quoi sert createApp() ?
createApp() sert à créer une instance d’application Vue. Concrètement, on y déclare tout ce que l’application doit savoir ou pouvoir faire : données, fonctions, calculs, composants, comportements au montage, etc. Vue lit ces instructions, initialise le système réactif, et connecte ces éléments à l’interface.
La structure de base ressemble à ceci :
const app = Vue.createApp({
data() { ... },
methods: { ... },
computed: { ... },
watch: { ... },
mounted() { ... },
components: { ... }
});
app.mount('#app');Sommaire : chaque bloc expliqué en détail
| Élément | Rôle principal | Accès à l’article dédié |
|---|---|---|
| data() | Déclare l’état initial de l’interface (valeurs réactives) | Comprendre data() dans Vue.js |
| methods | Définit les actions pouvant être déclenchées (clic, saisie…) | Comprendre methods dans Vue.js |
| computed | Calcule automatiquement des valeurs dérivées | Comprendre computed dans Vue.js |
| watch | Réagit à des changements de valeurs précises | Comprendre watch dans Vue.js |
| mounted() | Déclenche une action une fois l’interface prête | Comprendre mounted() dans Vue.js |
| components | Déclare des composants internes réutilisables | Comprendre components dans Vue.js |
| template | Permet de définir l’interface directement dans le script | Comprendre template dans Vue.js |
| provide / inject | Partage des données entre parent et enfants | Comprendre provide et inject dans Vue.js |
Et après createApp() ? Les méthodes disponibles sur l’application
Jusqu’ici, nous avons vu ce qu’on place dans createApp() : les blocs qui définissent l’état, les actions ou les composants de l’application. Mais une fois cet objet créé, il est aussi possible de lui appliquer certaines méthodes. Ces appels ne se font plus à l’intérieur de createApp, mais sur l’objet qu’il retourne — généralement stocké dans une constante comme app.
Ces méthodes permettent d’enrichir l’application avec des composants globaux, des plugins, des directives personnalisées, ou simplement de la monter dans le DOM.
Voici les principales fonctions disponibles sur une instance d’application Vue :
| Méthode | Rôle principal | Exemple d’usage | Accès à l’article dédié |
|---|---|---|---|
| app.mount() | Monte l’application sur un élément DOM | app.mount('#app') |
Comprendre app.mount() |
| app.use() | Ajoute un plugin à l’application | app.use(myPlugin) |
Comprendre app.use() |
| app.component() | Déclare un composant global réutilisable | app.component('MonComposant', def) |
Comprendre app.component() |
| app.directive() | Déclare une directive personnalisée | app.directive('focus', def) |
Comprendre app.directive() |
Ces méthodes ne sont pas toutes indispensables pour démarrer. Mais dès qu’un projet devient un peu plus structuré, elles deviennent essentielles. C’est avec elles que l’on organise les composants, que l’on intègre un routeur ou une gestion centralisée d’état, ou que l’on applique des règles personnalisées à l’interface.
Pourquoi découper ces blocs dans des articles séparés ?
Chaque bloc de createApp joue un rôle bien distinct. Pour les comprendre en profondeur, il faut pouvoir :
- Les introduire avec un exemple simple,
- Les voir à l’œuvre dans un projet concret,
- Explorer leurs cas particuliers ou limitations.
C’est pourquoi nous avons choisi de leur consacrer des articles indépendants, accessibles depuis ce sommaire. Vous pouvez les lire dans l’ordre, ou naviguer selon vos besoins.