Vue Academy · Lesson

VueUse: The Composable Library

useLocalStorage, useMouse, useWindowSize, useIntersectionObserver — practical VueUse.

Lesson 4 of 413 steps

VueUse: The Composable Library is a free Vue Academy lesson on CoddyKit. This is lesson 4 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the Vue Academy learning path, and your progress syncs across the web and the CoddyKit app. The Vue Academy course includes 4 lessons in total.

What Is VueUse

VueUse (@vueuse/core) is a large collection of ready-made composables for common tasks - storage, sensors, browser APIs, and more. It saves you from reinventing them.

npm install @vueuse/core

useLocalStorage for Persistence

useLocalStorage returns a ref synced to localStorage. Changes persist across reloads automatically, with serialization handled for you.

import { useLocalStorage } from "@vueuse/core";
const name = useLocalStorage("name", "Guest");
// name.value persists in localStorage

Reactive and Persistent

The returned ref behaves like any other - bind it with v-model - but its value survives page refreshes because VueUse writes through to storage.

<input v-model="name" />

useMouse for Cursor Position

useMouse tracks the pointer and returns reactive x and y refs that update as the cursor moves.

import { useMouse } from "@vueuse/core";
const { x, y } = useMouse();

Displaying Mouse Coordinates

Bind the refs in the template; they update on every mousemove without you wiring listeners.

<p>Cursor: {{ x }}, {{ y }}</p>

useWindowSize for Dimensions

useWindowSize gives reactive width and height refs, updating on resize - great for responsive logic in script.

import { useWindowSize } from "@vueuse/core";
const { width, height } = useWindowSize();

Responsive Logic

Combine window size with a computed to drive layout decisions reactively.

import { computed } from "vue";
const isMobile = computed(() => width.value < 768);

useIntersectionObserver for Lazy Loading

useIntersectionObserver tells you when an element enters the viewport - the foundation for lazy-loading images or infinite scroll.

import { useIntersectionObserver } from "@vueuse/core";
const target = ref(null);

Triggering on Visibility

Pass a template ref and a callback that fires with intersection entries. Load the image or fetch more data when the target is visible.

useIntersectionObserver(target, ([entry]) => {
  if (entry.isIntersecting) loadImage();
});

Automatic Cleanup

A big benefit: VueUse composables register and remove their own listeners and observers on unmount. You get correct cleanup for free.

Why Use VueUse

It is tree-shakable, well-tested, and TypeScript-first. For common needs - storage, sensors, network, time - reach for VueUse before writing your own composable.

Quick Check

Which VueUse composable persists a ref to localStorage?

Answer it in the interactive lesson

Recap

You toured VueUse: useLocalStorage (persistent state), useMouse (cursor position), useWindowSize (reactive dimensions), and useIntersectionObserver (lazy-loading trigger), all with automatic cleanup and tree-shaking.

Free to start

Learn HTML with an AI tutor — free

Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.

Courses: 42
Lessons: 156

Start learning free View the full course

Frequently Asked Questions

Is the “VueUse: The Composable Library” lesson free?

Yes — any 3 lessons of the Vue Academy learning path, including “VueUse: The Composable Library”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The Vue Academy course includes 4 lessons in total.

What will I learn in “VueUse: The Composable Library”?

useLocalStorage, useMouse, useWindowSize, useIntersectionObserver — practical VueUse. You practise Vue Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Vue Academy?

No prior experience is required. Vue Academy on CoddyKit is structured for beginners through advanced learners, so you can start here or from the beginning and move at your own pace. This is lesson 4 of 4.

How long does the “VueUse: The Composable Library” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Vue Academy lesson?

Yes. Every Vue Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Vue Academy