Lightweight Breakpoints Management Plugin – Vue Responsiveness

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:

Lightweight Breakpoints Management Plugin

Changelog:

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

Download Details:

Author: codemonk-digital

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

Download Link: https://github.com/codemonk-digital/vue-responsiveness/archive/refs/heads/main.zip

Official Website: https://github.com/codemonk-digital/vue-responsiveness

Install & Download:

# Yarn
$ yarn add vue-responsiveness

# NPM
$ npm i vue-responsiveness

Add Comment