useBreakpoints
Reactive viewport breakpoints.
Demo
Current breakpoints: []
Active breakpoint:
xs(<640px): false
xs(<=640px): false
sm: false
md: false
lg: false
xl: false
2xl: false
greaterThanBreakPoint: false
Usage
js
import { breakpointsTailwind, useBreakpoints } from '@hungpvq/shared-core';
const breakpoints = useBreakpoints(breakpointsTailwind);
const smAndLarger = breakpoints.greaterOrEqual('sm'); // sm and larger
const largerThanSm = breakpoints.greater('sm'); // only larger than sm
const lgAndSmaller = breakpoints.smallerOrEqual('lg'); // lg and smaller
const smallerThanLg = breakpoints.smaller('lg'); // only smaller than lg
vue
<script setup lang="ts">
import { useBreakpoints } from '@hungpvq/shared-core';
const breakpoints = useBreakpoints({
mobile: 0, // optional
tablet: 640,
laptop: 1024,
desktop: 1280,
});
// Can be 'mobile' or 'tablet' or 'laptop' or 'desktop'
const activeBreakpoint = breakpoints.active();
// true or false
const laptop = breakpoints.between('laptop', 'desktop');
</script>
<template>
<div :class="activeBreakpoint">...</div>
</template>
Presets
- Tailwind:
breakpointsTailwind
- Bootstrap v5:
breakpointsBootstrapV5
- Vuetify v2:
breakpointsVuetifyV2
(deprecated:breakpointsVuetify
) - Vuetify v3:
breakpointsVuetifyV3
- Ant Design:
breakpointsAntDesign
- Quasar v2:
breakpointsQuasar
- Sematic:
breakpointsSematic
- Master CSS:
breakpointsMasterCss
- Prime Flex:
breakpointsPrimeFlex
Breakpoint presets are deliberately not auto-imported. They have to be explicitly imported:
js
import { breakpointsTailwind } from '@hungpvq/shared-core';
// and so on