Apprendre Vue: Cours Code
Apprendre Vue: Cours Code — Apprenez Vue.js en créant des composants sur votre téléphone
Apprendre Vue: Cours Code est une application iOS et Android gratuite au départ qui enseigne Vue.js aux débutants connaissant un peu HTML et JavaScript, ainsi qu’aux développeurs qui passent de l’Options API à la Composition API. Elle propose 42 cours et 156 leçons, de votre premier template à Pinia, Vue Router et Nuxt 3. Les composants à fichier unique sont compilés sur votre appareil : les 20 projets guidés, les missions et le Vue Lab fonctionnent donc sans serveur.
- Prix
- Gratuite, mise à niveau Pro
- Plateformes
- iOS et Android
- Langues
- 22
- Âge recommandé
- 4+
- Version
- 82.6.0
- Configuration requise
- iOS 15.1 ou version ultérieure
- App Store
- 3.0 ★ (2)
On comprend mieux un composant après en avoir réparé un.
Chaque jour, le Vue Lab vous propose un composant défectueux et vous demande d’en trouver le bug. Il vous permet aussi de modifier les props d’un composant à l’aide de contrôles interactifs et montre comment l’état évolue lorsque vous cliquez. Les composants à fichier unique sont compilés sur le téléphone : l’aperçu tombe en panne puis se répare sous vos yeux, avec une carte d’erreur qui explique ce qui s’est passé.
Ce que c’est
Apprendre Vue: Cours Code est une application iOS et Android gratuite qui enseigne Vue.js à travers 42 cours et 156 leçons, de la syntaxe des templates et de la liaison de données à la Composition API, Pinia, Vue Router et TypeScript, jusqu’à Nuxt 3, aux tests avec Vitest et aux applications full-stack. Les composants à fichier unique sont compilés sur l’appareil : les projets guidés, les missions de programmation et le Vue Lab fonctionnent sur le téléphone sans serveur, tandis qu’un mentor IA dans Pro explique le code et les erreurs.
Dans l’application
À quoi elle ressemble
Le cours
Ce que couvre le cours Vue
42 cours et 156 leçons issus de la liste de cours de l’application, du premier template au rendu côté serveur et aux architectures de production.
Premiers pas avec Vue.js
Introduction à Vue.js, à Vue CLI et à la structure des projets, syntaxe des templates et liaison de données.
Réactivité et Composition API
Bases de la Composition API de Vue 3, syntaxe script setup, réactivité et propriétés computed, ainsi que les directives Vue.
Composants et formulaires
Bases des composants et communication entre composants, slots, provide et inject, formulaires et validation, ainsi que cycle de vie des composants.
Réutilisation et finition
Composables de Vue 3, transitions et animations, gestion des erreurs, ainsi que fonctions de rendu et JSX.
État et routage
Gestion de l’état avec Pinia, Vuex, routage avec Vue Router et patterns de routage avancés, ainsi que gestion des API et des données asynchrones.
TypeScript, i18n et outils
TypeScript avec Vue 3, internationalisation, intégration de Storybook, déploiement et maintenance des applications Vue.
Nuxt 3, tests et temps réel
Rendu côté serveur avec Nuxt 3, tests de composants avec Vitest, GraphQL avec Apollo et applications en temps réel avec WebSockets.
Architectures de production
Performances, bonnes pratiques de sécurité, développement de plugins, publication d’une bibliothèque de composants, applications web progressives et micro-frontends.
Fonctionnement
Comment apprendre Vue avec l’application
Chaque cours est associé à un niveau et chaque leçon suivant le premier cours gratuit commence par un aperçu gratuit. Vous pouvez ainsi voir à quoi ressemble un sujet avant de décider d’aller plus loin.
Commencez par Introduction to Vue.js
Le premier cours est gratuit. Il commence par une présentation de Vue, la configuration de l’environnement et la création d’une application Hello Vue. Les cours sont classés de A1 à C1 : vous savez ainsi clairement par où commencer et quelle sera la suite.
Créez et exécutez des composants sur votre téléphone
Modifiez un composant à fichier unique et prévisualisez-le immédiatement. Les projets guidés permettent de développer une application étape par étape, tandis qu’App Studio vous permet de créer des applications à plusieurs écrans avec un routeur et un store à partir de modèles prêts à l’emploi.
Entraînez-vous dans le Vue Lab
Trouvez le bug du jour, reproduisez un design cible dans Style Lab, affrontez le chronomètre lors de duels de création rapide ou réécrivez un composant Options API avec le style Composition.
Contenu
Ce que contient l’application
42
Cours, 156 leçons
De la syntaxe des templates et des directives au cycle de vie, aux slots, à provide et inject et aux composables, jusqu’à Nuxt 3, GraphQL, aux PWA et aux micro-frontends.
20
Projets guidés
Développez une application étape par étape avec des composants à fichier unique compilés directement sur votre appareil et une carte d’erreur lorsque l’aperçu ne fonctionne plus.
28
Missions de programmation
Des exercices de difficulté progressive, ainsi que des modèles App Studio pour créer des applications à plusieurs écrans avec un routeur et un store.
Lab
Vue Lab
Un inspecteur de réactivité, une chasse au bug quotidienne, 12 niveaux de Style Lab, des duels de création rapide, un dojo pour passer de l’Options API à la Composition API et une bibliothèque My Components que vous pouvez partager sous forme de carte-image.
Entretien
Questions d’entretien sur Vue
Des questions pour les entretiens de développeur front-end, avec des quiz, des sessions de révision par cartes mémoire et une fiche récapitulative accessible à tout moment.
IA
Mentor IA (Pro)
Posez une question sur un concept ou une erreur, faites-vous expliquer votre code ou générez une leçon personnalisée sur le sujet de votre choix.
Contexte
Qu’est-ce que Vue.js et que faut-il apprendre en premier quand on débute ?
Vue est un framework JavaScript qui sert à créer des interfaces web interactives à partir de composants : de petits éléments réutilisables qui gèrent chacun une partie du template, de la logique et du style. Vue séduit les débutants grâce à une prise en main progressive : vous pouvez commencer avec du HTML simple et un peu de JavaScript, puis ajouter de la structure au fil de votre apprentissage. Un ordre logique consiste à commencer par les templates et la liaison de données, puis la réactivité et les composants, ensuite la Composition API, et enfin le routage, la gestion d’état et le rendu côté serveur.
Réactivitél’idée centrale
Vous modifiez une donnée et l’écran qui en dépend se met à jour tout seul. Comprendre quelles valeurs sont réactives et ce qu’apportent les propriétés calculées et les watchers permet d’éliminer la plupart des confusions des débuts avec Vue.
Options API et Composition APIdeux façons d’écrire un composant
L’ancienne Options API regroupe le code par type, par exemple les données et les méthodes. Avec la Composition API et script setup, le code est regroupé par fonctionnalité et la création de composables réutilisables devient simple. De nombreux tutoriels et projets utilisent encore les deux, alors savoir lire l’une comme l’autre est une compétence utile.
Pinia, Vuex et le routeurce qu’ajoute une vraie application
Lorsqu’une application comporte plusieurs écrans, elle a besoin du routage pour passer de l’un à l’autre et d’un store partagé pour les données utilisées par plusieurs composants. Pinia est le store actuel de Vue, tandis que Vuex est le précédent, encore présent dans de nombreux projets existants.
Nuxt et le rendu côté serveurquand la recherche et la rapidité comptent
Nuxt s’appuie sur Vue pour effectuer le rendu des pages sur le serveur, ce qui accélère le premier chargement et améliore la visibilité dans les moteurs de recherche. C’est généralement un sujet de deuxième étape, à aborder une fois que les composants, le routage et l’état sont bien maîtrisés.
Pour qui
À qui elle s’adresse — et à qui elle ne s’adresse pas
Cette application vous convient si vous
- Vous connaissez un peu HTML et JavaScript et souhaitez découvrir un premier framework
- Vous passez de l’Options API à la Composition API, ou de Vuex à Pinia
- Vous préparez un entretien pour un poste de développeur Vue.js ou un premier emploi en front-end
- Vous apprenez mieux en corrigeant un composant défectueux qu’en lisant des explications
- Vous souhaitez des sessions courtes à suivre pendant vos trajets
Ce n’est pas le bon outil si vous
- Vous n’avez jamais vu HTML ni JavaScript — commencez d’abord par un cours de JavaScript
- Vous voulez publier une application de production depuis votre téléphone — un ordinateur portable reste toutefois nécessaire pour cela
- Vous vous attendez à ce que tout soit gratuit : le premier cours et les aperçus sont gratuits, tandis que Pro débloque l’intégralité du programme
- Vous recherchez du contenu officiel sur Vue.js — il s’agit d’une application d’apprentissage indépendante
Questions
Foire aux questions
Quelle est la meilleure façon d’apprendre Vue.js sur un téléphone ?
Apprenez en exécutant des composants plutôt qu’en vous contentant de les lire. Apprendre Vue: Cours Code compile les composants single-file directement sur l’appareil : ses 20 projets guidés, ses 28 missions et son Vue Lab fonctionnent donc tous sur le téléphone. De courtes leçons réparties sur 42 cours vous font progresser de la syntaxe des templates jusqu’à Nuxt 3, avec un premier cours gratuit pour commencer.
L’application enseigne-t-elle la Composition API et Pinia ?
Oui. Apprendre Vue: Cours Code propose des cours sur les bases de la Composition API de Vue 3, la syntaxe script setup, les composables et la gestion de l’état avec Pinia, ainsi que sur l’ancien Vuex pour les projets existants. Un dojo Options to Composition API dans le Vue Lab vous permet de réécrire des composants classiques selon le style moderne.
Quelle est la différence entre l’Options API et la Composition API dans Vue ?
L’Options API regroupe le code d’un composant par type, comme data, methods et computed, tandis que la Composition API avec script setup le regroupe par fonctionnalité et facilite la création de composables réutilisables. Apprendre Vue: Cours Code enseigne la Composition API avec script setup et propose un dojo Options to Composition API dans le Vue Lab pour réécrire des composants classiques selon le style moderne.
Dois-je connaître JavaScript avant d’apprendre Vue ?
Avoir quelques notions de HTML et de JavaScript aide beaucoup. Apprendre Vue: Cours Code s’adresse aux débutants qui connaissent les bases et souhaitent découvrir leur premier framework : l’application explique donc les concepts de Vue depuis le début, mais n’enseigne pas JavaScript lui-même. Si les variables et les fonctions vous sont inconnues, commencez par un cours de JavaScript.
Qu’est-ce que le Vue Lab ?
Le Vue Lab est l’espace de pratique de Apprendre Vue: Cours Code. Il comprend un inspecteur de la réactivité, un bug quotidien à résoudre avec un composant défectueux, des niveaux de Style Lab où vous devez reproduire un design cible avec CSS, des duels de création rapide, un dojo Options to Composition API et une bibliothèque My Components regroupant ce que vous avez créé.
Le programme couvre-t-il Nuxt 3 et le rendu côté serveur ?
Oui. Les cours avancés de Apprendre Vue: Cours Code couvrent le rendu côté serveur avec Nuxt 3, le SSR streaming avec Suspense et le développement full-stack avec Vue, Fastify et l’authentification, ainsi que les tests de composants avec Vitest et les applications en temps réel avec WebSockets.
L’application aide-t-elle à préparer les entretiens Vue.js ?
Oui. Apprendre Vue: Cours Code comprend des questions d’entretien Vue pour les postes de développeur front-end, ainsi que des quiz, des sessions de révision avec flashcards et une fiche mémo. Les cours associés couvrent la réactivité, le cycle de vie, les composables et la gestion de l’état, qui sont des thèmes fréquents en entretien.
Apprendre Vue: Cours Code est-elle gratuite ?
Son téléchargement est gratuit. Le premier cours, un aperçu de chaque leçon, le premier projet guidé, la première mission, le bug quotidien, trois niveaux de Style Lab, les quiz, les questions d’entretien et la fiche mémo sont gratuits, et la version gratuite affiche des publicités. Pro débloque l’intégralité du programme et du lab, le mentor IA et l’examen de certification, tout en supprimant les publicités.
L’application est-elle développée par l’équipe Vue.js ?
Non. Apprendre Vue: Cours Code est une application d’apprentissage indépendante, qui n’est ni affiliée au projet Vue.js ni approuvée par celui-ci. Elle enseigne Vue.js, framework open source, à travers ses propres cours et exercices.
Y a-t-il une certification ?
Oui. La réussite de l’examen final, inclus dans Pro, vous permet d’obtenir un certificat de réussite. Il présente le travail que vous avez réalisé et ne constitue pas une qualification accréditée : il est donc surtout utile en complément de composants et de projets que vous pouvez expliquer.
Quelles plateformes et quels langages sont pris en charge ?
Apprendre Vue: Cours Code fonctionne sur iPhone via l’App Store (iOS 15.1 ou version ultérieure) et sur Android via Google Play. L’interface est disponible en 22 langues et l’app est classée 4+ sur l’App Store.
Commencer
Créez votre premier composant Vue dès aujourd’hui
Commencez gratuitement sur iOS et Android, dans 22 langues.
Plus de CoddyKit
Disponible sur iOS et Android.