4. Fichier main.js

Présentation

Le fichier main.js est un fichier central dans l’architecture d’un projet Vue.js. En temps que point d’entrée, il permet d’initialiser l’application, mais également d’importer des plugins Vue.js dans l’application.

Dans ce chapitre, nous allons détailler le rôle et le contenu de ce fichier.

Contenu par défaut

Lorsque vous créez un projet, votre fichier main.js ressemble à cela :

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

Analysons cela.

Le premier import permet de récupérer la fonction createApp depuis le framework Vue.js. C’est elle qui nous permettra d’initialiser la page principale au lancement de notre application. Le second import va justement récupérer le Single File Component qui contient les informations sur la page que nous souhaitons afficher dans notre application.

Enfin, le dernier bloc de fichier initialise notre application. Sa syntaxe peut vous paraître un peu déroutante, mais en réalité il effectue deux actions très simples, que l’on peut représenter aussi de cette façon :

const myApp = createApp(App)
myApp.mount('#app')

La fonction createApp initialise d’abord un nouvel objet gérant notre application Vue. Elle prend en argument la configuration de notre application, récupérée ici depuis un autre fichier *./App.vue*que nous verrons par la suite.

Une fois cet objet instancié, on appelle sa méthode mount() qui permet d’indiquer où placer notre page dans la structure HTML de notre site. Si vous vous rendez dans votre fichier *public/index.html*, vous verrez qu’il contient une balise avec l’id app . En indiquant cet identifiant à notre méthode, le framework identifie l’endroit où charger la page dans votre DOM.

Ces commandes suffisent à ce que le contenu défini de votre page ./App.vue soit correctement visible sur votre site.

Commandes supplémentaires

Importer des plugins

Le framework Vue.js présente la possibilité d’ajout de plugin. Ce système de plugins permet notamment d’alléger le contenu du framework de base, afin d’éviter d’inclure des fonctionnalités dont vous n’auriez pas besoin.

Parmi ces plugins, on retrouve notamment vue-router permettant de créer des applications multipages, et vuex permettant de créer des stores.

Pour ajouter un plugin, il vous suffit de l’importer et de l’ajouter à Vue de cette façon :

import { createApp } from 'vue'
import App from './App.vue'
import Plugin from 'my-plugin-module'

const myApp = createApp(App).mount('#app')
myApp.use(Plugin)

WARNING

Certains plugins demandent des configurations supplémentaires à effectuer avant d’ajouter le plugin à Vue. C’est le cas de vue-router par exemple.

Ajouter des variables globales

Il arrive, pour les besoins d’un module ou de notre projet, qu’il soit nécessaire d’avoir accès globalement à une donnée dans l’application. Il est pour cela possible de créer des variables globales accessibles dans l’ensemble de nos pages et composants de cette façon :

const myApp = createApp(App)
myApp.config.globalProperties.$myVar = globalVariable 
myApp.mount('#app')

Pour pouvez ensuite y accéder avec this.$myVar dans vos Single File Components. Par convention, ces variables sont préfixées d’un $ .

Attention, il est toujours recommandé de limiter au possible la portée de vos données dans votre application. Vous pouvez également utiliser des stores pour gérer plus proprement l’accès à des données plus transverses au sein de votre application. Ayez donc recours le moins possible à ces variables globales.

Conclusion

Vous disposez maintenant de toutes les informations nécessaires pour débuter le développement de votre application Vue.js.

Dans la partie suivante, nous allons voir comment implémenter les premières briques élémentaires de notre application grâce aux composants.

Aller plus loin

• Utilisation des plugins Vue.js : la documentation