Installer Vue.js 2 dans 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 composant /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 projet Laravel 8.x :

require('./bootstrap');

Dans ce guide, nous voulons voir deux méthodes pour télécharger, configurer et utiliser Vue js dans un projet Laravel en utilisant npm.

👉 Voir aussi : Installer Vue.js 3 dans Laravel

Méthode 1

Commençons par la méthode classique que je résume en trois étapes :

1. Télécharger Vue.js 2 dans Laravel

Avant de poursuivre, nous devons nous assurer d'avoir Node.js et Npm installés dans notre ordinateur. Nous pouvons vérifier qu'ils sont installés et accessibles à travers la console en exécutant les commandes npm -v et node -v pour voir leurs versions :

Nous pouvons obtenir la dernière version de Node.js et Npm en utilisant l’installeur officiel de Node.js pour les plateformes 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 package.json :

{
    "devDependencies": {
        "axios": "^0.21",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14"
    }
}

Pour les installer, on exécute la commande npm suivante pour les télécharger dans le répertoire /node_modules :

npm install

Comme il nous manque vue.js, nous pouvons l'installer (télécharger) en exécutant la commande npm suivante :

npm install vue

2. Compiler et intégrer Vue.js 2 dans 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
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 mix.vue() au fichier webpack.mix.js pour installer les dépendances requises pour le support de 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 webpack :

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 2 sur une vue (template blade)

Maintenant que nous avons les assets JavaScript compilés dans le fichier /public/js/app.js, nous pouvons l'inclure sur une vue (template Blade) pour utiliser de l’application Vue.

Voici une vue /resources/views/welcome.blade.php où on importe le fichier /public/js/app.js et on intègre le composant <mon-component> 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 dans le projet Laravel et pouvons l'utiliser aisément.

Méthode 2

La seconde méthode pour intégrer Vue.js dans un projet Laravel consiste à utiliser le package laravel/ui :

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 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.

Nous pouvons 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
• La seconde où nous nous sommes fait aidé avec le package laravel/ui qui génère les fichiers en exécutant les commandes artisan ui

A vous maintenant d'utiliser l'une de ces deux pour installer Vue dans Laravel. Avez-vous une autre astuce ? Partagez-le en commentaire.

Portez-vous bien ! 😇