Cette formation Vue JS est destinée aux développeurs front-end et back-end désirant développer une application de A à Z avec Vue JS 3 et la composition API avec Pinia. A la fin de cette formation Vue JS 3, vous serez capable de développer une application dynamique interagissant avec une API côté back-end, afin que vos utilisateurs puissent s’inscrire, se connecter, mettre à jour leurs informations personnelles telles que leur email, mot de passe, photo de profil. Les utilisateurs pourront également poster des articles avec photo d’illustration, laisser des commentaires sur des articles, ajouter ou annuler un like sur un article, se déconnecter de leur compte ou tout simplement le supprimer. Nous commencerons cette formation en mettant en place un template pour notre application. Pour cela nous implémenterons des composants qui constituerons la structure de notre application. Nous ajouterons également les fichiers CSS, Javascript et les images permettant de constituer l’aspect graphique de l’application. Nous verrons également comment changer dynamiquement la balise title du layout. Nous créerons ensuite nos formulaires permettant aux utilisateurs de s’inscrire, se connecter, ainsi que les liens qui permettrons de naviguer depuis notre barre de navigation. Nous allons créer un composant de formulaire réutilisable, partie essentielle de Vue JS permettant d’éviter la répétition de code HTML. Nous verrons comment configurer Axios afin qu’il soit paramétré correctement pour faire des appels au back-end toujours dans un souci d’éviter la répétition de code. Nous commencerons, pour débuter notre communication avec l’API côté back-end, par implémenter l’inscription utilisateur. Nous analyserons les données renvoyées par le back-end, afin de récupérer et d’afficher les erreurs si jamais elles existent, ou en cas de réponse de succès du serveur nous connecterons notre utilisateur fraîchement inscrit. Nous utiliserons Pinia le store officiel de Vue JS 3 afin d’implémenter ce système d’inscription. Nous verrons également comment utiliser Vue Router depuis n’importe quel store Pinia. Nous mettrons en place un système de déconnexion utilisateur, ainsi qu’un système lui permettant de se connecter avec ses identifiants. Nous mettrons également en place des gardes de navigation qui permettrons de rediriger automatiquement l’utilisateur connecté à des pages accessibles uniquement s’il est connecté à son compte, ou tout simplement redirigé l’utilisateur invité s’il n’est pas autorisé à accéder à certaines pages. Nous verrons comment récupérer les postes (articles) depuis le serveur back-end grâce à Pinia, puis comment les afficher sur la page d’accueil avec le nombre de vues, de likes, la catégorie, ainsi que l’auteur pour chaque article. Nous afficherons la date de façon « human friendly » afin que nos visiteurs puissent consulter depuis combien de temps l’article à été posté. Nous créerons un composant qui permettra d’afficher chaque article dynamiquement. Nous

1. Formation
Vue JS 3
Créer une application de A à Z
Une formation
Fabien LE CORRE

2. Une formation
Plan de la formation
Introduction
1. Layout et thème de l’application
2. Inscription utilisateur
3. Connexion utilisateur
4. Déconnexion utilisateur
5. Traitement des erreurs
6. Gardes de navigation
7. Lister des posts avec Pinia
8. Récupérer un post

3. Une formation
Plan de la formation
9. Implémenter les commentaires
10. Implémenter un moteur de recherche
11. Implémenter les likes
12. Récupérer les posts par catégorie
13. Implémenter une dashboard
14. Utiliser Sweet Alert
15. Supprimer un post
16. Implémenter la suppression du compte utilisateur
17. Implémenter une modal de mise à jour d’un post
Conclusion

4. Une formation
Public concerné
Développeurs back-end ou front-end désirant
mettre en pratique leurs connaissances Vue.js
en développant une application de A à Z

5. Une formation
Connaissances requises
HTML/CSS
Javascript
Vue 3 et la composition API

6. Une formation
Connaissances requises

8. Présentation du Lab
Une formation
Fabien LE CORRE

9. Une formation
Présentation des outils
Visual Studio Code
Terminal, iTerm2, Hyper
NodeJS
NPM/Yarn

10. Découvrir le thème graphique
de l’application
Une formation
Fabien LE CORRE

11. Installer une application Vue 3
avec Vite
Une formation
Fabien LE CORRE

