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.
Un mot sur l’API Options
Durant toute cette série, nous utiliserons ce qu’on appelle l’API Options de Vue. C’est la structure classique qui repose sur des blocs comme data(), methods, computed, watch, mounted, etc., tous regroupés dans un objet passé à createApp(). Ce modèle reste largement utilisé, car il offre une séparation claire entre les différents aspects d’un composant, et une prise en main très accessible pour structurer une interface.
Depuis Vue 3, une autre approche est apparue : la Composition API. Elle permet d’écrire les composants de façon plus flexible, avec des fonctions comme setup(), ref() ou watchEffect(), et convient bien aux projets complexes ou modulaires. Nous y reviendrons dans un article dédié, mais dans la série actuelle, nous continuons à explorer Vue à travers l’API Options, car elle reste idéale pour poser les bases sans complexifier inutilement le code.
À 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 |
| composition API | Oprion API vs Composition API | Vue.js – Composition API : pourquoi, quand, comment |
| modulaire | Découper son projet en modules | Organiser un projet Vue.js modulaire |
| 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.
Introduction aux Single File Components (SFC)
Vue.js permet d’organiser notre code de manière modulaire et maintenable grâce aux Single File Components (SFC). Un fichier .vue regroupe en un seul endroit toutes les parties essentielles d’un composant :
- le template,
- le script,
- et le style.
Cette approche simplifie le développement et la gestion des projets à grande échelle en facilitant la structuration, la réutilisation et la maintenance des composants.
Le template définit la structure HTML du composant, le script contient la logique JavaScript (données, méthodes, calculs), et le style permet de gérer l’apparence du composant, souvent en utilisant l’attribut scoped pour limiter les styles à ce composant spécifique. Cette séparation claire dans un fichier unique favorise une meilleure lisibilité du code et une gestion fluide de l’ensemble de l’interface, tout en optimisant la productivité, le débogage et la collaboration dans des projets complexes ou de grande taille. Voir Démystifier les fichiers .vue et les Single File Components.
Conclusion
Plonger dans Vue.js et comprendre le rôle de createApp() nous permet de poser les bases solides d’une application réactive et structurée. Ces concepts sont essentiels pour bâtir des interfaces dynamiques, évolutives, et faciles à maintenir. En comprenant comment chaque composant et chaque bloc de createApp() interagit avec l’interface et l’état de l’application, nous sommes en mesure de façonner des applications plus modulaires, cohérentes, et réactives.
À ce stade, la clé réside dans la maîtrise de la structure d’une application Vue.js. Cette compréhension ouvre la voie à des possibilités infinies de personnalisation et d’optimisation, selon les besoins de nos projets.
Alors, que faire après avoir compris createApp() ? C’est là que la magie opère. Les outils comme les Single File Components ou des méthodologies plus avancées, comme la gestion de l’état global ou l’utilisation du routeur, nous attendent pour enrichir encore nos applications. Le voyage avec Vue.js ne fait que commencer, et chaque étape nous rapproche d’une meilleure maîtrise de l’écosystème pour construire des applications à la fois performantes et élégantes.
