[{"data":1,"prerenderedAt":46},["ShallowReactive",2],{"course-vue-js-3-techniques-avancees-pour-applications-reactives":3,"highlight-JavaScript-import { ref, watchE":45},{"id":4,"name":5,"slug":6,"location":7,"targetAudienceFormatMarkdown":8,"prerequisitesFormatMarkdown":9,"objectivesFormatMarkdown":10,"descriptionFormatMarkdown":11,"teachingMethodsFormatMarkdown":12,"teachingResourcesFormatMarkdown":13,"evaluationMethodsFormatMarkdown":14,"accessibilityFormatMarkdown":15,"accessMethodsFormatMarkdown":16,"minimumParticipants":17,"maximumParticipants":17,"duration":18,"reference":19,"trainerType":7,"updated_at":20,"created_at":21,"price":22,"organizationMode":7,"theme":23,"code":27,"tags":32,"metadata":36},"/api/courses/33c6d3b1-dea9-4586-bf29-191260a44f85","Vue.js 3 – Techniques avancées pour applications réactives","vue-js-3-techniques-avancees-pour-applications-reactives",null,"Développeurs front-end souhaitant approfondir Vue.js 3 pour des applications complexes. \n\nIntégrateurs et développeurs full-stack impliqués dans des projets SPA (Single Page Application). \n\nChefs de projet technique ou architectes souhaitant renforcer leur compréhension des bonnes pratiques Vue.js.","-   Maîtrise des bases de Vue.js 3 (composants, directives, data binding). \n-   Connaissances solides en JavaScript moderne (ES6+) et en développement front-end (HTML, CSS). \n-   Aisance avec un éditeur de code et un environnement de développement web. ","-   Exploiter les fonctionnalités avancées de Vue.js 3 pour structurer des applications performantes et maintenables. \n-   Maîtriser l’utilisation de la “Composition API” pour une organisation plus modulaire du code. \n-   Gérer efficacement l’état global d’une application avec des solutions dédiées. \n-   Implanter la navigation multi-pages avec Vue Router et optimiser la performance des routes. \n-   Appliquer des pratiques d’internationalisation, tests et optimisation pour les applications Vue.js. ","--day1--\n\n## Composition API et organisation avancée \n\n-   Rappels sur l’architecture des applications Vue.js. \n-   Composition API : principes, comparaisons avec “Options API”, modularisation de la logique. \n-   Utilisation des hooks réactifs (ref, reactive, computed, watch). \n-   Structurer la logique de composants complexes avec des fonctions réutilisables. \n-   Création de hooks personnalisés. \n-   Atelier : extraction de logique commune via Composition API.\n\n--break--\n\nGestion d’état et inter-composants \n\n-   Besoin de gestion d’état dans des applications non triviales. \n-   Intégration de solutions d’état global (Pinia ou équivalent moderne). \n-   Organisation des stores : getters, actions, mutations (si applicable), modules. \n-   Communication entre composants via l’état global. \n-   Exercices pratiques : implémenter un store et connecter des vues au state. \n\n--day2--\n\n## Router avancé et navigation \n\n-   Vue Router : mise en place et configuration d’un système de navigation à plusieurs routes. \n-   Routes dynamiques et passage de paramètres. \n-   Lazy loading des composants liés aux routes pour optimiser la performance. \n-   Navigation programmée, guards (avant/après navigation). \n-   Atelier : concevoir une navigation multi-pages complète avec protection d’accès. \n\n--break--\n\n## Perfectionnement, tests et bonnes pratiques \n\n-   Internationalisation (i18n) pour Vue.js : configuration et traduction de contenu. \n-   Tests unitaires et d’intégration pour composants avec des outils adaptés (Jest, Vue Test Utils). \n-   Performances et optimisation : code splitting, caches, observabilité. \n-   Stratégies de déploiement moderne et configuration de builds (Vite, Webpack). \n-   Synthèse des acquis, retours d’expérience et recommandations pour aller plus loin.","Nos formations, équilibrées entre théorie (50%) et pratique (50%), offrent un apprentissage interactif grâce à des méthodes variées comme les travaux pratiques, les mises en situation et les démonstrations. Des QCM réguliers assurent le suivi des acquis.\n\nVariables suivant les formations, les moyens techniques mis en oeuvre sont :\n\nOrdinateurs Mac ou PC, connexion internet fibre, tableau blanc ou écran (pour le distanciel).\n\nEn cas de formation intra sur site externe à Le Code, le client s'assure et s'engage également à avoir toutes les ressources matérielles pédagogiques nécessaires\n\n(équipements informatiques...) au bon déroulement de l'action de formation visée conformément aux prérequis indiqués dans le programme de formation communiqué","Les supports pédagogiques sont remis aux stagiaires sous format numérique et/ou papier selon les modalités de la formation.\n\n  \n\nIls comprennent des supports de cours, des présentations, des fiches pratiques, des études de cas, des exercices applicatifs ainsi que des QCM d’entraînement selon la formation. (adapté au choix du formateur)\n\n  \n\nLes formations s’appuient sur des moyens techniques adaptés : ordinateurs, logiciels professionnels, connexion internet, écran ou vidéoprojecteur, ainsi que des outils collaboratifs et de visioconférence pour les formations à distance.\n\n  \n\nL’ensemble des supports pédagogiques est accessible pendant et après la formation afin de favoriser l’appropriation et la mise en pratique des compétences acquises.","En amont de la formation, un recueil des besoins permet de récolter des informations sur le stagiaire et ses attentes. L’évaluation se fait en cours de formation, par des études de cas ou des travaux pratiques. En fin de formation, par un questionnaire d’auto-évaluation et/ou un examen.\n\nUn suivi de qualité est effectué grâce à nos sessions en groupe restreint (entre 2 et 9 participants maximum). Le stagiaire émargera par demi-journée et recevra une attestation de formation.","Nous informons l'ensemble de nos clients et stagiaires que nous sommes dans la capacité d’adapter les sessions selon les handicaps et les situations spécifiques. Nous nous engageons à répondre à toutes vos demandes sous un délai de 48h\n\nouvré.","Si l’une de nos formations vous intéresse, contactez-nous au +33 4 93 65 34 24 ou à l’adresse mail contact@m2g-intellect.fr. Selon votre besoin et vos attentes, nous organiserons un échange téléphonique avec le formateur pressenti afin d’adapter la\n\nformation et ses modules, puis nous vous adresserons un devis.\n\nLes dates de la formation seront à convenir sous 30 jours maximum.",0,"14.00","vuejs av","2026-04-22T14:58:39+00:00","2026-04-22T14:46:16+00:00","1500.00",{"id":24,"name":25,"slug":26},"/api/themes/abd712b8-6a6c-4c9b-b382-0aea1eac47d6","Développement Web Frontend","developpement-web-frontend",{"id":28,"label":29,"domain":30},"/api/training_specialities/163","326 - Informatique, traitement de l’information, réseaux de transmission des données",{"label":31},"32 - Communication et information",[33],{"id":34,"name":35},"7732139d-6025-4fde-b145-39298ced3408","MENUFEATURED",{"desc-accroche":37,"Description":38,"icon-color":39,"icon-name":40,"code-langage":41,"code-snippet":42,"courte-description":43,"titre-accroche":44},"Expertisez votre pratique de Vue.js 3 en maîtrisant les Composables complexes, l'optimisation des performances via la réactivité fine, la gestion d'état globale avancée et l'intégration de TypeScript pour des applications robustes.","Cette formation Vue.js 3 avancée s'adresse aux développeurs souhaitant industrialiser leurs flux de travail et maîtriser les rouages internes du framework. Nous explorerons en profondeur la Composition API pour créer des logiques métier réutilisables via les Composables. Vous apprendrez à diagnostiquer et résoudre les problèmes de performance, à implémenter des stratégies de Server-Side Rendering (SSR) ou de Static Site Generation (SSG) avec Nuxt, et à sécuriser vos données avec un typage TypeScript strict. Un focus particulier est mis sur les patterns de conception avancés et la mise en place de tests automatisés (unitaires et E2E) pour garantir une maintenabilité irréprochable de vos interfaces complexes.","#41B883","mdi:vuejs","JavaScript","import { ref, watchEffect, onUnmounted } from 'vue';\n\nexport function useResponsiveData(apiEndpoint) {\n\tconst data = ref(null);\n\tconst error = ref(null);\n\n\tconst stop = watchEffect(async () => {\n\t\ttry {\n\t\t\tconst response = await fetch(apiEndpoint);\n\t\t\tdata.value = await response.json();\n\t\t} catch (e) {\n\t\t\terror.value = e;\n\t\t}\n\t});\n\n\tonUnmounted(() => stop());\n\treturn { data, error };\n}","Maîtrisez les techniques de pointe de Vue.js 3 : Composables avancés, optimisation de la réactivité, intégration TypeScript et architectures scalables pour applications haute performance.","Devenez un expert Vue.js 3 : apprenez à concevoir des architectures réactives de pointe, performantes et scalables pour vos projets les plus ambitieux.","\u003Cpre class=\"hljs\">\u003Ccode class=\"language-javascript\">\u003Cspan class=\"hljs-keyword\">import\u003C/span> { ref, watchEffect, onUnmounted } \u003Cspan class=\"hljs-keyword\">from\u003C/span> \u003Cspan class=\"hljs-string\">'vue'\u003C/span>;\n\n\u003Cspan class=\"hljs-keyword\">export\u003C/span> \u003Cspan class=\"hljs-keyword\">function\u003C/span> \u003Cspan class=\"hljs-title function_\">useResponsiveData\u003C/span>(\u003Cspan class=\"hljs-params\">apiEndpoint\u003C/span>) {\n\t\u003Cspan class=\"hljs-keyword\">const\u003C/span> data = \u003Cspan class=\"hljs-title function_\">ref\u003C/span>(\u003Cspan class=\"hljs-literal\">null\u003C/span>);\n\t\u003Cspan class=\"hljs-keyword\">const\u003C/span> error = \u003Cspan class=\"hljs-title function_\">ref\u003C/span>(\u003Cspan class=\"hljs-literal\">null\u003C/span>);\n\n\t\u003Cspan class=\"hljs-keyword\">const\u003C/span> stop = \u003Cspan class=\"hljs-title function_\">watchEffect\u003C/span>(\u003Cspan class=\"hljs-title function_\">async\u003C/span> () => {\n\t\t\u003Cspan class=\"hljs-keyword\">try\u003C/span> {\n\t\t\t\u003Cspan class=\"hljs-keyword\">const\u003C/span> response = \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-title function_\">fetch\u003C/span>(apiEndpoint);\n\t\t\tdata.\u003Cspan class=\"hljs-property\">value\u003C/span> = \u003Cspan class=\"hljs-keyword\">await\u003C/span> response.\u003Cspan class=\"hljs-title function_\">json\u003C/span>();\n\t\t} \u003Cspan class=\"hljs-keyword\">catch\u003C/span> (e) {\n\t\t\terror.\u003Cspan class=\"hljs-property\">value\u003C/span> = e;\n\t\t}\n\t});\n\n\t\u003Cspan class=\"hljs-title function_\">onUnmounted\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> \u003Cspan class=\"hljs-title function_\">stop\u003C/span>());\n\t\u003Cspan class=\"hljs-keyword\">return\u003C/span> { data, error };\n}\u003C/code>\u003C/pre>",1781121857709]