Vue JS 3 par la pratique : Le cours ultime TOUT en 1 !

Bienvenue dans ce guide tout en 1 sur Vue JS !

Il s'agit d'une formation complète qui va vous permettre d'apprendre à utiliser Vue et son écosystème au travers de nombreux projets.

La difficulté sera croissante. Nous allons commencer par toutes les notions de base pour passer progressivement à des sujets plus poussés. Vous apprendrez par la pratique et je vous proposerai des projets variés.

L'objectif de ce cours est de vous permettre d'apprendre tout ce qui vous sera utile pour lancer votre carrière avec Vue JS. je vous présenterai les bonnes pratiques ainsi que tout ce qui est recherché dans le monde professionnel.

Dans les grandes lignes, la formation est découpée comme cela :

1. Les bases de Vue JS

   Ici on va apprendre à utiliser Vue JS. Nous verrons comment créer un projet, comment utiliser Vue et quelles sont les principales fonctionnalités offertes par ce Framework. Cette section vous apportera toutes les notions fondamentales.
   

2. Le portfolio (projet)

   La on va concrètement mettre en pratique nos connaissances en développant un portfolio complet avec Vue. Le but est d'utiliser Vue pour développer votre site personnel. Il s'agit du premier projet concret. Comme promis, on va beaucoup pratiquer.
   

3. Le jeu du Nonogram / Picross (projet)

   On continue de pratiquer et on va développer un générateur de grilles / puzzles de Nonogrammes. Je profiterai de cet atelier pour vous montrer une autre façon de coder avec Vue JS (sur le net, plusieurs syntaxes existent, ici je vous présente toutes les syntaxes). Regardez sur le net si vous ne savez pas ce qu'est le jeu du Nonogram / Picross.
   

4. Le Dashboard Vuetify (projet)

   Vuetify est un Framework basé sur Vue JS qui vous permet de créer facilement et rapidement des interfaces web conviviales et responsives. C'est un super outil que je vous présente au travers d'un projet : Un tableau de bord pour visualiser des données financières.
   

5. Vue Router

   Vue Router est l'outil officiel qui permet de mettre en place un site multi-pages avec un système de navigation entre les pages. Je vous présente cela dans cette section.
   

6. Pinia

   Pinia est l'outil officiel qui va vous permettre de mettre en place un store dans votre application Vue. Le store permet de stocker, récupérer, modifier, agir sur des données accessibles dans toute l'application. C'est un espace partagé.
   

7. Nuxt JS

   Nuxt est probablement l'outil préféré des développeurs Vue JS. En gros c'est un Framework qui va vous permettre de faire beaucoup plus de choses en écrivant beaucoup moins de code. C'est ultra plaisant à utiliser et ça devient vite indispensable. On découvre Nuxt ici.
   

8. Le site d'actus (projet)

   Ici on va développer un site web avec Nuxt et le Framework CSS Bootstrap. Il s'agira d'un site qui va lister les actualités un peu comme Google News. Cela sera l'occasion d'utiliser Nuxt dans un projet concret et d'intégrer Bootstrap. On appellera une API REST qui nous livrera les news à afficher.
   

9. Les tests unitaires avec Vitest

   Écrire des tests unitaires est indispensable en entreprise. C'est une bonne pratique très recherchée. Cela prouve que vous savez créer des applications testées et robustes. On va découvrir Vitest, l'outil officiel pour mettre en place des tests unitaires avec Vue JS.
   

10. Les tests E2E avec Cypress

    Les tests e2e sont, comme les tests unitaires, indispensables pour créer une application robuste. Le but est de tester l'application comme si un utilisateur cliquait sur l'interface. On va tester des scénarios d'utilisation et vérifier que le comportement de l'application est bon.
    

11. Le super projet : Une application de gestion complète (partie 1 - API)

    On va coder une interface de gestion complète. Un vrai outil que vous pourrez adapter. Dans cette première partie, on va créer une API REST simple qui fournira les données à notre application.
    

12. Le super projet : Une application de gestion complète (partie 2 - WebApp)

    Dans cette seconde partie, nous allons concrètement développer notre application de gestion avec Vue JS. Nous allons interagir avec l'API pour récupérer et modifier les données.
    

13. Le super projet : Une application de gestion complète (partie 3 - IA)

    Dans cette partie 3, nous allons mettre en place l'IA générative dans notre application. En effet, grâce à l'intelligence artificielle, on pourra analyser et synthétiser les données présentes dans notre app. L'IA sera accessible sous la forme d'un ChatBot directement dans notre application Vue JS.
    

14. Interagir avec une API GraphQL

    GraphQL permet de résoudre certaines problématiques que REST ne peut pas résoudre. GraphQL permet de créer des applications plus optimisées et plus légères. Communiquer avec une API GraphQL c'est pas tout à fait pareil que REST et nous allons voir comment utiliser Apollo avec Vue pour récupérer des données depuis un endpoint GraphQL. Pour l'exemple, on accèdera à l'API publique de Space X.

Vue récupère le meilleur de React + Angular et propose le tout sous une forme très simple d'utilisation et intuitive.

En résumé, vous allez apprendre à utiliser : Vue, JavaScript, TypeScript, Vuetify, Vue Router, Pinia, Nuxt, Vitest, Cypress, REST API, GraphQL, l'IA générative (Llama / Mistral / ChatGPT). On va créer pas mal de petits projets et on va créer un gros projet pour finir en beauté.