Breakpoint Service #
Vuestic UI provides breakpoint service that allows you to control every aspect of your application which depends on the window size.
Current breakpoint is:
We use the following breakpoints:
.xs - (< 640px) - Extra small devices
.sm - (>= 640px && < 1024px) - Small devices
.md - (>= 1024px && < 1440px) - Medium devices
.lg - (>= 1440px && < 1920px) - Large devices
.xl - (>= 1920) - Extra large devices
Helpers #
Breakpoint service provides amount of helpers via useBreakpoint composable.
() => {
const breakpoint = useBreakpoint();
if (breakpoint.xl) {
console.log("It's XL breakpoint!");
}
};Helpers list:
| name | type | description |
|---|---|---|
| current |
| Current breakpoint name. |
| thresholds |
| List of the current thresholds. |
| width |
| Current window width ( |
| height |
| Current window height ( |
| xs |
|
|
| sm |
|
|
| md |
|
|
| lg |
|
|
| xl |
|
|
| smUp |
|
|
| mdUp |
|
|
| lgUp |
|
|
| smDown |
|
|
| mdDown |
|
|
| lgDown |
|
|
Threshold Class #
Optional part of the service - reactive body class (.va-screen-lg for example) that allows you to build the following CSS constructions:
.va-screen-lg .layout{width:1000px}.va-screen-sm .layout{width:300px}Configuring #
You can specify your own thresholds values, disable threshold class support or the whole service via Vuestic UI configuration object.
import { createVuestic } from "vuestic-ui";
createApp(App)
.use(
createVuestic({
config: {
breakpoint: {
enable: true,
bodyClass: false,
thresholds: {
xs: 0,
sm: 320,
md: 768,
lg: 1024,
xl: 1280,
},
},
},
})
)
.mount("#app");