VueUse: The Composable Library
useLocalStorage, useMouse, useWindowSize, useIntersectionObserver — practical VueUse.
VueUse: The Composable Library is a free Vue Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Vue Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
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/coreuseLocalStorage 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 localStorageReactive 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?
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.
Frequently asked questions
Is the “VueUse: The Composable Library” lesson free?
Yes — the full text of “VueUse: The Composable Library” is free to read here on the web, and the Vue Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Vue Academy course, upgrade to CoddyKit PRO.
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; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.
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
- What Makes a Good Composable
- useCounter: A Simple Composable
- useFetch: Async Data Composable
- VueUse: The Composable Library