Développeur Vue.js (Nuxt) : tester la réactivité, Pinia et l'hydratation

Un développeur Vue.js écrit ses composants en Vue 3 avec la Composition API, range l'état partagé dans Pinia et passe par Nuxt quand le rendu serveur compte. En entretien, la réactivité est le sujet le plus révélateur : savoir pourquoi un écran ne se met pas à jour, ou se met à jour trop souvent.

Recevoir la fiche complète

Mis à jour le Par l'équipe Delectus5 min de lecture

La fiche Développeur Vue.js / Nuxt : technologies, chaîne du poste, une question et la grille d'évaluation

Le code qu'il écrira au quotidien guide les questions d'entretien d'un développeur Vue.js. Sur un projet Vue 3, il assemble des composants en script setup avec TypeScript, déclare l'état avec ref, reactive et computed, partage les données entre écrans avec Pinia et gère la navigation avec Vue Router. Avec Nuxt, il choisit aussi ce qui est rendu sur le serveur et charge les données avec useFetch ou useAsyncData. Beaucoup d'offres associent Vue.js à un back-end Java, PHP ou .NET, et le poste glisse alors vers le full-stack.

Vue 2 n'est plus maintenu depuis le 31 décembre 2023, mais de nombreuses applications tournent encore avec l'Options API, Vuex et Nuxt 2. Un CV peut afficher cinq ans de Vue.js sans une ligne de Composition API. Demandez la version utilisée sur le dernier projet et si la personne a participé à une migration. Côté Nuxt, la version 4 est sortie en 2025 et Nuxt 3 reste très présent dans le code existant.

Pour un poste confirmé, un composant à corriger en direct en dit plus qu'une liste de définitions, par exemple une valeur qui perd sa réactivité après une déstructuration ou une page Nuxt qui signale une erreur d'hydratation. Le PDF contient 30 questions sur six axes, un cas de 20 minutes et une grille de notation.

L'écosystème Vue.js et Nuxt d'un projet en production

Vue 3 et la Composition API

La version actuelle du framework. Les composants s'écrivent le plus souvent en script setup : l'état se déclare avec ref ou reactive, les valeurs dérivées avec computed, les effets avec watch. L'Options API (data, methods) fonctionne toujours et domine dans le code ancien. Fin 2026, Vue 3.5 est la version stable et la 3.6 est en release candidate.

La réactivité

Vue enregistre ce que chaque rendu lit et ne met à jour que ce qui en dépend. Les pièges sont connus : déstructurer un objet reactive casse le lien, déstructurer un store Pinia sans storeToRefs aussi, et un watch profond sur une grosse liste coûte cher. Un développeur expérimenté explique ces cas avec ses propres exemples.

Pinia

Le store officiel de Vue, qui a remplacé Vuex. Un store réunit un état, des getters et des actions, en style options ou en style setup. Pinia 3 ne gère plus Vue 2, et Vuex reste maintenu sans nouvelles fonctions. Les anciens projets passent donc de Vuex à Pinia au moment de leur migration.

Vue Router

Le routeur officiel : routes imbriquées, paramètres, pages chargées à la demande, gardes de navigation pour l'authentification. Dans Nuxt, les routes se déduisent des fichiers du dossier pages et les middlewares de route prennent le rôle des gardes.

Nuxt

Le framework construit sur Vue pour le rendu serveur (SSR), la génération statique et un rendu choisi route par route avec les routeRules. Il s'appuie sur le serveur Nitro, qui sert aussi les routes d'API du dossier server. Nuxt 4 range le code applicatif dans un dossier app et a revu useFetch et useAsyncData. La version 4.6 est sortie en octobre 2026.

Vite et TypeScript

Vite sert l'application en développement et produit le build. TypeScript est attendu sur la plupart des projets récents, avec vue-tsc pour vérifier les types des composants, car Vite ne le fait pas. Dans l'éditeur, le support passe par l'extension officielle Vue, issue de Volar.

Vitest, Vue Test Utils et tests de bout en bout

Vitest exécute les tests unitaires et les tests de composants. Vue Test Utils monte un composant pour vérifier son rendu et ses événements. Les parcours complets se testent avec Playwright ou Cypress. Pour Nuxt, le module @nuxt/test-utils fournit un environnement Nuxt aux tests.

Migration de Vue 2 vers Vue 3

