Créer une application Vue.js avec Claude Code : le guide complet 2026
Créer une application Vue.js 3 avec Claude Code : installation, CLAUDE.md, Composition API, composants, Pinia, appels API, tests Vitest et déploiement. Guide 2026.
Vue.js et Claude Code : le duo pour créer une application web moderne sans galérer
Vue.js est l'un des trois grands frameworks JavaScript du web, aux côtés de React et Angular. Sa réputation tient à un équilibre rare : une syntaxe de template claire, une réactivité élégante et une courbe d'apprentissage douce, sans sacrifier la puissance nécessaire aux grosses applications. Avec Vue 3, la Composition API et la syntaxe , écrire des composants n'a jamais été aussi agréable. Mais entre le routeur, la gestion d'état, le build avec Vite, TypeScript et les tests, monter un projet complet reste intimidant quand on débute.
En 2026, Claude Code change la donne. Cet agent de développement autonome, piloté en langage naturel depuis le terminal, sait échafauder un projet Vue, écrire les composants, brancher une API, corriger ses propres erreurs et vous accompagner jusqu'au déploiement. Vous décrivez ce que vous voulez en français, l'agent produit le code idiomatique Vue 3. Ce guide montre, étape par étape, comment créer une application Vue.js avec Claude Code : installation, CLAUDE.md, composants, Composition API, gestion d'état avec Pinia, appels réseau, tests et mise en production. Si vous découvrez l'agent, gardez à portée notre guide complet de Claude Code, qui pose les bases du travail en mode agent.
Sommaire
Pourquoi Vue.js est un terrain idéal pour Claude Code<a id="pourquoi-vue"></a>
Vue est particulièrement adapté au développement assisté par IA, pour plusieurs raisons concrètes.
D'abord, la clarté des Single File Components (les fichiers .vue) : template, logique et style dans un seul fichier bien structuré. L'agent raisonne facilement sur un composant autonome, et vous relisez le résultat d'un coup d'œil.
Ensuite, des conventions fortes et stables. Vue 3 a convergé vers la Composition API et , Vite pour le build, Vue Router pour la navigation et Pinia pour l'état. Ce socle bien défini réduit les hallucinations : Claude Code génère du code conforme aux pratiques officielles, pas un patchwork improbable.
Enfin, une réactivité explicite et lisible. Avec ref(), reactive() et computed(), le flux de données est facile à suivre — pour vous comme pour l'agent qui doit débuguer. Résultat : les cycles « je décris, l'agent code, je teste, l'agent corrige » sont rapides et fiables.
Installer Node.js, Vue et Claude Code en 2026<a id="installation"></a>
Vue s'appuie sur Node.js. Installez une version LTS récente (Node 20 ou 22) depuis nodejs.org ou via un gestionnaire de versions comme nvm. Vérifiez :
node --version # v22.x
npm --version # 10.xInstallez ensuite Claude Code en global :
npm install -g @anthropic-ai/claude-code
claude --versionAu premier lancement, l'agent vous demande de vous authentifier (abonnement Claude Pro/Max ou clé API). Si vous êtes sous Windows, l'installation passe idéalement par WSL : suivez notre guide d'installation de Claude Code sur Mac, Windows et Linux pour éviter les pièges classiques. Vous pouvez aussi piloter l'agent depuis votre éditeur grâce à l'extension Claude Code pour VS Code.
Créer le squelette du projet avec Vite<a id="squelette"></a>
Le meilleur point de départ pour un projet Vue moderne est l'outil officiel create-vue, basé sur Vite. Plutôt que de tout taper vous-même, ouvrez Claude Code dans un dossier vide et demandez :
« Initialise un nouveau projet Vue 3 avec Vite, TypeScript, Vue Router et Pinia via create-vue. Configure ESLint et Prettier, puis lance le serveur de dev pour vérifier que la page d'accueil s'affiche. »
L'agent va exécuter la commande d'échafaudage, répondre aux questions du CLI, installer les dépendances et démarrer npm run dev. En quelques instants, vous avez une base propre. La commande sous-jacente ressemble à :
npm create vue@latest mon-app
cd mon-app
npm install
npm run devPrenez l'habitude de laisser l'agent vérifier son travail : lancer le serveur, ouvrir l'URL locale, confirmer qu'il n'y a pas d'erreur dans la console. C'est cette boucle de vérification qui distingue un vrai workflow agentique d'une simple génération de code à l'aveugle.
Le fichier CLAUDE.md, cerveau de votre projet Vue<a id="claude-md"></a>
Avant de générer la moindre fonctionnalité, créez un fichier CLAUDE.md à la racine. C'est la mémoire de projet que l'agent lit automatiquement à chaque session : vos conventions y sont gravées une fois pour toutes.
# Projet : Mon application Vue
## Stack
- Vue 3 avec Composition API et <script setup>
- TypeScript strict
- Vite, Vue Router, Pinia
- Tailwind CSS pour le style
- Vitest + Vue Test Utils pour les tests
## Conventions
- Un composant par fichier .vue, PascalCase pour les noms
- Composants réutilisables dans src/components, pages dans src/views
- Stores Pinia dans src/stores, un store par domaine
- Toujours typer les props et les émissions d'événements
- Pas de any : préférer des types explicites
## Commandes
- Dev : npm run dev
- Build : npm run build
- Tests : npm run test:unit
- Lint : npm run lintCe fichier évite les allers-retours : l'agent sait d'emblée qu'il doit écrire du TypeScript typé, utiliser Pinia et respecter votre arborescence. Pour aller plus loin sur cet outil décisif, consultez notre guide complet du fichier CLAUDE.md.
Du prompt au composant : Composition API et script setup<a id="composants"></a>
Place au concret. Demandez à Claude Code un premier composant :
« Crée un composant `CompteurTaches.vue` qui affiche une liste de tâches et un champ pour en ajouter. Utilise `<script setup>`, la Composition API et TypeScript. Chaque tâche a un id, un libellé et un booléen `terminee`. On peut cocher une tâche et la supprimer. »
L'agent produit un Single File Component idiomatique, du type :
<script setup lang="ts">
import { ref } from 'vue'
interface Tache {
id: number
libelle: string
terminee: boolean
}
const taches = ref<Tache[]>([])
const nouveau = ref('')
let compteur = 0
function ajouter() {
if (!nouveau.value.trim()) return
taches.value.push({ id: ++compteur, libelle: nouveau.value, terminee: false })
nouveau.value = ''
}
function supprimer(id: number) {
taches.value = taches.value.filter((t) => t.id !== id)
}
</script>
<template>
<div>
<form @submit.prevent="ajouter">
<input v-model="nouveau" placeholder="Nouvelle tâche" />
<button type="submit">Ajouter</button>
</form>
<ul>
<li v-for="t in taches" :key="t.id">
<input type="checkbox" v-model="t.terminee" />
<span :class="{ fait: t.terminee }">{{ t.libelle }}</span>
<button @click="supprimer(t.id)">✕</button>
</li>
</ul>
</div>
</template>Remarquez la clarté : la réactivité avec ref, les directives v-model, v-for et @submit.prevent dans le template. Vous demandez ensuite des variantes en langage naturel — « ajoute un compteur de tâches restantes », « range les tâches terminées en bas » — et l'agent itère. C'est là toute la puissance du vibe coding avec un framework aussi lisible que Vue.
Router et navigation avec Vue Router<a id="router"></a>
Une vraie application a plusieurs pages. Vue Router gère la navigation côté client. Demandez à l'agent :
« Ajoute Vue Router avec trois routes : Accueil, Tâches et À propos. Crée les vues correspondantes dans src/views et une barre de navigation avec des `RouterLink`. »
Claude Code configure le routeur, déclare les routes et met en place la navigation. Il sait aussi gérer les cas avancés : routes dynamiques (/taches/:id), lazy loading des vues pour alléger le bundle, et gardes de navigation pour protéger des pages derrière une authentification. Décrivez le besoin, relisez le code généré, testez dans le navigateur.
Gérer l'état global avec Pinia<a id="pinia"></a>
Dès que plusieurs composants partagent des données — l'utilisateur connecté, un panier, un thème — vous avez besoin d'un store. Pinia est la solution officielle, successeur de Vuex, et Claude Code la maîtrise parfaitement.
« Crée un store Pinia `useTachesStore` qui centralise la liste des tâches, avec des actions pour ajouter, cocher et supprimer, et un getter `tachesRestantes`. Branche-le dans le composant de liste. »
L'agent génère un store typé et lisible :
import { defineStore } from 'pinia'
import { ref, computed } from 'vue'
export const useTachesStore = defineStore('taches', () => {
const taches = ref<{ id: number; libelle: string; terminee: boolean }[]>([])
const tachesRestantes = computed(() => taches.value.filter((t) => !t.terminee).length)
function ajouter(libelle: string) {
taches.value.push({ id: Date.now(), libelle, terminee: false })
}
return { taches, tachesRestantes, ajouter }
})Vos composants consomment le store via const store = useTachesStore(), et la réactivité fait le reste. Cette centralisation de l'état est aussi ce qui rapproche une application Vue d'une architecture full-stack : côté backend, la même logique de délégation à l'agent s'applique, comme le montre notre guide pour créer un backend avec Supabase et Claude Code.
Consommer une API REST dans Vue<a id="api"></a>
Une application réelle dialogue avec un serveur. Demandez à l'agent de récupérer des données depuis une API et de les afficher :
« Dans la vue Tâches, charge la liste depuis l'endpoint GET /api/taches au montage du composant avec fetch, gère les états de chargement et d'erreur, et affiche un indicateur pendant le chargement. »
Claude Code écrit la logique de fetch dans un onMounted, gère loading et error avec des ref, et affiche proprement chaque état. Il sait aussi extraire cette logique dans un composable réutilisable (useApi) — l'équivalent Vue des hooks React — pour ne pas dupliquer le code réseau dans dix composants.
Le choix de l'API dépend de votre projet : backend maison, service tiers ou API de données spécialisée. Pour des données métier prêtes à l'emploi (par exemple immobilières), une API comme celle d'immoApi s'intègre en quelques minutes dans un front Vue, et Claude Code se charge du câblage. Et si vous voulez construire vous-même le backend qui alimente votre front, suivez notre guide pour créer une API REST avec Node.js et Express.
Tester vos composants avec Vitest<a id="tests"></a>
Un projet Vue sérieux se teste. L'outil recommandé est Vitest, rapide et parfaitement intégré à Vite, associé à Vue Test Utils pour monter les composants. Demandez à l'agent :
« Écris des tests Vitest pour le composant `CompteurTaches` : ajout d'une tâche, coche d'une tâche, suppression. Utilise Vue Test Utils et vérifie le rendu. »
Claude Code produit des tests lisibles qui montent le composant, simulent les interactions et vérifient le DOM :
import { mount } from '@vue/test-utils'
import { describe, it, expect } from 'vitest'
import CompteurTaches from '../CompteurTaches.vue'
describe('CompteurTaches', () => {
it('ajoute une tâche', async () => {
const wrapper = mount(CompteurTaches)
await wrapper.find('input').setValue('Écrire un test')
await wrapper.find('form').trigger('submit.prevent')
expect(wrapper.text()).toContain('Écrire un test')
})
})Pour aller plus loin sur la méthode — écrire les tests d'abord, laisser l'agent les faire passer — lisez notre guide sur les tests automatisés et le TDD avec Claude Code.
Voir Claude Code en action
Avant de déployer, il est utile de visualiser la méthode de travail avec l'agent : cadrer une tâche, laisser Claude proposer une approche, puis avancer par incréments vérifiés. Cette vidéo de la chaîne Sophiène IA montre l'outil en action sur un vrai projet — une logique directement transposable au développement d'une application Vue :
**Et si vous arrêtiez de coder à la main ce qu'un agent peut produire à votre place ?** Monter un front Vue n'est que le début. Découvrez comment déléguer des pans entiers de votre développement à des agents Claude Code bien orchestrés : [**se faire remplacer par l'IA**](https://go.saas-ia.io/se-faire-remplacer-par-lia). Vous y verrez des workflows complets, du premier composant jusqu'aux équipes d'agents en production.
Déployer votre application Vue.js<a id="deploiement"></a>
Une application Vue construite avec Vite se compile en fichiers statiques par npm run build, qui remplit le dossier dist/. Ces fichiers s'hébergent partout : Vercel, Netlify, Cloudflare Pages, GitHub Pages. Demandez à l'agent :
« Prépare le déploiement sur Netlify : configure le build, ajoute un fichier de redirection pour le mode history du routeur, et explique-moi les étapes. »
Claude Code configure la commande de build (npm run build), le dossier de publication (dist) et le fichier de redirection SPA indispensable pour que Vue Router fonctionne en rechargeant une page profonde. Pour un tour complet des plateformes et des réglages, suivez notre guide pour déployer une application Claude Code sur Vercel ou Netlify.
Vue ou React avec Claude Code ?<a id="vue-vs-react"></a>
C'est la question qui revient toujours. Les deux frameworks sont parfaitement gérés par l'agent, alors le choix se fait sur d'autres critères :
Un point important : quel que soit le framework, la vraie compétence de 2026 n'est plus la syntaxe, mais la capacité à piloter un agent. Les patterns d'orchestration d'agents autonomes — découper une tâche, déléguer, vérifier — se généralisent bien au-delà du frontend. Si le sujet des agents IA open-source et auto-hébergés vous intéresse, la formation OpenClaw explore ces workflows d'automatisation en entreprise.
Bonnes pratiques et pièges à éviter<a id="bonnes-pratiques"></a>
Pour tirer le meilleur de Claude Code sur un projet Vue, gardez ces réflexes :
any.npm run test:unit et npm run lint après chaque changement attrape les régressions avant vous..value sur un ref dans le , ou déstructurer un store et perdre la réactivité. Demandez à l'agent d'expliquer son code quand un comportement vous surprend.Conclusion : Vue.js + Claude Code, un accélérateur pour votre prochain projet
Vous l'avez vu : de l'échafaudage avec Vite au déploiement sur Netlify, en passant par les composants en Composition API, Vue Router, Pinia, les appels API et les tests Vitest, Claude Code couvre toute la chaîne d'une application Vue.js moderne. Vous décrivez, l'agent code, vous vérifiez — et vous apprenez Vue au passage, plus vite que seul.
La barrière technique du développement web s'effondre. La vraie question n'est plus « est-ce que je sais coder en Vue ? » mais « quelle valeur je veux créer, et à quelle vitesse ? ». Si vous voulez apprendre à déléguer des pans entiers de votre travail de développeur à l'IA et livrer des produits plus vite, découvrez comment vous faire remplacer par l'IA et transformez votre façon de développer.
Pour aller plus loin
Reçois la cheatsheet Claude Code (gratuite)
Les 30 commandes, raccourcis et prompts que j'utilise tous les jours. Directement dans ta boîte mail.
Zéro spam. Désinscription en un clic.
Envie de maîtriser Claude Code ?
Rejoignez notre formation complète et apprenez à utiliser Claude Code comme un pro.
M'inscrire à la formation