Authentification création de scaffolding Vue.js avec Vite

Nous allons apprendre à configurer un scaffolding d’authentification Vue.js avec Vite dans une application Laravel 11.

En programmation Laravel, le scaffolding est un mécanisme qui permet de générer automatiquement du code de base pour des fonctionnalités courantes d’une application web. Cela signifie que vous pouvez créer rapidement des contrôleurs, des modèles, des vues et des routes pour gérer des actions CRUD (Créer, Lire, Mettre à jour, Supprimer) sur vos données.

Pourquoi Utiliser le Scaffolding ?

• Gain de temps: Évitez d’écrire manuellement du code répétitif.
• Rapidité de développement: Mettez en place rapidement une structure de base pour votre application.
• Cohérence: Assurez une cohérence dans la structure de votre code.

Laravel propose un package UI pour faciliter la création de scaffolding d’authentification. Ce package fournit des fonctionnalités d’authentification simples comme la connexion, l’inscription, la réinitialisation de mot de passe, la vérification par email et la confirmation de mot de passe, en utilisant Bootstrap, React ou Vue.

Étapes pour configurer Vue.js et créer un scaffolding d’authentification dans Laravel 11

Installer Laravel 11
Installer Laravel UI
Configurer Vue.js avec Laravel UI
Exécuter les migrations
Lancer l’application Laravel

Étape 1 : Installer Laravel 11

composer create-project laravel/laravel example-app

Étape 2 : Installer Laravel UI

Installez le package Laravel UI avec la commande suivante :

composer require laravel/ui

Étape 3 : Configurer Vue.js avec Laravel UI

Pour configurer Vue.js avec le scaffolding d’authentification, utilisez l’une des commandes suivantes :

php artisan ui vue
  
OR
  
php artisan ui vue --auth

Ensuite, installez les dépendances npm :

npm install && npm run dev

Cela générera les fichiers CSS et JS nécessaires pour votre application.

Étape 4 : Exécuter les migrations

Exécutez les migrations pour configurer la base de données nécessaire à l’authentification :

php artisan migrate

Étape 5 : Lancer l’application Laravel

Une fois toutes les étapes nécessaires terminées, lancez l’application Laravel avec la commande suivante :

php artisan serve

Ouvrez votre navigateur web, entrez l’URL suivante et visualisez le résultat de l’application :

http://localhost:8000/

Vous verrez une interface avec les fonctionnalités de connexion, d’inscription et de réinitialisation de mot de passe déjà configurées.