# 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>
← matchMedia Chrome →