Un chantier encore fréquent. Vue 2.7 apporte la Composition API à l'ancien code, et le build de compatibilité @vue/compat fait tourner du code Vue 2 sous Vue 3 le temps de migrer composant par composant. Les difficultés viennent des filtres supprimés, du bus d'événements, des bibliothèques de composants sans version Vue 3 et du passage de Vuex à Pinia.

Les offres Vue.js se partagent entre postes front-end et postes full-stack, où Vue.js accompagne un back-end Java Spring, PHP, .NET ou Node.js. Dans le second cas, le niveau attendu en Vue est souvent moins pointu et la partie back-end compte autant. Les reprises d'applications Vue 2 restent nombreuses, avec une migration vers Vue 3 à planifier. Nuxt entre en jeu quand le référencement ou le temps d'affichage de la première page comptent. Indiquez dans l'offre la version de Vue et de Nuxt, la présence de TypeScript et l'outil de test : un développeur habitué à Vue 2 et à l'Options API n'a pas le même quotidien qu'un développeur Nuxt 4 en TypeScript.

Les compétences Vue.js à contrôler pendant l'entretien

  • Réactivité Vue 3 et Composition API
  • Architecture de composants (props, événements, slots)
  • État partagé avec Pinia
  • Rendu serveur et chargement des données avec Nuxt
  • Tests avec Vitest et Vue Test Utils
  • Migration de Vue 2 vers Vue 3

Les questions à poser à un développeur Vue.js

Chaque question vient avec ce qu'une bonne réponse contient et le signal qui doit vous alerter. Pas besoin d'être technique pour les poser : écoutez si le candidat raconte du vécu.

  1. Question 1 · confirmé

    Un collègue déstructure un objet reactive dans un composant et l'affichage ne se met plus à jour. Que s'est-il passé, et comment corrigez-vous ?

    Une bonne réponseLa déstructuration copie les valeurs au moment où elle s'exécute. Les variables obtenues ne sont plus reliées au proxy reactive, donc Vue ne suit plus leurs changements. On garde l'objet entier, on passe par toRefs ou toRef, ou on utilise ref. Même logique pour un store Pinia, dont on déstructure l'état avec storeToRefs. Un profil solide ajoute que, depuis Vue 3.5, la déstructuration de defineProps reste réactive grâce au compilateur, ce qui ne vaut pas pour un reactive ordinaire.

    Signal d'alerte« Il faut forcer le rendu » avec $forceUpdate ou une key qui change à chaque fois. Ou une réponse qui ne fait aucune différence entre ref et reactive.

  2. Question 2 · junior à confirmé

    Vous devez afficher le total d'une commande qui dépend des quantités et d'un code promo. Computed ou watch, et pourquoi ?

    Une bonne réponseUn computed. Le total se déduit de l'état, Vue met le résultat en cache et ne le recalcule que si une quantité ou le code change. Un watch sert aux effets de bord, par exemple appeler une API quand le code promo change ou écrire dans le localStorage. La personne évite de recopier une valeur dérivée dans un ref depuis un watch, ce qui crée deux sources de vérité.

    Signal d'alerteUn watch qui met à jour une variable total à chaque modification, ou un computed qui modifie l'état ou lance un appel réseau.

  3. Question 3 · confirmé

    Deux écrans modifient les données de l'utilisateur connecté. Comment organisez-vous cet état avec Pinia, et qu'est-ce qui ne doit pas y aller ?

    Une bonne réponseUn store dédié, par exemple useUserStore, avec l'état, des getters pour les valeurs dérivées et des actions pour les modifications et les appels API, afin que les écrans ne modifient pas l'état chacun à sa façon. Les données d'un seul composant ou d'un formulaire en cours de saisie restent locales. Avec Nuxt et le rendu serveur, une instance de Pinia est créée par requête pour ne pas mélanger les données de deux utilisateurs, ce que gère le module @pinia/nuxt.

    Signal d'alerteUn seul store global qui contient tout, y compris l'ouverture des modales et les champs de formulaire. Ou un état déclaré en variable de module dans une application SSR, donc partagé entre toutes les requêtes du serveur.

  4. Question 4 · confirmé à senior

    Une page Nuxt affiche un avertissement de décalage d'hydratation (hydration mismatch). D'où vient-il et comment le corrigez-vous ?

    Une bonne réponseLe HTML rendu par le serveur ne correspond pas au premier rendu dans le navigateur. Causes fréquentes : une date ou un nombre aléatoire calculé des deux côtés, un accès à window ou au localStorage pendant le rendu, un contenu qui dépend de la largeur d'écran, un HTML invalide comme une div dans un p. On calcule la valeur une seule fois sur le serveur et on la transmet avec useState ou useFetch, on déplace le code propre au navigateur dans onMounted, ou on entoure la zone d'un composant ClientOnly.

    Signal d'alertePasser toute l'application en ssr: false pour faire disparaître le message, ou l'ignorer parce que « la page s'affiche quand même ».

  5. Question 5 · senior

    Dans une application Nuxt, la page d'accueil change une fois par jour, les pages de contenu toutes les heures et l'espace client est propre à chaque utilisateur. Quel mode de rendu choisissez-vous pour chacune ?

    Une bonne réponseDes routeRules par groupe de routes : prerender pour la page d'accueil, ou un cache avec revalidation ; swr ou isr avec une durée pour les pages mises à jour toutes les heures ; rendu serveur sans cache, ou rendu côté client, pour l'espace connecté, dont les données ne passent jamais par un cache partagé. La personne demande où l'application est hébergée, car isr s'appuie sur le CDN de certaines plateformes alors que swr utilise le cache de Nitro.

    Signal d'alerteTout en SSR sans cache, ou tout en génération statique, y compris les pages qui dépendent de l'utilisateur connecté.

