To be fair, I am a bit obsessed with both performance and ease of use. If curios, scroll down to How it works.
yarn add vue-responsiveness
npm i vue-responsiveness
https://codesandbox.io/s/kind-grass-93d5q4
Note: The default config value is set to Bootstrap 5's responsiveness breakpoints preset:
Presets.Bootstrap_5 = {
xs: 0,
sm: 576,
md: 768,
lg: 992,
xl: 1200,
xxl: 1400,
}import { VueResponsiveness } from 'vue-responsiveness'
createApp()
.use(VueResponsiveness)
.mount('#app')<!-- @media (min-width: 576px) -->
<template v-if="$matches.sm.min">
...content
</template>
<SomeComponent v-if="$matches.sm.max">
<!-- @media (max-width: 767.9px) -->
...content
</SomeComponent>
<div v-if="$matches.sm.only">
<!-- @media (min-width: 576px) and (max-width: 767.9px) -->
...content
</div>import { VueResponsiveness, Presets } from "vue-responsiveness";
app.use(VueResponsiveness, Presets.Tailwind_CSS)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.
app.use(VueResponsiveness, {
small: 0,
medium: 777,
large: 1234
})<template v-if="$matches.medium.only">
<!-- @media (min-width: 777px) and (max-width: 1233.9px) -->
...content
</template><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 on
@media (max-width: 991.9px) -->
<SomeComponent v-show="$matches.md.max" />import { useMatches } from 'vue-responsiveness'
const matches = useMatches()
const currentInterval = computed(() => matches.interval)
const trueOnSmOnly = computed(() => matches.isOnly('sm'))
const trueOnMdAndAbove = computed(() => matches.isMin('md'))- uses the native
window.matchMedia(queryString)and only reacts to changes in the query'smatchesvalue. It's the same API powering CSS media queries. - listeners are placed on the
MediaQueryListinstances, meaning they are garbage collected as soon as the app is unmounted, without leaving bound events behind on<body>orwindowobject. - 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.matchMadiais a few hundred times lighter than using the "traditional"resizeevent listener method