Comment configurer et utiliser Vue 3 dans votre application Laravel 10

auteur: MOHAMED ANNAJAR

Add Your Heading Text Here

Partager l'article :

Dans les anciennes versions de Laravel, Vue était configuré automatiquement avec chaque nouvelle installation. Cependant, dans les versions plus récentes, vous devez le configurer vous-même. Dans ce guide simple, je vais vous montrer comment le faire en quelques étapes rapides et faciles.

Qu'est-ce que Laravel ?

Laravel est comme une boîte à outils puissante pour les développeurs web. C’est un framework écrit en PHP qui fournit une manière structurée de construire des applications web. Il est réputé pour son code propre et expressif, ce qui facilite la création d’applications web sans se perdre dans les détails techniques.

Qu'est-ce que Vue.js ?

Vue.js est comme la baguette magique des interfaces utilisateur web. C’est un framework JavaScript qui fonctionne parfaitement avec les technologies web standard telles que HTML, CSS et JavaScript. Vue simplifie le processus de création d’interfaces utilisateur, que vous créiez quelque chose de simple ou de complexe. Il est particulièrement populaire pour la création d’applications monopages (SPA) et fonctionne bien avec Laravel.

Qu'est-ce que Vite.js ?

Vite est comme un booster de vitesse pour le développement web. C’est un outil conçu pour accélérer et rendre plus efficace le développement de projets web modernes. Vite comporte deux parties principales : un serveur de développement qui apporte des fonctionnalités intéressantes comme un remplacement de module à chaud (HMR) rapide, et une commande de build qui regroupe votre code de manière optimisée pour la production. Il vous aide à mettre en route vos projets web rapidement et en douceur.

Créer un Nouveau Projet Laravel

Maintenant, commençons par la création d’un nouveau projet Laravel. Dans ce cas, nous allons l’appeler “laravel10vue3”.

Comment Installer Vue 3 sur Laravel 10

Maintenant, installons Vue 3.

Comment Installer Vite sur Laravel 10

Maintenant, installons Vite dans notre projet Laravel.

Installer le Plugin Vue depuis Vite

Après avoir installé Vue et Vite, nous devons installer le plugin Vue pour Vite.

Modifier le Fichier "vite.config.js"

Vous le trouverez à la racine de votre projet Laravel.

Modifier le Fichier "app.js" dans le Dossier "resources/js"

Modifions maintenant le fichier App.js

Créer le Fichier "app.blade.php" dans le Dossier "resources/layouts/views/"

Maintenant, assurez-vous d’ajouter les fichiers CSS et JavaScript comme indiqué, ainsi que la balise <div> avec l’ID “app”.

Créer le Fichier "App.vue" dans le Dossier "resources/js"

Créons maintenant notre premier composant.

Modifier le Fichier "web.php" dans le Dossier "routes"

Créons une route pour notre composant “App.vue”.

Exécuter le Serveur Local Node

Maintenant, exécutons le projet localement. Ouvrez votre ligne de commande, accédez au répertoire de votre projet :

Exécuter le Serveur Local PHP

Après avoir exécuté “php artisan serve”, copiez le lien : http://127.0.0.1:8000/ et accédez à votre projet Vue 3 et Laravel 10. C’est tout ! Profitez-en.

Bonjour, je suis Mohamed Annajar, un passionné de PHP, Laravel et Vue.js. Je me consacre au partage de mes connaissances et de mes expériences par le biais d’articles informatifs. Si vous avez apprécié cet article, un pouce en l’air me ferait très plaisir ! N’hésitez pas à m’envoyer un message ou un commentaire si vous avez des questions. Explorons ensemble la technologie ! 🚀✨