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

Avatar de Benjamin Crozat.

Publié le par Benjamin Crozat

Temps de lecture estimé : 4 minutes

Les offres d'emploi requérant de l'expérience avec Vue.js sont légion. Apprenez-en les bases en installant la version 3 dans un projet Laravel 9.

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 !

4 commentaires

nolween.lopez@gmail.com
il y a 1 an

Hello,

Je pense que pour beaucoup de néophytes qui veulent introduire Vue à Laravel, il serait judicieux d'ajouter la procédure du début pour ne perdre personne (commande nouveau projet Laravel + commandes d'installation de Vue dans le projet). Je n'ai pas eu de soucis pour ma part mais cela pourrait aider certains 😀

Aussi peut être juste expliquer dans quel fichier ajouter l'id #app et le composant, que certains pourraient galérer à trouver!

En tout cas merci pour ton travail!

Benjamin Crozat
il y a 1 an

@nolween.lopez@gmail.com De rien !

Pour la création du nouveau projet, je l'ai volontairement omise. L'idée est que n'importe qui puisse, grâce à ce tuto, intégrer Vue dans son projet Laravel.

Vivs
il y a 1 an

Salut,

Merci pour ton tuto, j'essaye d'apprendre laravel et vue, en effet comme nolween l'a mentionné je me retrouve embêté ou mettre la div#app, je l'ai mise dans welcome.blade.php mais je n'ai aucun compteur, je suppose qu'il faut importer certaines choses mais je ne sais quoi. Merci

Benjamin Crozat
il y a 1 an

Salut Vivs ! Tu dois mettre ton div#app dans ta balise . Une fois que c'est fait, tu ne devrais plus avoir de soucis avec ça.

Besoin d'aide ? Envie de partager ?
Inscrivez-vous ou connectez-vous d'abord.

Ça vous a plu ?
Abonnez-vous à la newsletter !

Recevez régulièrement news, trucs et astuces à propos de Laravel et son ecosystème.

Autres articles à lire