Installer Vue.js dans un projet Laravel

Introduction

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 :

1. Télécharger Vue.js dans un projet Laravel

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

2. Intégrer Vue.js dans un projet Laravel

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 :

1. Importons vue.js
2. Enregistrons un composant « MonComponent.vue » (Composant monofichier)
3. Initialisons Vue sur l’élement d'identifiant #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

3. Utiliser Vue.js sur une vue - template blade

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.

Installer Vue.js avec laravel/ui

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 :

• Création du fichier (composant Vue) /resources/js/components/ExampleComponent.vue
• Mise à jour des dépences (modules Node) au fichier package.json
• Création du fichier /resources/js/app.js où sont décrit l'importantion de vue.js, l'enregistrement du composant ExampleComponent.vue et l'instance de l'application Vue.

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

Conclusion

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 :

• La première en 3 étapes, un peu plus manuelle, où nous avons monté toute l'implémentation nous-même : fichiers, configurations, ... 
• La seconde où nous nous sommes fait aidé avec le package composer laravel/ui qui génère les fichiers en exécutant les commandes artisan ui

A vous maintenant de voir avec laquelle de deux méthodes vous vous sentirez plus agile.

Portez-vous bien !