Liker
Discuter
Partager
Offrir
Youtube

Installer Vue.js 2 dans Laravel

Mis à jour il y a 4 semaines

Deux méthodes expliquées pour télécharger VueJs 2 en utilisant npm, le compiler avec Laravel Mix puis l'intégrer pour l'utiliser dans un projet Laravel >= 6.x

Wilo Ahadi

Auteur

Wilo A.

Technologies

Laravel, Vue.js, JavaScript

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 :

Voir la version de Laravel, Npm et Node.js

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 ! 😇

Cette publication vous a plu ?
Encouragez-nous en la partageant sur les réseaux sociaux

Wilo Ahadi
Wilo Ahadi, l'auteur

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 la plateforme Akili School

Voir profil Suivre

Commentaires