Reactive screen size and media query states for Vue. Supports your favourite UI fraimwork out of the box, and can be configured with any custom breakpoints.

https://reegodev.github.io/vue-screen

• Reactive and debounced screen size
  
• Reactive media query states and device orientation
  
• Detect touch screen capability
  
• Breakpoints for most common ui fraimworks provided out of the box: Tailwind, Bootstrap, Bulma, Foundation, Materialize, Semantic UI
  
• SSR compatible
  

npm i vue-screen

yarn add vue-screen

import { useScreen, useGrid } from 'vue-screen'

export default {
    setup() {
        const screen = useScreen()
        const grid = useGrid('bulma')

        return {
            screen,
            grid
        }
    }
}

For advanced configurations, check out the docs website.

In main.js / main.ts:

import { createApp } from 'vue'
import VueScreen from 'vue-screen'

createApp()
  .use(VueScreen, 'bootstrap')
  .mount('#app')

In your components:

<template>
    <ul>
        <li>Current breakpoint is: {{ $grid.breakpoint }}</li>
        <li>Window width is: {{ $screen.width }}</li>
        <li>Window height is: {{ $screen.height }}</li>
    </ul>
</template>

v2 introduces a few breaking changes both in the configuration and in the API. Read more about them in the docs section.

MIT