useBreakpoints

This composable tracks the current viewport breakpoint and provides reactive boolean refs for each breakpoint size.

Usage

import { useBreakpoints } from '@flux-ui/components';

const { currentBreakpoint, xs, sm, md, lg, xl } = useBreakpoints();

// Use in a computed or watcher
if (md.value) {
    console.log('Viewport is at least medium');
}

Example

Switch a stack from horizontal to vertical depending on the active breakpoint. Resize the preview to see it in action.

Responsive layout

A card layout that switches direction at the `md` breakpoint.

Preview

StarterFor individuals.

ProFor growing teams.

EnterpriseFor large organizations.

Code

<template>
    <Preview>
        <FluxStack
            :direction="md ? 'horizontal' : 'vertical'"
            :gap="9">
            <FluxPane
                v-for="card in cards"
                :key="card.title"
                :style="md ? 'flex: 1' : 'width: 100%'">
                <FluxPaneBody>
                    <FluxStack :gap="6">
                        <strong>{{ card.title }}</strong>
                        <span style="font-size: .875rem; opacity: .6">{{ card.description }}</span>
                    </FluxStack>
                </FluxPaneBody>
            </FluxPane>
        </FluxStack>
    </Preview>
</template>

<script
    setup
    lang="ts">
    import { FluxPane, FluxPaneBody, FluxStack, useBreakpoints } from '@flux-ui/components';

    const {md} = useBreakpoints();

    const cards = [
        {title: 'Starter', description: 'For individuals.'},
        {title: 'Pro', description: 'For growing teams.'},
        {title: 'Enterprise', description: 'For large organizations.'}
    ];
</script>

Breakpoints

xs — 0px

Targets the smallest viewports. Active when the viewport width is 0px or more.

sm — 640px

Targets small viewports such as large phones in landscape mode.

md — 768px

Targets medium viewports such as tablets in portrait mode.

lg — 1024px

Targets large viewports such as tablets in landscape mode and small desktops.

xl — 1280px

Targets extra-large viewports such as full-size desktop screens.

Type declarations

type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl';

declare function useBreakpoints(): {
    readonly currentBreakpoint: Ref<Breakpoint | null>;
    readonly xs: Ref<boolean>;
    readonly sm: Ref<boolean>;
    readonly md: Ref<boolean>;
    readonly lg: Ref<boolean>;
    readonly xl: Ref<boolean>;
};