Vue Academy · Leçon

Importer et utiliser des composables dans script setup

Importation de composables, utilisation de composables VueUse tiers, organisation des importations.

Importer et utiliser des composables dans script setup est une leçon Vue Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Vue Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Vue Academy comprend 4 leçons au total.

Les composables et script setup

Les composables sont des fonctions qui regroupent une logique réactive pour la réutiliser. Avec <script setup>, leur utilisation se résume à les importer et à les appeler au niveau supérieur.

Importer au niveau supérieur

Appelez toujours un composable au niveau supérieur de <script setup> — jamais dans une condition, une boucle ou une fonction imbriquée. Cela garantit que Vue enregistre correctement sa réactivité et ses hooks de cycle de vie.

<script setup>
import { useCounter } from './useCounter'
const { count, increment } = useCounter()
</script>

Pourquoi le niveau supérieur est important

Les composables enregistrent souvent des hooks de cycle de vie comme onMounted ou configurent des observateurs. Ceux-ci doivent s'exécuter pendant la configuration du composant, ce qui n'est possible que si vous appelez le composable de manière synchrone au niveau supérieur.

Déstructurer uniquement ce dont vous avez besoin

Un composable renvoie un objet contenant des valeurs réactives et des fonctions. Ne déstructurez que ce qu'utilise le composant ; renommez les éléments pour éviter les collisions lorsque vous appelez deux fois le même composable.

<script setup>
import { useMouse } from './useMouse'
const { x: mouseX, y: mouseY } = useMouse()
</script>

Découvrez VueUse

VueUse est une bibliothèque populaire de composables prêts à l'emploi. Au lieu d'écrire vous-même une logique courante, importez un composable testé. Installez-la une seule fois, puis importez ce dont vous avez besoin.

<script setup>
import { useLocalStorage } from '@vueuse/core'
const name = useLocalStorage('name', 'Alice')
</script>

useLocalStorage en action

useLocalStorage renvoie un ref synchronisé avec localStorage. Modifiez le ref et le stockage du navigateur est mis à jour ; rechargez la page et la valeur est conservée.

<template>
  <input v-model="name" />
  <p>Saved: {{ name }}</p>
</template>

useMouse pour des coordonnées réactives

useMouse suit la position du pointeur sous forme de refs réactifs. Il ajoute et supprime l'écouteur d'événements à votre place, vous n'avez donc jamais à gérer manuellement le nettoyage.

<script setup>
import { useMouse } from '@vueuse/core'
const { x, y } = useMouse()
</script>

<template>
  <p>{{ x }}, {{ y }}</p>
</template>

Les composables s'assemblent

Un composable peut appeler d'autres composables. Cette mise en couches constitue le cœur de l'API de composition : construisez de petits éléments et combinez-les pour créer des fonctionnalités plus vastes.

import { useMouse } from '@vueuse/core'

export function useMouseDistance() {
  const { x, y } = useMouse()
  const distance = computed(() => Math.hypot(x.value, y.value))
  return { distance }
}

await de niveau supérieur

<script setup> prend directement en charge await au niveau supérieur. Le composant devient une configuration asynchrone et le framework peut suspendre le rendu jusqu'à la résolution de la promesse.

<script setup>
const res = await fetch('/api/user')
const user = await res.json()
</script>

Suspense avec une configuration asynchrone

Un composant utilisant await au niveau supérieur doit être enveloppé dans une limite <Suspense> par son parent. Suspense affiche un contenu de secours jusqu'à la fin de la configuration asynchrone.

<template>
  <Suspense>
    <AsyncUser />
    <template #fallback>Loading...</template>
  </Suspense>
</template>

Bonnes pratiques

Nommez les composables avec le préfixe use.
Appelez-les uniquement au niveau supérieur.
Renvoyez des refs (ou un reactive enveloppé dans toRefs).
Préférez VueUse pour les besoins courants avant d'écrire vos propres solutions.

Vérification rapide

Vérifiez votre compréhension des composables.

Récapitulatif

Vous avez appris à utiliser les composables :

Importez-les et appelez-les au niveau supérieur de <script setup>.
Déstructurez (et renommez) les éléments dont vous avez besoin.
VueUse propose des composables prêts à l'emploi comme useLocalStorage et useMouse.
await au niveau supérieur rend la configuration asynchrone et s'associe à <Suspense>.

Questions Fréquemment Posées

La leçon « Importer et utiliser des composables dans script setup » est-elle gratuite ?

Oui — le texte complet de « Importer et utiliser des composables dans script setup » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Vue Academy, passe à CoddyKit PRO. Le cours Vue Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Importer et utiliser des composables dans script setup » ?

Importation de composables, utilisation de composables VueUse tiers, organisation des importations. Tu pratiques Vue Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Vue Academy ?

Aucune expérience préalable n'est requise. Vue Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.

Combien de temps prend la leçon « Importer et utiliser des composables dans script setup » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Vue Academy ?

Oui. Chaque leçon Vue Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

Introduction à script setup
defineProps et defineEmits
defineExpose et useAttrs
Importer et utiliser des composables dans script setup

← Retour à Vue Academy