A Vue.js Directive For Responsivity – Vue-Responsive

Description:

Vue-Responsive is a Vue directive to use responsive breakpoints on HTML elements.

How to use it:

1. Import and register the vue-responsive.

import responsive from 'vue-responsive'
Vue.use(responsive);

2. Show & hide elements using the v-responsive directive.

<div v-responsive.lg.xl>Visible on desktop</div>
<div v-responsive.md>Visible on tablet</div>
<div v-responsive.sm.xs >Visible on mobile</div>

Preview:

Vue-Responsive

Changelog:

v1.3.0 (01/23/2022)

  • Update

Download Details:

Author: reinerBa

Live Demo: https://reinerba.github.io/Vue-Responsive/dist/

Download Link: https://github.com/reinerBa/Vue-Responsive/archive/master.zip

Official Website: https://github.com/reinerBa/Vue-Responsive

Install & Download:

npm install vue-responsive

You Might Be Interested In:

Add Comment