Deux méthodes expliquées pour télécharger, intégrer, configurer et utiliser le framework JavaScript Vue.js dans un projet Laravel >= 6.x
Table des matières
Vue.js est un framework JavaScript open-source utilisé pour construire des interfaces utilisateur et des applications web monopages (SPA).
On le trouve intégré par défaut dans les projets Laravel de version < 6 tels qu'on peut le voir au fichier package.json de la version 5.8 :
{
... ,
},
"devDependencies": {
... ,
"vue": "^2.5.17"
}
}
Avec aussi le fichier (composant Vue) /resources/js/components/ExampleComponent.vue et le code source suivant au fichier /resources/js/app.js :
// Importation de vue.js
window.Vue = require('vue');
// Enregistrement du composant ExampleComponent.vue
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
// L'instance de l'application Vue
const app = new Vue({
el: '#app',
});
... Puis à partir de la version 6.x de Laravel, l'échafaudage de l'interface utilisateur (Bootstrap / Vue) a été extrait dans le package laravel/ui pour permettre à l'échafaudage de l'UI d'être développé et versionné séparément du framework principal.
A la suite de ces changements, aucun code Bootstrap / Vue n'est présent dans l'échafaudage par défaut comme on peut le voir au fichier /resources/js/app.js d'un nouveau projet Laravel 8.x :
require('./bootstrap');
Dans ce guide, nous allons voir deux méthodes pour télécharger, configurer et utiliser Vue.js dans un projet Laravel. Commençons par la méthode classique que je résume en trois étapes :
Avant de poursuivre, assurez-vous d'avoir Node.js et Npm installés dans votre ordinateur. Vous pouvez le vérifiez en exécutant les commandes npm -v
et node -v
pour voir leurs versions :
Vous pouvez obtenir la dernière version de Node.js et Npm en utilisant l’installeur officiel de Node.js pour votre plateforme (Windows, MacOS et Linux).
Dans un nouveau projet Laravel (je suis à la version 8.27.0), nous avons les dépendances (modules Node) suivantes au fichier packages.json :
{
// ... ,
"devDependencies": {
"axios": "^0.21",
"laravel-mix": "^6.0.6",
"lodash": "^4.17.19",
"postcss": "^8.1.14"
}
}
Pour les installer dans le projet, on exécute la commande npm suivante afin de les télécharger dans le répertoire /node_modules :
npm install
Comme il nous manque aussi vue.js, nous pouvons l'installer (télécharger) en exécutant la commande npm suivante :
npm install vue
Une fois vue.js téléchargé dans le répertoire /node_modules, nous pouvons l’intégrer dans le projet pour l’utiliser. Pour ce faire, éditons le fichier /resources/js/app.js de la manière suivante :
#app
Nous devons donc avoir le code suivant au fichier resources/js/app.js :
require('./bootstrap');
// 1. Importation de vue.js
import Vue from "vue"
// 2. Enregistrement du composant "MonComponent.vue"
Vue.component(
"mon-component",
require("./components/MonComponent.vue").default
)
// 3. L'instance de l'application Vue
const app = new Vue({
el : "#app"
});
Comme nous avons enregistré le composant Vue « MonComponent.vue », nous devons créer le fichier /resources/js/components/MonComponent.vue où décrire le template
, le style
et le script
:
<template>
<!-- Le template -->
<section class="container" >
<h1>Mon composant MonComponent.vue</h1>
<p>Clicks : <strong>{{ clicks }}</strong></p>
<button @click="ajouteClick" >clique sur moi</button>
</section>
</template>
<style>
/* le style */
.container {
max-width: 960px;
margin: 0 auto; padding: 40px;
text-align: center;
font-family: calibri, arial;
}
</style>
<script>
// Le script
export default {
name : "mon-component",
data () {
return {
clicks : 0
}
},
methods : {
// Incrémentation de "clicks"
ajouteClick () {
this.clicks++;
}
}
}
</script>
Nous devons aussi appeler la méthode vue()
après la méthode mix.js(...)
au fichier webpack.mix.js qui se trouve à la racine du projet pour que laravel-mix
installe automatiquement les pugins Babel pour le support des fichiers .vue de Vue.js :
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js').vue()
.postCss('resources/css/app.css', 'public/css', [
//
]);
Il ne reste plus qu’à exécuter la commande npm run
suivante pour compiler les fichiers JavaScript et CSS avec laravel-mix
:
npm run dev
Pour la production (version minifié des fichiers) :
npm run production
Le chemin du fichier JavaScript compilé est /public/js/app.js
Maintenant que nous avons le fichier JavaScript /public/js/app.js compilé avec laravel-mix, nous pouvons le référencer sur une vue (template Blade) du projet Laravel pour bénéficier de l’application Vue.
Voici une vue /resources/views/welcome.blade.php où j'importe le fichier /public/js/app.js et j'intègre le composant <mon-component>
sur la page dans l'élément <section>
d'identification #app
:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mon app. VueJs - Laravel</title>
</head>
<body>
<!-- L'élément #app -->
<section id="app" >
<!-- Le composant "MonComponent.vue" -->
<mon-component></mon-component>
</section>
<!-- Le script compilé /public/js/app.js -->
<script src="{{ asset('js/app.js') }}" ></script>
</body>
</html>
A ce niveau, nous avons terminé la mise en place du framework JavaScript Vue.js dans notre projet Laravel et nous pouvons l'utiliser aisément.
La seconde méthode pour intégrer Vue.js dans un projet Laravel est d'utiliser le package laravel/ui. Voyons ce qu'il nous reserve.
A partir de la version 6.x de Laravel, l'échafaudage Bootstrap / Vue a été extrait dans le package laravel/ui que nous pouvons installer dans un projet Laravel en exécutant la commande composer suivante :
composer require laravel/ui
Une fois le package laravel/ui installé dans le projet, nous pouvons installer l'échafaudage Vue.js en exécutant la commande Artisan ui suivante :
php artisan ui vue
Cette commande effectue les opérations suivantes :
Vous pouvez aussi ajouter l'échafaudage Bootstrap :
php artisan ui bootstrap
Il ne reste plus qu'à exécuter la commande npm pour télécharger les dépendances dans le répertoire /node_modules :
npm install
Puis compiler les fichiers CSS et JavaScript :
npm run dev
Nous avons vu dans ce guide deux méthodes pour mettre en place la bibliothèque JavaScript Vue.js dans un projet Laravel en utilisant les commandes npm :
A vous maintenant de voir avec laquelle de deux méthodes vous vous sentirez plus agile.
Portez-vous bien !
Cette publication vous a plu ?
Encouragez-nous en la partageant sur les réseaux sociaux
Passionné de l'informatique, je suis spécialiste en techniques des systèmes et réseaux, développeur web et mobile, Infographiste et designer, ... J'aime partager mon expérience en formant sur Akili School
Voir mon profil Suivre