• De Vue 2 à Vue 3 (composition API)

    Vue.js 3 arrive avec son lot de nouveautés, la plus importante étant la composition API, qui ouvre de nouveaux horizons en terme d'organisation du code et de ré-utilisabilité du code entre vos composants. Un must pour améliorer la productivité et la maintenance d'un projet Vue.

  • 📗 Pré-requis: avoir un niveau intermédiaire ou avancé sur Vue 2

    Durée de la formation: 3h à 4h

    💶 Tarifs:

    • Formation individuelle à distance par visio: 290€.
    • Prix de groupe: à discuter ensemble, me contacter (voir bas de page)

    PLAN

    📁 Créer son premier projet en Vue 3 ✨

    ✔️ Environnement de code: VS Code, Volar, Prettier

    ✔️ vue-create: le remplaçant de vue-cli

    ✔️ Découverte de Vite, le nouvel outil de build front-end ultra rapide ⚡

     

    👩‍💻 Exercice: créer sa première application Vue 3 et son premier composant avec defineComponent() et la méthode setup()

     

    📁 Une brève introduction à TypeScript

    ✔️ L'inférence de type: un fichier ts est un fichier js valide

    ✔️ Types primitifs, any

    ✔️ Création de types personnalisés (interfaces)

     

    📁 La composition API

    ✔️ Limites de l'option API

    ✔️ Pourquoi la composition API est une solution à ces limites

     

    👩‍💻 Pair-programming: créer un composant Counter avec la composition API et la méthode reactive

     

    ✔️ Tour d'horizon: variables réactives: ref et reactive

    ✔️ Mais heu, du coup, il faut utiliser ref ou reactive ? 🤔

     

    ✔️ Cycles de vie

    ✔️ methods, computed

    ✔️ watch: toute variable reactive est observable

    ✔️ Observer un objet entier

    ✔️ Observer un propriété d'un objet réactif

     

    👩‍💻 exercice: créer son premier composable useCounter()

     

    ✔️ Une syntaxe plus légère avec Script setup()

    ✔️ defineProps ( avec TypeScript et withDefaults() )

    ✔️ defineEmit

     

    👩‍💻 exercice: remplacer defineComponent et la méthode setup par script setup

    👩‍💻 exercice: Créer un appel API avec un composable useFetch

     

    ✔️ Découverte du site VueUse (useFetch, useAsyncState, useMouse etc)

    ✔️ Store: Partager un état entre plusieurs composant avec la Composition API

     

     

    Tous Les Articles
    ×