Package Exports

vue-responsiveness

Readme

Vue Responsiveness

Extremely light (~1 kB gzipped) plugin in terms of both size and runtime resource consumption.

I wrote it because I wanted something really easy to use, as light as possible.
To be fair, I am a bit obsessed with both performance and ease of use. If curios, scroll down to "How it works".

Installation

yarn

yarn add vue-responsiveness

npm

npm i vue-responsiveness

Basic demo

https://codesandbox.io/s/kind-grass-93d5q4

Usage

The default breakpoints value is set to Bootstrap 5's responsiveness breakpoints preset:

main.ts

import { VueResponsiveness } from 'vue-responsiveness'

createApp()
   .use(VueResponsiveness)
   .mount('#app')

in any `<template />`:

<!-- sm and above
  @media (min-width: 576px) -->
<template v-if="$matches.sm.min">
   ...content
</template>

<!-- sm and below
  @media (max-width: 767.9px) -->
<SomeComponent v-if="$matches.sm.max">
  ...content
</SomeComponent>

<!-- sm only
  @media (min-width: 576px) and (max-width: 767.9px) -->
<div v-if="$matches.sm.only">
  ...content
</div>

Breakpoint presets:

import { VueResponsiveness, Presets } from "vue-responsiveness";

app.use(VueResponsiveness, Presets.Tailwind_CSS)

All available presets:

Bootstrap_3, Bootstrap_4, Bootstrap_5, Bulma, Chakra, Foundation, Ionic, Material_Design, Materialize, Material_UI, Quasar, Semantic_UI, Skeleton, Tailwind_CSS, Vuetify, Windi_CSS

Notes:

If you maintain a CSS framework (or use one often) and want its preset added, open an issue or a PR.
If you spot any inconsistency in the presets (either my typo or some library update), please, let me know, I'll correct it.

Bespoke intervals:

app.use(VueResponsiveness, {
  small: 0,
  medium: 777,
  large: 1234
})

<!-- medium only
  @media (min-width: 777px) and (max-width: 1233.9px) -->
<template v-if="$matches.medium.only">
  ...content
</template>

Hide components, (while still rendering them) - usage with `v-show`:

<SomeComponent /> below will be rendered at all times but will only be displayed on md and below:

<!-- rendered at all times (keeps listeners while hidden), but only displayed while: 
  @media (max-width: 991.9px) -->
<SomeComponent v-show="$matches.md.max" />

How it works:

uses the native window.matchMedia(queryString) and only reacts to changes in the query's matches value. It's the same API powering CSS media queries.
listeners are placed on the MediaQueryList instances, meaning they are garbage collected as soon as the app is unmounted, without leaving bound events behind on <body> or window object.
no global pollution
having it app-wide is lighter than having listeners bound by each component using it
in terms of memory and/or CPU consumption, using window.matchMadia is a few hundred times lighter than using the "traditional" resize event listener method

Got issues?

Let me know!