Vue-screen NPM

Warning: Version 2.x only supports Vue 3. v1 docs are available here

VueScreen

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

Docs

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

Features

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

Installation

npm i vue-screen

yarn add vue-screen

Quick start

Use with composition API

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.

Use as a plugin

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

// In App.vue
createApp()
  .use(VueScreen, 'bootstrap')
  .mount('#app')

// In MyComponent.vue
<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>