Epicmax - We are the core team behind Vuestic UI and Vuestic Admin and frontend development company specializing in Vue.js since our founding in 2017.
🔥🔥🔥 Hire us

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:

Open in GitHub

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:

nametypedescription
current

string<"xs" | "sm" | "md" | "lg" | "xl">

Current breakpoint name.

thresholds

Record<"xs" | "sm" | "md" | "lg" | "xl", number>

List of the current thresholds.

width

number

Current window width (px).

height

number

Current window height (px).

xs

boolean

true only for mentioned threshold.

sm

boolean

true only for mentioned threshold.

md

boolean

true only for mentioned threshold.

lg

boolean

true only for mentioned threshold.

xl

boolean

true only for mentioned threshold.

smUp

boolean

true for mentioned threshold and all above it.

mdUp

boolean

true for mentioned threshold and all above it.

lgUp

boolean

true for mentioned threshold and all above it.

smDown

boolean

true for mentioned threshold and all below it.

mdDown

boolean

true for mentioned threshold and all below it.

lgDown

boolean

true for mentioned threshold and all below it.

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");