vue-screen

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

VueScreen@next

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 with Nuxt module included. Nuxt module development is pending Nuxt 3 release
  

Installation

npm i vue-screen@next

yarn add vue-screen@next

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>

Upgrading from v1

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

License

MIT