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

<script
    setup
    lang="ts">
    import { FluxFlex, FluxPane, FluxPaneBody, 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. Active when the viewport width is 640px or more.

md (768px)

Targets medium viewports such as tablets in portrait mode. Active when the viewport width is 768px or more.

lg (1024px)

Targets large viewports such as tablets in landscape mode and small desktops. Active when the viewport width is 1024px or more.

xl (1280px)

Targets extra-large viewports such as full-size desktop screens. Active when the viewport width is 1280px or more.

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>;
};