Browser APIs Composables

useBreakpoints / useMediaQuery

useBreakpoints · import { useBreakpoints, useMediaQuery } from "@baklavue/composables"

Responsive breakpoints. useBreakpoints returns isMobile, isTablet, isDesktop. useMediaQuery for custom queries.

const { isMobile, isTablet, isDesktop } = useBreakpoints();
const matches = useMediaQuery("(max-width: 768px)");
const { width, height } = useWindowSize();

useElementSize

useElementSize · import { useElementSize } from "@baklavue/composables"

Reactive element width and height using ResizeObserver.

const target = ref<HTMLElement | null>(null);
const { width, height } = useElementSize(target);

useContainerScroll

useContainerScroll · import { useContainerScroll } from "@baklavue/composables"

Reactive scroll position inside a scrollable container. RAF-throttled.

const container = ref<HTMLElement | null>(null);
const { scrollTop, scrollLeft } = useContainerScroll(container);

useSticky

useSticky · import { useSticky } from "@baklavue/composables"

Detect when a sticky element is stuck at the top of the viewport.

const header = ref<HTMLElement | null>(null);
const { isSticky } = useSticky(header);

Options: threshold, scrollTarget

useIntersectionObserver

useIntersectionObserver · import { useIntersectionObserver } from "@baklavue/composables"

Detects when a target element enters or leaves the viewport. Lazy loading, scroll animations.

const isVisible = useIntersectionObserver(target, { threshold: 0.5 });