Vue.js Components & Libraries UI Utilities Responsive Design

Back

1. vue-viewports

Define your custom viewports and use them in your components.

2. vue-responsive

3. vue-match-media

Vue 2.x-compatible plugin that offers a consistent, semantic approach to making components media query-aware.

4. vue-media-query-mixin

Vue 2 media query mixin that can be used in both component js and component template. Compatible with bootstrap and vuetify viewports. `wXS` returns if screen width is xs, `wSM` returns true if screen width is sm, etc...

5. vue-breakpoints

Vue 2 minimal components to show and hide elements based on breakpoints. Inspired by Airbnb.

6. vue-mq

Offer some useful tools to quickly setup responsive design with a semantic and mobile-first API (Vue 2.x)

7. VueResizeSensor

A container that supports resize event.

8. vue-breakpoint-component

A render-less component for

9. fine-mq

A fine API to manage media queries in JS with ease and first-class integration with VueJS as a plugin.

10. vue-responsive-components

Create responsive components with `ResizeObserver`.

11. vue-screen-size

Get easy and reactive access to the width and height of your screen.

12. vue-container-query-2

Smart vue plugin for working with css container query.

13. vue-component-media-queries

MatchMedia component library for Vue.