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: 3 days 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 (almost 6 years ago)
• Default Branch: main
• Last Pushed: 2024-04-03T16:53:23.000Z (10 months ago)
• Last Synced: 2024-04-25T13:40:56.549Z (10 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: 3.39 MB
• Stars: 238
• Watchers: 5
• Forks: 18
• Open Issues: 5
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
[![Build Status](https://img.shields.io/badge/vue-3.x-brightgreen.svg)](https://img.shields.io/badge/vue-3.x.x-brightgreen.svg)

[![Build Status](https://github.com/reegodev/vue-screen/workflows/Node.js%20CI/badge.svg)](https://github.com/reegodev/vue-screen/actions)

[![npm version](https://img.shields.io/npm/v/vue-screen)](https://www.npmjs.com/package/vue-screen)

[![npm downloads](https://img.shields.io/npm/dm/vue-screen)](https://www.npmjs.com/package/vue-screen)

[![codecov](https://codecov.io/gh/reegodev/vue-screen/branch/master/graph/badge.svg?token=KTHOOUSHFJ)](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)