https://github.com/reegodev/vue-screen
Reactive screen size and media query states for VueJS
https://github.com/reegodev/vue-screen
height innerheight innerwidth matchmedia media query reactive screen vue vuejs width window
Last synced: 7 months ago
JSON representation
Reactive screen size and media query states for VueJS
- Host: GitHub
- URL: https://github.com/reegodev/vue-screen
- Owner: reegodev
- Created: 2019-04-16T21:48:41.000Z (over 6 years ago)
- Default Branch: main
- Last Pushed: 2025-01-21T22:02:44.000Z (10 months ago)
- Last Synced: 2025-04-13T00:48:07.696Z (7 months ago)
- Topics: height, innerheight, innerwidth, matchmedia, media, query, reactive, screen, vue, vuejs, width, window
- Language: JavaScript
- Homepage: https://reegodev.github.io/vue-screen/
- Size: 2.91 MB
- Stars: 240
- Watchers: 5
- Forks: 20
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[](https://img.shields.io/badge/vue-3.x.x-brightgreen.svg)
[](https://github.com/reegodev/vue-screen/actions)
[](https://www.npmjs.com/package/vue-screen)
[](https://www.npmjs.com/package/vue-screen)
[](https://codecov.io/gh/reegodev/vue-screen)
> [!IMPORTANT]
> Version 2.x only supports Vue 3.
v1 docs are available [here](https://github.com/reegodev/vue-screen/tree/v1.5.3#vuescreen)
# 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](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
```bash
npm i vue-screen
```
```bash
yarn add vue-screen
```
# Quick start
### Use with composition API
```js
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](https://reegodev.github.io/vue-screen/).
### Use as a plugin
In main.js / main.ts:
```js
import { createApp } from 'vue'
import VueScreen from 'vue-screen'
createApp()
.use(VueScreen, 'bootstrap')
.mount('#app')
```
In your components:
```vue
- Current breakpoint is: {{ $grid.breakpoint }}
- Window width is: {{ $screen.width }}
- Window height is: {{ $screen.height }}
```
# 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](https://reegodev.github.io/vue-screen/guide/upgrading).
# License
[MIT](/LICENSE)