La largeur de la fenêtre — exercice corrigé de Vue : construire une application web (école d'ingénieur) (chapitre 8)

La largeur de la fenêtre

Cycle de vie et composables · niveau 2

Énoncé

Écrire un composable useLargeurFenetre() qui rend la largeur de la fenêtre, tenue à jour, et un booléen qui dit si elle est sous 768 pixels. Quel crochet ajoute l'écouteur, lequel le retire ?

Corrigé


import { computed, onMounted, onUnmounted, ref } from "vue";

/** La largeur de la fenêtre, et si elle est sous 48rem (768 px). */
export function useLargeurFenetre() {
  const largeur = ref(window.innerWidth);
  const mettreAJour = () => (largeur.value = window.innerWidth);

  onMounted(() => window.addEventListener("resize", mettreAJour));
  onUnmounted(() => window.removeEventListener("resize", mettreAJour));

  const estMobile = computed(() => largeur.value < 768);
  return { largeur, estMobile };
}

À 600, puis 375, puis 1024 pixels de large :


600 px : affichage téléphone
375 px : affichage téléphone
1024 px : affichage large

onMounted ajoute l'écouteur, onUnmounted le retire. Pour une simple mise en page, une requête média CSS suffit (livre CSS) ; ce composable sert quand le code doit changer, par exemple pour afficher un composant différent sur téléphone.