Breakpoint

Allows to get reactive object on the current windows size.

WARNING

If Number or {Number}px it checks the defined breakpoint against window.innerWidth. bp >= window.innerWidth If MediaQuery is passed it will not be able to resolve the current breakpoint

State

The useBreakpoint function exposes the following reactive state:

import { useBreakpoint } from "vue-composable";

const { current, /* properties from the arguments */ L, XL } = useBreakpoint({
  L: 720,
  XL: 1280,
  S: "(min-width: 320px)" // also supports media query - it uses `useMatchMedia`
});

State	Type	Description
current	String	Smallest breakpoint key. where the breakpoint is an Number
...args	Args	returns the object with the same keys but with reactive boolean value

Methods

The useBreakpoint function exposes the following methods:

import { useBreakpoint } from "vue-composable";

const { remove } = useBreakpoint();

Signature	Description
remove	Manually removes the event listener

Example

Current breakpoint none

valid breakpoints:

Code

<template>
  <div>
    <div>Current breakpoint {{ current || "none" }}</div>
    <div>valid breakpoints:</div>
    <p><b v-if="S">Small</b></p>
    <p><b v-if="L">Large</b></p>
    <p><b v-if="XL">Extra Large</b></p>
  </div>
</template>

<script>
import { useBreakpoint } from "vue-composable";
export default {
  name: "breakpoint-example",
  setup() {
    // it will return object with reactive properties {XL: boolean, L: boolean, S: boolean}
    return useBreakpoint({ XL: 1280, L: 768, S: "(min-width: 320px)" });
  }
};
</script>