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:
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