Alphorm.com Formation Vue JS 3 : Exploiter la Composition API
Cette formation Vue JS est destinée aux développeurs front-end et back-end désirant découvrir la composition API de Vue 3. A la fin de cette formation Vue JS 3, vous serez capable de développer des applications web Vue JS avec la composition API. Vous saurez également maîtriser les composables, utiliser VueUse, développer une application en vous servant de Firebase et Firestore pour disposer d’une base de données temps réel et d’utiliser le store Pinia que nous découvrirons lors de cette formation. La composition API vient en ajout de l’option API déjà étudiée lors de la formation Vue JS 3 Maîtriser les bases. Cette nouvelle API apporte de nombreux avantages que nous découvrirons lors de cette formation. Nous découvrirons la réactivité, d’abord sur les données primitives, puis sur les objets plus complexes. Nous verrons comment vérifier si une valeur ou un objet est réactif, comment empêcher la mutation d’un objet réactif et vérifier si un objet est en lecture seule. Nous découvrirons également l’outil Vite, qui comme son nom l’indique nous permettra de développer plus vite et de créer des application Vue JS en un éclair. Nous verrons aussi comment fonctionne le router sous la composition API. Nous verrons comment créer et utiliser des directives personnalisées, comme celle présente par défaut dans Vue JS comme v-if ou v-model. Computed et Watch seront également de la partie, nous verrons comment utiliser les propriétés calculées avec la composition API de Vue 3. Comment utiliser Emit avec la composition API ? C’est ce que nous aborderons également dans cette formation. Nous créerons nos propres composants et nous verrons comment les afficher dynamiquement. Nous verrons également comment utiliser KeepAlive afin de garder nos composant en vie. Nous verrons comment définir et transmettre des props entre composants et comment les assigner de manière dynamique. La paire Provide/Inject sera également au programme, nous verrons comment fournir des données à des composant descendant sans utiliser de props. Les composables sont une fonctionnalité incontournable de la composition API. Ils nous facilitent la vie, nous permettent de mettre en place des fonctionnalités très rapidement. Nous verrons donc comment créer nos propres composables, comment les utiliser et les rendre réutilisables. Nous découvrirons VueUse, véritable usine à composables, nous rendant possible en quelques lignes de codes d’implémenter des fonctionnalités variées telles que la vérification de la connexion, ou encore de passer du mode clair au mode sombre en un clic. Nous découvrirons et utiliserons Pinia, le nouveau store officiel de Vue qui vient remplacer Vuex et qui nous permettra de développer une petite application de gestion de projets tout en gardant nos données disponibles depuis tous les composants de l’application. Nous utiliserons les 3 concepts de Pinia, le state, les getters et les actions.
Recommandé
Contenu connexe
Tendances
Tendances (20)
Similaire à Alphorm.com Formation Vue JS 3 : Exploiter la Composition API
Similaire à Alphorm.com Formation Vue JS 3 : Exploiter la Composition API (20)
Plus de Alphorm
Plus de Alphorm (20)
Alphorm.com Formation Vue JS 3 : Exploiter la Composition API
- 1. Formation Vue JS 3 Exploiter la Composition API Une formation Fabien LE CORRE
- 2. Une formation Plan de la formation Introduction 1. Découverte de la composition API 2. La réactivité avec la composition API 3. Vite.js pour aller plus vite 4. Custom directives 5. Computed et Watch avec la composition API 6. Vue Router avec la composition API 7. Teleport pour téléporter les éléments 8. Emit avec la composition API 9. Les props avec la composition API 10. Provide / Inject 11. Les composables 12. Vue Use 13. Pinia 14. Firebase / Firestore Conclusion
- 3. Une formation Public concerné Développeurs ayant des bases de Vue JS et désireux de découvrir les formidables possibilités offertes par la composition API de Vue JS 3
- 4. Une formation Connaissances requises HTML/CSS Javascript Des bases en Vue JS
- 6. Présentation du projet Une formation Fabien LE CORRE
- 7. Une formation Présentation des outils VsCode Terminal / iTerm / Hyper NodeJS NPM / Yarn Vue dev tool
- 8. Découvrir la composition API Vue.js 3 Une formation Fabien LE CORRE
- 9. Une formation La Composition API C'est un nouveau moyen d'écrire des composants Vue, apparu avec Vue 3 et c'est une alternative à l'option API que nous avons utilisée dans la première formation
- 10. Une formation Mon code est obsolète ? Non! La composition API a été pensée pour être un ajout qui fonctionnera en plus de l'option API De plus les concepts que vous connaissez déjà avec l'option API reste les mêmes avec la composition API
- 11. Une formation Les avantages Un code plus propre, plus facile à lire et à maintenir On va pouvoir également réutiliser du code plus facilement Cela peut s'avérer vraiment utile sur une application avec des centaines de composants
- 12. Implémenter une fonctionnalité avec l'API option Une formation Fabien LE CORRE
- 13. Convertir une fonctionnalité avec la composition API Une formation Fabien LE CORRE
- 14. Simplifier les composants avec script setup Une formation Fabien LE CORRE
- 15. Découvrir les cycles de vie avec la composition API Une formation Fabien LE CORRE
- 16. Implémenter la réactivité sur les data primitives avec Ref Une formation Fabien LE CORRE
- 17. Implémenter la réactivité avec Reactive Une formation Fabien LE CORRE
- 18. Vérifier si une valeur est réactive avec isRef Une formation Fabien LE CORRE
- 19. Vérifier si un objet est réactif avec isReactive Une formation Fabien LE CORRE
- 20. Empêcher la mutation d'un objet réactif avec readonly Une formation Fabien LE CORRE
- 21. Vérifier si un objet est en lecture seule avec isReadonly Une formation Fabien LE CORRE
- 22. Découvrir les Refs de Template Une formation Fabien LE CORRE
- 23. Créer une Ref sur une propriété d'un objet réactif avec toRef Une formation Fabien LE CORRE
- 24. Déstructurer un objet réactif avec toRefs Une formation Fabien LE CORRE
- 25. Afficher un objet réactif en brut avec toRaw Une formation Fabien LE CORRE
- 26. Découvrir Vite.js Une formation Fabien LE CORRE
- 27. Installer une application avec Vite Une formation Fabien LE CORRE
- 28. Découvrir la structure de l'application Une formation Fabien LE CORRE
- 29. Ajouter une route au router Une formation Fabien LE CORRE
- 30. Implémenter une custom directive locale avec la composition API Une formation Fabien LE CORRE
- 31. Implémenter une custom directive locale avec argument Une formation Fabien LE CORRE
- 32. Implémenter une custom directive globale avec la composition API Une formation Fabien LE CORRE
- 33. Implémenter une custom directive globale avec argument Une formation Fabien LE CORRE
- 34. Créer un compteur de caractère avec Computed Une formation Fabien LE CORRE
- 35. Détecter si le compteur dépasse une limite avec Watch Une formation Fabien LE CORRE
- 36. Créer une route et une view pour lister des articles Une formation Fabien LE CORRE
- 37. Récupérer l'ID d'un article dans l'URL avec Vue Router et la composition API Une formation Fabien LE CORRE
- 38. Accéder aux paramètres de routes dans script setup avec le composable useRoute Une formation Fabien LE CORRE
- 39. Utiliser le composable useRouter pour rediriger Une formation Fabien LE CORRE
- 40. Découvrir Teleport Une formation Fabien LE CORRE
- 41. Téléporter un élément avec Teleport Une formation Fabien LE CORRE
- 42. Utiliser Teleport pour afficher une notification Une formation Fabien LE CORRE
- 43. Utiliser Teleport dans un composant enfant Une formation Fabien LE CORRE
- 44. Utiliser emit avec la composition API Une formation Fabien LE CORRE
- 45. Créer nos composants Une formation Fabien LE CORRE
- 46. Afficher nos composants dynamiquement Une formation Fabien LE CORRE
- 47. Garder en vie un composant inactif avec KeepAlive Une formation Fabien LE CORRE
- 48. Définir et transmettre une props Une formation Fabien LE CORRE
- 49. Assigner des props de manière dynamique Une formation Fabien LE CORRE
- 50. Utiliser les props dynamiques dans une boucle v-for Une formation Fabien LE CORRE
- 51. Fournir les data au composant enfant avec provide Une formation Fabien LE CORRE
- 52. Utiliser les data avec inject Une formation Fabien LE CORRE
- 53. Découvrir les composables Une formation Fabien LE CORRE
- 54. Créer un composable Une formation Fabien LE CORRE
- 55. Utiliser un composable Une formation Fabien LE CORRE
- 56. Réutiliser un composable Une formation Fabien LE CORRE
- 57. Découvrir VueUse Une formation Fabien LE CORRE
- 58. Utiliser VueUse avec Vue 3 Une formation Fabien LE CORRE
- 59. Binder automatiquement avec le composant sans rendu Une formation Fabien LE CORRE
- 60. Présentation du projet et de Pinia Une formation Fabien LE CORRE
- 61. Installer une application avec Pinia Une formation Fabien LE CORRE
- 62. Installer et importer Bootstrap et Boostrap Icons Une formation Fabien LE CORRE
- 63. Intégrer le template à l'application Une formation Fabien LE CORRE
- 64. Découper l'application en composants Une formation Fabien LE CORRE
- 65. Créer et définir un State Une formation Fabien LE CORRE
- 66. Utiliser le State dans un composant Une formation Fabien LE CORRE
- 67. Utiliser les getters avec Pinia Une formation Fabien LE CORRE
- 68. Lister les projets du state Une formation Fabien LE CORRE
- 69. Utiliser les actions pour supprimer Une formation Fabien LE CORRE
- 70. Utiliser Vue UUID Une formation Fabien LE CORRE
- 71. Valider le formulaire et afficher les erreurs Une formation Fabien LE CORRE
- 72. Découvrir Firebase et Firestore Une formation Fabien LE CORRE
- 73. Créer un nouveau projet Firebase Une formation Fabien LE CORRE
- 74. Créer et installer une nouvelle application Une formation Fabien LE CORRE
- 75. Créer une base de données Firestore en mode test Une formation Fabien LE CORRE
- 76. Ajouter une nouvelle collection Une formation Fabien LE CORRE
- 77. Connecter la base de données à notre application Une formation Fabien LE CORRE
- 78. Récupérer les données depuis la base Firestore Une formation Fabien LE CORRE
- 79. Implémenter le temps réel avec la base de données Une formation Fabien LE CORRE
- 80. Ajouter des données à la base Firestore Une formation Fabien LE CORRE
- 81. Supprimer des données de la base Firestore Une formation Fabien LE CORRE
- 82. Mettre à jour des données de la base Firestore Une formation Fabien LE CORRE
- 83. Conclusion Une formation Fabien LE CORRE
- 84. Une formation Découverte de la composition API La réactivité Aller plus vite avec Vite! Custom directives Computed et Watch Vue Router avec la composition API Teleport : téléporter les éléments Emit avec la composition API Les composants dynamiques Les props avec la composition API Provide et Inject Les composables Vue Use Pinia Firebase / Firestore Bilan