Vue.js continue d’évoluer rapidement, avec la version 3.x désormais bien implantée et des nouveautés en 2025 qui poussent les développeurs à adapter leurs méthodes. Pour construire des applications robustes, maintenables et performantes, il est essentiel de suivre certaines bonnes pratiques.

1. Utiliser la Composition API partout

Introduite avec Vue 3, la Composition API est devenue la norme en 2025. Elle permet une meilleure organisation du code, facilite la réutilisation et améliore la lisibilité.

Pourquoi la Composition API ?

• Regroupement logique des fonctionnalités
• Meilleure gestion des états et effets secondaires
• Plus facile à tester

Exemple de composant avec Composition API

<script setup>
import { ref, computed } from 'vue';

const count = ref(0);

const increment = () => {
  count.value++;
};

const doubleCount = computed(() => count.value * 2);
</script>

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double: {{ doubleCount }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

2. Modulariser avec des composables

Pour ne pas répéter le même code dans plusieurs composants, il est recommandé d’extraire la logique réutilisable dans des composables.

Exemple de composable useCounter.js

import { ref, computed } from 'vue';

export function useCounter(initialValue = 0) {
  const count = ref(initialValue);
  
  const increment = () => {
    count.value++;
  };
  
  const doubleCount = computed(() => count.value * 2);
  
  return { count, increment, doubleCount };
}

Utilisation dans un composant

<script setup>
import { useCounter } from './composables/useCounter';

const { count, increment, doubleCount } = useCounter(5);
</script>

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double: {{ doubleCount }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

3. Typage strict avec TypeScript

Vue 3 a une intégration native avec TypeScript, ce qui est une pratique recommandée pour réduire les bugs et améliorer la lisibilité du code.

Exemple simple en TypeScript

<script setup lang="ts">
import { ref } from 'vue';

const message = ref<string>('Bonjour Vue 2025!');

function greet(name: string): string {
  return `Bonjour, ${name}`;
}
</script>

<template>
  <div>{{ greet(message) }}</div>
</template>

4. Gestion d’état centralisée avec Pinia

Pinia a remplacé Vuex comme solution officielle recommandée en 2025, grâce à sa simplicité et son intégration native avec la Composition API.

Exemple de store Pinia

// stores/counter.ts
import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0
  }),
  actions: {
    increment() {
      this.count++;
    }
  },
  getters: {
    doubleCount: (state) => state.count * 2
  }
});

Utilisation dans un composant

<script setup lang="ts">
import { useCounterStore } from '@/stores/counter';

const counterStore = useCounterStore();
</script>

<template>
  <div>
    <p>Count: {{ counterStore.count }}</p>
    <p>Double: {{ counterStore.doubleCount }}</p>
    <button @click="counterStore.increment">Increment</button>
  </div>
</template>

5. Optimisation des performances

Lazy loading des composants

Utilisez l’import dynamique pour charger les composants à la demande et alléger le bundle initial.

<script setup>
import { defineAsyncComponent } from 'vue';

const AsyncComponent = defineAsyncComponent(() => import('./MyComponent.vue'));
</script>

<template>
  <Suspense>
    <AsyncComponent />
    <template #fallback>
      <div>Chargement...</div>
    </template>
  </Suspense>
</template>

Utiliser v-memo pour éviter les recalculs inutiles

Depuis Vue 3.3, v-memo permet de mémoriser le rendu d’un bloc si ses dépendances ne changent pas.

<template>
  <div v-memo="[someReactiveValue]">
    <!-- contenu coûteux à rendre -->
  </div>
</template>

6. Respecter l’accessibilité (a11y)

Ne négligez jamais l’accessibilité. Utilisez des attributs ARIA, des rôles sémantiques, et testez avec des lecteurs d’écran.

Exemple simple

<button aria-label="Fermer la fenêtre" @click="close">X</button>

7. Tests unitaires et E2E

• Utilisez Vitest ou Jest pour les tests unitaires.
• Cypress ou Playwright pour les tests end-to-end.

Exemple de test avec Vitest

import { describe, it, expect } from 'vitest';
import { useCounter } from './useCounter';

describe('useCounter', () => {
  it('initialise avec la valeur donnée', () => {
    const { count } = useCounter(10);
    expect(count.value).toBe(10);
  });

  it('incrémente correctement', () => {
    const { count, increment } = useCounter();
    increment();
    expect(count.value).toBe(1);
  });
});

8. Linter et formatage automatiques

Utilisez ESLint avec les règles Vue officielles et Prettier pour assurer un code propre et cohérent.

Conclusion

En 2025, Vue.js encourage des pratiques modernes pour produire des applications maintenables, performantes et robustes :

• Préférez la Composition API à l’Options API.
• Modulaire via des composables réutilisables.
• Intégrez TypeScript pour plus de sécurité.
• Gérez l’état global avec Pinia.
• Optimisez le chargement et le rendu.
• Ne négligez jamais l’accessibilité.
• Automatisez les tests et le formatage.

Ces bonnes pratiques vous aideront à tirer le meilleur de Vue.js et à rester performant dans vos projets.