A simple plugin for Vue 3 that uses matchMedia for when css media queries won't give you enough. Named after one of Keanu Reeves' finest films, Pointbreak

npm install vue-pointbreak

import { createApp } from 'vue';
import pointbreak from 'vue-pointbreak';
import App from './App.vue';

createApp(App).use(pointbreak).mount('#app');

Composition API:

<script setup lang="ts">
import { usePointbreak } from 'vue-pointbreak';

const pointbreak = usePointbreak();
</script>

Options API:

inject: ['pointbreak']

app.use(pointbreak, config: {
  inclusive: boolean,
  breakpoints: BreakpointObject
})

By default, the plugin uses

// Default config
const config = {
  inclusive: true,
  breakpoints: TAILWIND_BREAKPOINTS
}
// const TAILWIND_BREAKPOINTS = {
//   xs: 0,
//   sm: 640,
//   md: 768,
//   lg: 1024,
//   xl: 1280,
//   xxl: 1536,
// };

Inclusive means that pointbreak will keep track of all active breakpoints (matches = true on the MediaQueryListEvent). This is intended for true mobile-first approaches.

For instance, using the lookup with the following breakpoints:

const TAILWIND_BREAKPOINTS = {
  xs: 0,
  sm: 640,
  md: 768,
  lg: 1024,
  xl: 1280,
  xxl: 1536,
};

pointbreak.xs will return true for all breakpoints

pointbreak.md will only return true for breakpoints >= 768

When you opt in for !inclusive, the plugin creates specific breakpoints with min and max values.

{
  "xs": "(min-width: 0px) and (max-width: 639px)",
  "sm": "(min-width: 640px) and (max-width: 767px)",
  "md": "(min-width: 768px) and (max-width: 1023px)",
  "lg": "(min-width: 1024px) and (max-width: 1279px)",
  "xl": "(min-width: 1280px) and (max-width: 1535px)",
  "xxl": "(min-width: 1536px)"
}

pointbreak in !inclusive mode, will create a lookup with the current breakpoint as true, the rest of the breakpoints will be false

For instance if the viewport is 769, pointbreak.md will be true, and at 767 it will be sm

pointbreak = {
  xs: false,
  sm: false,
  md: true,
  lg: false,
  xl: false,
  xxl: false
}