vue-screen
v2.4.2
Published
Reactive screen size and media query states for Vue. Integrates with most UI frameworks out of the box.
Downloads
34,177
Maintainers
Readme
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>
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.