A tiny, performant, and intuitive Vue 3 plugin for working with responsive breakpoints and media queries at runtime.
npm install vue-responsivenesswindow.matchMedia for efficient updates, hundreds of times lighter than resize event listeners
orientation, hover capability, and user preferences (prefers-color-scheme, prefers-contrast and prefers-reduced-motion)
$matches object (for templates) and a useMatches() composable (for )
bash
pnpm install vue-responsiveness
`
$3
`bash
yarn add vue-responsiveness
`
$3
`bash
npm i vue-responsiveness
`
---
๐ Quick Start & Basic Usage
This plugin provides reactive access to various media queries, making it easy to adapt your Vue components to different screen sizes and user preferences. You can access the responsiveness state through a global property ($matches) or using a composable function (useMatches()).
The default breakpoint preset is set to Bootstrap 5. To use a different preset, or to define your own bespoke intervals, see Breakpoint Management section below.
$3
Codesandbox
$3
#### main.ts
`ts
import { createApp } from 'vue'
import App from './App.vue'
import { VueResponsiveness } from 'vue-responsiveness'
createApp()
.use(VueResponsiveness) // Uses Bootstrap 5 presets when no config specified
.mount('#app')
`
#### Global $matches object
Accessible directly within any Vue component's . Ideal for simple conditional rendering.
`html
Current Breakpoint: {{ $matches.current || 'N/A' }}
This content shows on small screens and larger.
This content shows on medium screens and smaller.
You are currently on a large desktop screen.
Device is in portrait mode.
You are on a touch-only device.
Dark mode is preferred.
User prefers reduced motion.
`
#### Composable (useMatches())
Use this composable within