Laravel, Vite et Vue.js : démarrez en 5 minutes chrono
Publié le par Benjamin Crozat
Temps de lecture estimé : 4 minutes
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 :
- Il doit récupérer le CSS et le JS dans le dossier resources ;
- Nous demandons ensuite de ne pas transformer les URLs d’assets divers que nous utiliserions dans un composant Vue (les images par exemple) ;
- 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')
- Importons la fonction
createApp()
et instancions Vue. - Faisons la même chose avec le composant Counter.vue.
- 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
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!
@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.
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
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.Inscrivez-vous ou connectez-vous d'abord.