12. Importer les fichiers CSS,
Javascript et les images
Une formation
Fabien LE CORRE

13. Créer le composant de navigation
et le composant header
Une formation
Fabien LE CORRE

14. Afficher les images du layout
de base dans le header
Une formation
Fabien LE CORRE

15. Faire le scaffold de la page
d'accueil
Une formation
Fabien LE CORRE

16. Changer dynamiquement
la balise title du layout
Une formation
Fabien LE CORRE

17. Modifier le favicon
Une formation
Fabien LE CORRE

18. Créer la page register
Une formation
Fabien LE CORRE

19. Créer la page login
Une formation
Fabien LE CORRE

20. Ajouter les liens de connexion et
d’inscription dans la barre de navigation
Une formation
Fabien LE CORRE

21. Créer un composant
de formulaire réutilisable
Une formation
Fabien LE CORRE

22. Envoyer le formulaire
d'inscription au back-end
Une formation
Fabien LE CORRE

23. Analyser les données
renvoyées par le back-end
Une formation
Fabien LE CORRE

24. Implémenter un store
pour le user avec Pinia
Une formation
Fabien LE CORRE

25. Implémenter l'inscription
depuis le store avec Pinia
Une formation
Fabien LE CORRE

26. Afficher un menu
conditionnel
Une formation
Fabien LE CORRE

27. Se rediriger vers le Dashboard
après inscription
Une formation
Fabien LE CORRE

28. Récupérer les données
utilisateur sur le dashboard
Une formation
Fabien LE CORRE

29. Utiliser le router
dans n'importe quel store Pinia
Une formation
Fabien LE CORRE

30. Implémenter la déconnexion
Une formation
Fabien LE CORRE

31. Implémenter la connexion
Une formation
Fabien LE CORRE

32. Refactoriser le traitement
connexion/inscription
Une formation
Fabien LE CORRE

33. Créer un composant
pour les messages d'erreurs
Une formation
Fabien LE CORRE

34. Découvrir les gardes
de navigation dans vue router
Une formation
Fabien LE CORRE

35. Rediriger automatiquement
l'utilisateur connecté
Une formation
Fabien LE CORRE

36. Rediriger automatiquement
l'utilisateur invité
Une formation
Fabien LE CORRE

37. Implémenter le store post
avec Pinia
Une formation
Fabien LE CORRE

38. Récupérer les posts
depuis la home view
Une formation
Fabien LE CORRE

39. Afficher les posts
et leurs données
Une formation
Fabien LE CORRE

40. Afficher la date
avec moment.js
Une formation
Fabien LE CORRE

41. Créer et utiliser
un composant Post Card
Une formation
Fabien LE CORRE

42. Créer un lazy loading
sur les images avec Lazysizes
Une formation
Fabien LE CORRE

43. Implémenter une limite
d'affichage des posts
Une formation
Fabien LE CORRE

44. Récupérer et afficher
le nombre de posts
Une formation
Fabien LE CORRE

45. Afficher le titre de la page
Une formation
Fabien LE CORRE

46. Trier les posts
Une formation
Fabien LE CORRE

47. Créer la route et les liens
vers un post
Une formation
Fabien LE CORRE

48. Ajouter le titre du post
dans la balise title
Une formation
Fabien LE CORRE

49. Afficher les détails du post
sur la page
Une formation
Fabien LE CORRE

50. Ajouter un lien pour voir
l'image en taille réelle
Une formation
Fabien LE CORRE

51. Se rediriger vers une page 404
si la ressource n'est pas trouvée
Une formation
Fabien LE CORRE

52. Afficher le nombre
des commentaires du post
Une formation
Fabien LE CORRE

53. Afficher la liste
des commentaires du post
Une formation
Fabien LE CORRE

54. Créer un composant
Comment
Une formation
Fabien LE CORRE

55. Poster un commentaire
Une formation
Fabien LE CORRE

56. Afficher les erreurs
Une formation
Fabien LE CORRE

57. Implémenter la fonction
de recherche
Une formation
Fabien LE CORRE

58. Récupérer les résultats
de la recherche
Une formation
Fabien LE CORRE

