10 Conseils pour Écrire un Code Vue.js Plus Propre

Lorsque vous passez d’un projet à un autre, il y a souvent une période d’adaptation pour comprendre le flux de travail et le processus de développement. Mais en Vue.js, il existe des bonnes pratiques universelles pour créer des projets maintenables et lisibles.

Dans cet article, je vous présente 10 conseils pratiques pour écrire un code Vue.js plus propre. Que vous soyez débutant ou expérimenté, ces astuces vous aideront à améliorer vos projets Vue.

🟢 10 Conseils pour un Code Vue.js Plus Propre

Un code propre et organisé est la clé d’une application réussie. Voici des astuces simples mais puissantes pour écrire un code de qualité dans vos projets Vue.js.

1. Utilisez l’API de Composition avec Sagesse

Au lieu de tout intégrer dans la méthode setup(), divisez vos logiques complexes en composables réutilisables pour plus de modularité.

// Exemple de composable personnalisé
export function useFetchData(apiUrl) {
  const data = ref(null);
  const error = ref(null);

  async function fetchData() {
    try {
      const response = await fetch(apiUrl);
      data.value = await response.json();
    } catch (err) {
      error.value = err;
    }
  }

  return { data, error, fetchData };
}

2. Respectez les Conventions de Nommage de Vue

Utilisez le PascalCase pour les fichiers de composants et le kebab-case dans les templates.

// Nom du fichier
UserProfile.vue

// Utilisation dans un template
<UserProfile /> ou <user-profile />

3. Évitez la Surcharge avec Vuex ou Pinia

Gardez les états temporaires (comme les modales) locaux au composant plutôt que dans la gestion d’état globale.

const showModal = ref(false);

4. Utilisez les Slots Nommés

Les slots permettent de rendre vos composants réutilisables et flexibles.

<template>
  <div class="card">
    <slot name="header"></slot>
    <slot></slot>
  </div>
</template>

5. Utilisez les Styles Scopés

Protégez vos composants des conflits CSS avec <style scoped>.

<style scoped>
.card {
  background-color: #f8f9fa;
}
</style>

6. Écrivez des Composants Réutilisables

Créez des composants spécifiques et évitez les designs trop génériques.

<template>
  <button :class="buttonClass" @click="onClick">{{ label }}</button>
</template>

<script setup>
defineProps({
  label: String,
  type: { type: String, default: 'primary' }
});

const buttonClass = computed(() => `btn btn-${type}`);
</script>

7. Gérez les Codes Asynchrones Proprement

Encapsulez les appels API dans des composables pour une meilleure gestion des erreurs.

import { useFetchData } from './composables/useFetchData';

const { data, error, fetchData } = useFetchData('https://api.example.com/posts');
fetchData();

8. Documentez Vos Props et Événements

Utilisez defineProps et defineEmits pour définir et documenter vos composants.

<script setup>
defineProps({
  title: { type: String, required: true }
});

defineEmits(['update-title']);
</script>

9. Configurez ESLint et Prettier

Assurez la qualité du code en utilisant ESLint et Prettier.

npm install eslint @vue/eslint-config-standard --save-dev

10. Gardez Vos Templates Simples

Placez les logiques complexes dans des computed ou des méthodes.

// Mauvais
<div>{{ items.filter(item => item.active).length }} éléments actifs</div>

// Bon
const activeItems = computed(() => items.filter(item => item.active));
<div>{{ activeItems.length }} éléments actifs</div>

📖 Envie d’Aller Plus Loin ?

Pour approfondir vos connaissances en Vue, consultez Vue School. Vous y trouverez des cours détaillés pour devenir un expert en Vue.js et Nuxt.

✅ Résumé

Félicitations ! En appliquant ces conseils, vous créerez des applications Vue.js plus faciles à maintenir, scalables et performantes. Commencez dès aujourd’hui par adopter quelques-unes de ces pratiques dans vos projets.

À bientôt, et comme toujours, codez avec plaisir ! 🖥️