Recevez la fiche d'entretien complète en PDF

La fiche pour mener l'entretien de bout en bout, prête à imprimer ou à partager avec le manager.

  • 30 questions sur 6 axes, avec la bonne réponse, le signal d'alerte et la relance
  • Le niveau visé pour chaque question
  • Une mise en situation de 20 minutes et ce qu'on attend du candidat
  • La grille d'évaluation de 1 à 4, axe par axe

Recruter un développeur Vue.js : les questions fréquentes

Quelle différence entre un développeur Vue.js et un développeur Nuxt ?

Nuxt est construit sur Vue, donc un développeur Nuxt est d'abord un développeur Vue. Il ajoute le rendu serveur : savoir ce qui s'exécute sur le serveur et dans le navigateur, charger les données sans double appel, corriger une erreur d'hydratation, choisir un mode de rendu par page et écrire les routes d'API du dossier server. Pour une application interne sans enjeu de référencement, Vue avec Vite suffit souvent, et l'expérience Nuxt devient un plus.

Un développeur React peut-il prendre un poste Vue.js ?

Oui, les notions de composants, de props, d'état et de routage se transposent. Les différences tiennent à la réactivité, qui met à jour ce qui dépend d'une valeur au lieu de relancer le rendu du composant, aux templates, aux directives et à Pinia. Posez-lui quand même les questions sur la réactivité, c'est là que les habitudes de React induisent en erreur.

Quel test technique proposer à un développeur Vue.js ?

Un exercice court en entretien fonctionne mieux qu'un projet à rendre. Donnez un composant de quelques dizaines de lignes avec deux défauts, une réactivité perdue et un watch qui recopie une valeur calculée, et demandez de les trouver puis de les corriger en commentant. Pour un poste Nuxt, ajoutez une page qui charge ses données deux fois et demandez pourquoi.

Comment vérifier sur un CV l'expérience réelle de Vue 3 ?

Les dates ne suffisent pas, car beaucoup de projets sont restés en Vue 2 longtemps après 2020. Demandez sur quelle version tournait le dernier projet, si les composants étaient en script setup, quel store était utilisé et avec quel outil de test. Une personne qui a vraiment travaillé en Vue 3 parle de ref, de computed, de composables et de Pinia avec des exemples précis, et sait citer ce qui l'a gênée pendant une migration.

Pour structurer vos autres entretiens, consultez aussi nos pages sur les questions d'entretien de recrutement, la méthode de l'entretien structuré et la grille d'évaluation d'entretien.

Les fiches voisines

Toutes les fiches →

Voyez Delectus sur vos propres offres.

Commencez gratuitement. Passez à l'échelle quand vous êtes prêt.

Demander une démo

Votre ATS, connecté à Delectus

  • Workable
  • Teamtailor
  • iCIMS
  • Lever
  • SmartRecruiters
  • Jobvite
  • Greenhouse
  • Pinpoint