59. Trier les résultats de recherche
Une formation
Fabien LE CORRE

60. Implémenter une fonction
pour liker
Une formation
Fabien LE CORRE

61. Utiliser emit
pour déclencher la fonction liker
Une formation
Fabien LE CORRE

62. Vérifier si un user a liké un post
Une formation
Fabien LE CORRE

63. Mettre à jour le nombre
de likes
Une formation
Fabien LE CORRE

64. Autoriser uniquement
les utilisateurs connectés à liker
Une formation
Fabien LE CORRE

65. Implémenter une fonction pour
récupérer les posts d'une catégorie
Une formation
Fabien LE CORRE

66. Implémenter une route
pour les posts par catégorie
Une formation
Fabien LE CORRE

67. Afficher les posts d'une catégorie
Une formation
Fabien LE CORRE

68. Ajouter le tri sur les posts
par catégorie
Une formation
Fabien LE CORRE

69. Créer la route et la view
pour le formulaire d'ajout
Une formation
Fabien LE CORRE

70. Implémenter le formulaire
pour ajouter un post
Une formation
Fabien LE CORRE

71. Récupérer les catégories
Une formation
Fabien LE CORRE

72. Implémenter une fonction
pour sauvegarder un post
Une formation
Fabien LE CORRE

73. Soumettre un nouveau post
Une formation
Fabien LE CORRE

74. Afficher une prévisualisation
de l'image
Une formation
Fabien LE CORRE

75. Implémenter une barre
de progression d'upload
Une formation
Fabien LE CORRE

76. Afficher les erreurs
de validation
Une formation
Fabien LE CORRE

77. Créer un formulaire de mise
à jour des informations
Une formation
Fabien LE CORRE

78. Peupler le formulaire
avec les données
Une formation
Fabien LE CORRE

79. Récupérer le fichier
de l'avatar à la sélection
Une formation
Fabien LE CORRE

80. Soumettre le formulaire
au serveur
Une formation
Fabien LE CORRE

81. Afficher les erreurs
du formulaire
Une formation
Fabien LE CORRE

82. Recharger la page
en cas de succès
Une formation
Fabien LE CORRE

83. Ajouter les infos utilisateur
dans le header
Une formation
Fabien LE CORRE

84. Créer la route et le formulaire
de mise à jour
Une formation
Fabien LE CORRE

85. Traiter l'envoi du formulaire
Une formation
Fabien LE CORRE

86. Afficher les erreurs
du formulaire
Une formation
Fabien LE CORRE

87. Découvrir Sweet Alert
Une formation
Fabien LE CORRE

88. Utiliser Sweet Alert pour afficher
un message de succès
Une formation
Fabien LE CORRE

89. Afficher les erreurs
avec Sweet Alert
Une formation
Fabien LE CORRE

90. Implémenter un bouton
de suppression
Une formation
Fabien LE CORRE

91. Implémenter la suppression
d'un post
Une formation
Fabien LE CORRE

92. Utiliser Sweet Alert
pour afficher le message de succès
Une formation
Fabien LE CORRE

93. Confirmer et annuler la suppression
d'un post avec Sweet Alert
Une formation
Fabien LE CORRE

94. Implémenter une fonction
de suppression de compte dans le store
Une formation
Fabien LE CORRE

95. Implémenter la suppression
du compte dans le composant
Une formation
Fabien LE CORRE

96. Implémenter une modal
avec le formulaire
Une formation
Fabien LE CORRE

97. Peupler le formulaire
Une formation
Fabien LE CORRE

98. Implémenter la fonction
de mise à jour
Une formation
Fabien LE CORRE

99. Traiter la réponse
de mise à jour
Une formation
Fabien LE CORRE

100. Traiter les erreurs
Une formation
Fabien LE CORRE

101. Conclusion
Une formation
Fabien LE CORRE

102. Une formation
Implémenter le layout de l’application
Implémenter l’espace utilisateur
Upload de photos
Mettre à jour le mot de passe utilisateur
Lister les postes, par catégorie
Charger plus de postes
Afficher, commenter, ajouter, mettre à jour un poste
Implémenter un moteur de recherche
Implémenter un système de likes
Utiliser Sweet Alert
Implémenter la suppression utilisateur
Bilan