Installez Vue.js 3 sur un projet Laravel en 5 minutes chrono

Avatar de Benjamin Crozat.

Publié le par Benjamin Crozat

Temps de lecture estimé : 3 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.

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

Explication du code en cours d’écriture…

Voici à quoi doit ressembler votre vite.config.js :

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',
},
},
})

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 mois

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 mois

@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 mois

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 3 semaines

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