Formateur Vue.js

Formatez vos composants Vue.js Single File Components (SFC).

Composant Vue

Resultat

Pret -

Options

Guide complet : Vue.js Single File Components

Vue.js : le framework progressif

Vue.js est un framework JavaScript progressif pour construire des interfaces utilisateur. Créé par Evan You en 2014, il combine la simplicité d'Angular avec la flexibilité de React. Son approche incrémentale permet de l'adopter progressivement — d'une simple amélioration de page à une SPA complète.

J'utilise Vue depuis la version 2 et j'apprécie particulièrement sa courbe d'apprentissage douce et sa documentation exemplaire. Le concept de Single File Components (SFC) est brillant : regrouper template, logique et styles dans un seul fichier facilite le développement et la maintenance.

Structure d'un composant Vue SFC

📝 Template

Section HTML avec syntaxe de template Vue : directives (v-if, v-for, v-model), binding ({{ }}, :attr), événements (@click, @input).

⚙️ Script

Logique du composant : Options API (data, methods, computed, watch) ou Composition API (setup, ref, reactive, onMounted).

🎨 Style

CSS scopé au composant avec scoped. Support SCSS, Less, ou CSS Modules avec lang="scss" et module.

🚀 Script Setup

Syntaxe Vue 3.2+ : <script setup>. Plus concis, meilleure inférence TypeScript, compilation optimisée.

Fonctionnalités clés Vue 3

  • Composition API : Logique réutilisable avec composables, meilleure organisation du code
  • Teleport : Rendre des éléments en dehors de la hiérarchie du composant (modals, tooltips)
  • Suspense : Gérer les composants async avec des états de chargement
  • Fragments : Multiple root elements dans un template
  • TypeScript natif : Support TypeScript de première classe
  • defineProps/defineEmits : Macros de compilation pour une syntaxe plus propre

Écosystème Vue.js

  • Vue Router : Routing pour SPA avec lazy loading et guards
  • Pinia : State management moderne (remplace Vuex)
  • Nuxt : Framework fullstack avec SSR/SSG
  • Vite : Build tool ultra-rapide (créé par Evan You)
  • VueUse : Collection de composables utilitaires

Traitement local : confidentialité assurée

Ce formateur utilise Prettier pour traiter vos composants Vue directement dans votre navigateur. Aucune donnée n'est envoyée à un serveur — formatez votre code propriétaire en toute confiance.

Questions fréquentes sur Vue.js

Options API ou Composition API : laquelle choisir ?

Options API (data, methods, computed) :

  • Plus intuitive pour les débutants
  • Structure familiale et organisée
  • Bonne pour les composants simples

Composition API (setup, ref, reactive) :

  • Logique réutilisable via composables
  • Meilleure organisation pour composants complexes
  • Inférence TypeScript supérieure

Recommandation : Composition API avec <script setup> pour les nouveaux projets Vue 3.

Comment utiliser TypeScript avec Vue ?

Configuration :

  • <script setup lang="ts"> dans vos SFC
  • Créez le projet avec npm create vue@latest et sélectionnez TypeScript
  • Installez vue-tsc pour la vérification de type

Typage des props :

  • defineProps<{ userId: number, name?: string }>()
  • Ou avec defaults : withDefaults(defineProps<Props>(), { ... })

Vue 3 a un excellent support TypeScript natif.

Quelle différence entre ref et reactive ?

ref() :

  • Pour valeurs primitives (string, number, boolean)
  • Accès via .value dans le script
  • Déballé automatiquement dans le template

reactive() :

  • Pour objets et tableaux
  • Accès direct aux propriétés
  • Ne peut pas être réassigné entièrement

Conseil : Utilisez ref() par défaut, reactive() pour les objets complexes.

Comment créer des composables réutilisables ?

Un composable est une fonction qui encapsule de la logique réactive :

  • Créez composables/useMouse.ts
  • Exportez une fonction useMouse()
  • Utilisez ref, computed, lifecycle hooks à l'intérieur
  • Retournez les valeurs/fonctions réactives

Exemple : const { x, y } = useMouse()

VueUse offre des dizaines de composables prêts à l'emploi.

Pinia ou Vuex pour le state management ?

Pinia est le nouveau standard (officiellement recommandé pour Vue 3) :

  • API plus simple et intuitive
  • Pas de mutations, seulement des actions
  • Excellent support TypeScript
  • Stores modulaires par défaut
  • DevTools intégrés

Vuex reste valide pour les projets existants mais Pinia est préféré pour les nouveaux.

Mon code Vue est-il sécurisé avec cet outil ?

Oui, totalement. Le formatage s'exécute entièrement dans votre navigateur :

  • Prettier fonctionne localement en JavaScript
  • Aucune requête réseau n'envoie votre code
  • Vos composants Vue ne quittent jamais votre machine
  • L'outil fonctionne même hors ligne après chargement

Formatez vos composants propriétaires en toute confidentialité.