vue-screen
TypeScript icon, indicating that this package has built-in type declarations

2.4.0 • Public • Published

Build Status Build Status npm version npm downloads codecov


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


VueScreen logo

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>

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

Dependencies (0)

    Dev Dependencies (10)

    Package Sidebar

    Install

    npm i vue-screen

    Weekly Downloads

    8,326

    Version

    2.4.0

    License

    MIT

    Unpacked Size

    33.6 kB

    Total Files

    22

    Last publish

    Collaborators

    • reegodev