vuejs-ai/guides-développement-vue

Que fait guides-développement-vue ?

Une collection de bonnes pratiques et conseils pour le développement d'applications avec Vue.js. Cette compétence DOIT être appliquée lors du développement, du refactoring ou de la revue de projets Vue.js ou Nuxt.

Principes généraux

• Privilégier la Composition API : Utilisez la Composition API (avec <script setup>) pour les nouveaux composants, sauf si le projet utilise exclusivement l'Options API. La Composition API offre une meilleure réutilisabilité et une logique plus modulaire.
• Composants atomiques : Décomposez l'interface en petits composants réutilisables (un par dossier dans components/). Évitez les composants monolithiques.
• Nommage cohérent : Utilisez PascalCase pour les noms de composants et camelCase pour les props. Les événements doivent suivre la convention kebab-case (ex. @update:value).
• Gestion d'état centralisée : Pour les états partagés, utilisez Pinia (recommandé) plutôt que Vuex. Gardez l'état local lorsqu'il n'est pas partagé.
• Routage : Utilisez Vue Router avec des routes nommées et lazy-loading pour chaque module (via () => import(...)).
• Performance : Évitez les watchers inutiles, utilisez computed pour les dérivations, et appliquez v-memo ou keep-alive quand nécessaire.

Structure de projet recommandée

project/
  components/
    common/      # Composants réutilisables globaux
    ui/          # Composants d'interface utilisateur (boutons, modales)
    forms/       # Composants de formulaire
  composables/   # Logique réutilisable (hooks)
  pages/         # Pages (dans Nuxt, ou via Vue Router)
  store/         # Stores Pinia
  utils/         # Fonctions utilitaires
  views/         # Composants de vue (si non Nuxt)

Exemples

Composition API avec <script setup>

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

const props = defineProps({
  count: {
    type: Number,
    required: true
  }
})

const emit = defineEmits(['increment'])

const double = computed(() => props.count * 2)

function handleClick() {
  emit('increment')
}
</script>

<template>
  <div>
    <p>Compteur : {{ props.count }}</p>
    <p>Double : {{ double }}</p>
    <button @click="handleClick">Incrémenter</button>
  </div>
</template>

Utilisation de Pinia

// store/counter.js
import { defineStore } from 'pinia';

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

Ressources

• Documentation officielle Vue.js
• Guide de style Vue.js
• Documentation Nuxt
• Documentation Pinia