Laravel, Vite et Vue.js : démarrez en 5 minutes chrono

Vue.js est un framework JavaScript de création d’interfaces utilisateur inspiré par la première version d’Angular et créé en 2014 par Evan You durant son salariat chez Google. En 2022, il est toujours maintenu par le créateur original ainsi que la communauté open source. Le dépôt Git est disponible sur GitHub.

Qu’est-ce que Vite ?

Vite est un outil d’empaquetage destiné aux développeurs JavaScript s’attaquant à des projets web modernes.

Dans le contexte d’un projet Laravel, il remplace Mix (une abstraction autour de Webpack), qui était utilisé depuis plusieurs années.

Installez Vue.js 3 et son plugin pour Vite

Tout d’abord, comme tout le monde doit s’en douter, nous devons explicitement installer Vue.js. On dit souvent que Laravel impose ce framework, mais il n’en est rien. Ce n’est qu’un choix populaire dans la communauté.

Ensuite, je recommande l’utilisation des Single-File Components. Le plugin Vite @vitejs/plugin-vue rend cela possible et nous allons voir à quoi ressemblent ces composants très bientôt.

npm i --save-dev @vitejs/plugin-vue vue

Configurez Vite

Créez un fichier vite.config.js et copiez/collez le code ci-dessous :

import { defineConfig } from 'vite'
import laravel from 'laravel-vite-plugin'
import vue from '@vitejs/plugin-vue'
 
export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
    resolve: {
        alias: {
            vue: 'vue/dist/vue.esm-bundler.js',
        },
    },
})

Pour résumer, nous demandons à Vite de s’adapter à notre projet Laravel en quelques étapes :

1. Il doit récupérer le CSS et le JS dans le dossier resources ;
2. Nous demandons ensuite de ne pas transformer les URLs d’assets divers que nous utiliserions dans un composant Vue (les images par exemple) ;
3. Enfin, lorsque nous appelons Vue dans notre JavaScript (avec import Vue from 'vue' par exemple), nous demandons à ce que le fichier node_modules/vue/dist/vue.esm-bundler.js soit utilisé.

Créez votre premier composant

Pour notre premier composant, nous allons faire quelque chose de très simple. Prenons le compteur disponible dans les exemples officiels et ajoutons-le à notre projet.

Créez le fichier resources/js/components/Counter.vue :

<script setup>
import { ref } from 'vue'
 
const count = ref(0)
</script>
 
<template>
    {{ count }}
 
    <button @click="count++">
        Count
    </button>
</template>

Configurez Vue.js 3

Créez le fichier resources/js/app.js :

import { createApp } from 'vue'
import Counter from './components/Counter.vue'
 
const app = createApp()
 
app.component('counter', Counter)
 
app.mount('#app')

1. Importons la fonction createApp() et instancions Vue.
2. Faisons la même chose avec le composant Counter.vue.
3. Enfin, montons l’app dans div#app.

Importez automatiquement vos composants

Il est possible d’importer automatiquement les composants se trouvant dans le dossier resources/js/components, ce qui nous évite d’avoir à répéter l’opération autant de fois qu’il y a de composants.

Changez votre fichier resources/js/app.js pour ceci :

-app.component('counter', Counter) 
+Object.entries(import.meta.globEager('./**/*.vue')).forEach(([path, definition]) => { 
+    app.component(path.split('/').pop().replace(/\.\w+$/, ''), definition.default) 
+}) 

Appelez votre composant

Après toutes ces étapes, nous sommes enfin aptes à utiliser notre magnifique composant de compteur. Appelez-le à l’intérieur de votre div#app (autrement, ça n’aura aucun effet) :

<div id="app">
    <Counter />
</div>

Compilez et rafraichissez automatiquement votre page

La force de Vite réside dans la compilation ultra rapide de votre JavaScript ainsi que l’actualisation automatique de votre page, le tout en exécutant une simple commande :

npm run dev

Utiliser Vue.js dans un projet Laravel n’est pas ce qu’il y a de plus simple. Mais nous sommes finalement arrivés au bout du tunnel et je suis certain que vous allez créer quelque chose d’exceptionnel grâce à ce petit tutoriel !