Lightweight Breakpoints Management Plugin – Vue Responsiveness

Install & Download:

# Yarn
$ yarn add vue-responsiveness
# NPM
$ npm i vue-responsiveness

Description:

A tiny Vue.js component to manage breakpoints in your applications.

How to use it:

1. Import and register the Vue Responsiveness plugin.

import { VueResponsiveness } from 'vue-responsiveness'
createApp()
  .use(VueResponsiveness)
  .mount('#app')

2. Import a breakpoint preset. OPTIONAL.

• Bootstrap_3
• Bootstrap_4
• Bootstrap_5 (Default)
• Bulma
• Chakra
• Foundation
• Ionic
• Material_Design
• Materialize
• Material_UI
• Quasar
• Semantic_UI
• Skeleton
• Tailwind_CSS
• Vuetify
• Windi_CSS

import { VueResponsiveness, Presets } from "vue-responsiveness";
app.use(VueResponsiveness, Presets.Vuetify)

3. Listen for breakpoints in your app.

<template v-if="$matches.sm.min">
  ...
</template>
<SomeComponent v-if="$matches.sm.max">
  ...
</SomeComponent>
<div v-if="$matches.sm.only">
  ...
</div>

Preview:

Changelog:

04/08/2024

• bugfix

04/03/2024

• fixed compat with [email protected]

v0.1.6 (11/25/2023)

• bugfixes

v0.1.5 (08/24/2023)

• bugfixes

v0.1.4 (04/17/2023)

• updated dependencies

v0.1.2 (03/12/2023)

• removed SSR guards on

v0.1.1 (03/10/2023)

• added SSR compatibility