Vue.js, c'est le framework JavaScript simple pour créer des interfaces web dynamiques et performantes. Il a tout ce qu'il faut pour créer des grandes applications : un router officiel et un pattern flux propre à lui même, tout cela en moins de 30kb !

Vous ressortirez de cette formation Vue.js avec une vision nouvelle sur ce que peut être une application web, que vous soyez habitué à développer en JavaScript pur ou avec des librairies comme jQuery.

Pourquoi encore un nouvel outil ? Rassurez-vous : pour beaucoup de ses utilisateurs, Vue.js est connu pour avoir rendu le développement front simple et amusant justement en réponse à la js fatigue.

Dans cette formation Vue.js, vous découvrirez par la pratique les bases de Vue.js et son environnement de développement. La formation s’adresse à toute personne souhaitant découvrir le framework et ayant des notions en JavaScript, HTML et CSS.

A l’issue de cette formation Vue.js, vous repartirez avec le code source de votre projet, construit ensemble au fil des exercices.

Si vous cherchez à aller plus loin avec le framework Vue.js, vous serez sûrement intéressé par notre formation Vue.js avancé.

Covid-19: Nous restons ouverts. Cette formation est disponible à distance.

Les objectifs

• Comprendre les caractéristiques d’une Single Page App
• Découvrir la philosophie et le fonctionnement du framework Vue.js
• Prototyper une application web avec le framework progressif Vue.js
• Savoir utiliser les outils de développements Vue.js dans un navigateur, un IDE et un terminal.
• Réutiliser du code grâce aux composants

Pré-requis

• Une machine sur laquelle sont installés un navigateur, un terminal et un IDE
• Minimum d’expérience avec JavaScript, HTML et CSS
• Apporter un ordinateur portable

Le programme de la formation Vue.js

Jour 1 — Une application web simple avec Vue

Introduction

• SPA et les frameworks JavaScript
• Vue.js, un framework progressif
• Data Driven Interfaces
• Ecosystème
• Réactivité basique avec l’interpolation et v-bind
• Conditionnelles
• Boucles
• Evénements

Bases

• Instance Vue
• Templating
  • Interpolation
  • Attributs
  • Directives
  • Filtres
• Comparatif Vue vs jQuery
• v-model
  • Inputs Natifs
• Boucler sur de la donnée
• Rendering conditionnel
• Manipuler des classes
• Propriétés calculées
• Écoute d'événements

Projet - Annuaire de films
- Listing d’éléments d’un catalogue
- Ajouter, supprimer et éditer les éléments d’une liste
- Ajout de filtres par catégories

Jour 2 — Une application faite de composants

Composants

• Rôle du composant dans une SPA
• Props
• Evénements
• Slots
• Composants dynamiques

Projet - Utiliser des composants dans son application
- Single File Components
- Création d'un composant pour l'affichage
- Faire communiquer les composants entre eux

Vue CLI

• Qu’est-ce que Vue CLI ?

Projet - Migrer le projet vers le CLI

Jour 3 — Routeur, plugins et API

Extensions

• Mixins
• Plugins

Projet - Utiliser un plugin

Cycle de vie

Projet - Manipuler de la donnée distante

Routing avec vue-router

• Vue Router
  • Routes
  • Modes
  • Lien
  • La vue principale

Projet - Mise en place d’un routeur dans l'annuaire

Bonus

En fonction des profils des participant·e·s, et du temps restants, les notions suivantes pourront être abordées.

Transitions visuelles

• Les transitions CSS
• Transitions de listes avec Vue
• Transitions dynamiques

Projet - Ajout d’animations dans la liste

Un state global avec Vuex

• Que est ce qu'un Store
  • Pourquoi et quand l’utiliser ?
  • Limites et alternatives
• Vuex
  • State
  • Getters
  • Mutations
  • Actions
  • Modules

Projet - Utilisation d’un Store dans l'annuaire

Le(s) formateur(s)

Jonathan Barthélémy

Consultant spécialisé dans les technologies du web utilisant Javascript (Vue.js/Nuxt, Node.js, Angular, React).

Après des débuts en tant que développeur dans plusieurs types d'entreprises, Jonathan délivre, depuis maintenant 4 ans, son expertise pour différents clients à travers la formation et l'accompagnement des équipes techniques dans leurs transformations numériques.

Voir son profil détaillé

Eduardo San Martin Morote

Eduardo est un membre de la core team Vue.js, il contribue à l'Open Source et est très actif dans l'écosystème Vue avec des projets comme vue-router, vuefire, vuexfire, vue-promised, vue-motion, vue-tweezing, ... Il est aussi Freelance Front End et évite toujours le gâchis en appliquant le principe du Lean un peu partout, des fois un peu trop ! En équipe, il prend plaisir à aider les autres. Les soirs, il fait souvent de la veille technique et partage ce qu'il apprend lors de ses discussions dans la journée. Il organise également le Meetup Vue.js à Paris.

Voir son profil détaillé

Guillaume Chau

Guillaume est un membre de la Core Team de Vue.js et travaille sur des composants officiels comme vue-devtools, vue-cli, vue-curated et vue-ui. Il est aussi contributeur d'autres projets Open Source liés à Vue.js, GraphQL et Node.js comme vue-apollo, vue-meteor, vue-virtual-scroller, nodepack et bien d'autres.
Actuellement développeur chez Livestorm, il participe également aux meetups Javascript et Vue.js sur la région de Lyon, ainsi qu'à de nombreuses conférences autour du globe.

Voir son profil détaillé

Romain Petit

Romain est consultant indépendant depuis 2012 spécialisé dans les technologies web front-end.
Il intervient chez ses clients pour des missions d’expertise et de réalisation d'interfaces d'applications web, en particulier dans le secteur e-commerce. Il utilise les frameworks JavaScript React et Vue, respire le SASS et défend activement la JAMstack.
www.romainpetit.com

Romain donne des formations depuis 4 ans pour différentes structures. Avec le Campus Numérique, il aide à construire des formations innovantes comme Technicien Développeur Web et Data Aspergers.
Avec l'Université de Grenoble Alpes, il intervient pour des cursus en IUT et Licence professionnelle.

Il a récemment monté le collectif d'indépendants et espace de travail Le Médiastère, au centre ville de Grenoble.

Voir son profil détaillé

Suivi de formation en option

A l'issue de la formation, nos formateurs peuvent aussi intervenir pour vous accompagner dans la mise en application des compétences acquises :

• en répondant à vos questions lors de rendez-vous téléphoniques réguliers
• en étant présents physiquement à l'amorce du projet
• en réalisant un audit de vos pratiques quelques semaines/mois après la formation

Cette idée vous intéresse ? Faîtes-le nous savoir pour que nous trouvions la formule adaptée à votre situation.