https://github.com/pearofducks/vue-use-media
A Vue 3 plugin for matchMedia
https://github.com/pearofducks/vue-use-media
composition-api matchmedia vue3
Last synced: 2 months ago
JSON representation
A Vue 3 plugin for matchMedia
- Host: GitHub
- URL: https://github.com/pearofducks/vue-use-media
- Owner: pearofducks
- License: mit
- Created: 2020-04-11T15:21:53.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2021-12-28T09:49:02.000Z (over 3 years ago)
- Last Synced: 2025-03-13T14:48:17.015Z (3 months ago)
- Topics: composition-api, matchmedia, vue3
- Language: JavaScript
- Homepage: http://vue-use-media.surge.sh/
- Size: 160 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# @v-use/media (or) vue-use-media
A Vue 3 plugin for matchMedia
## install
```shell
yarn add @v-use/media
```
## use
There are two ways to use this module.
##### 1. If you want your entire app to share a set of media-queries
```javascript
import { createApp } from 'vue'
import { setupMedia } from '@v-use/media'
createApp(App).use(setupMedia).mount('#app') // use the default breakpoints
```
```javascript
import { useMedia } from '@v-use/media'
export default {
setup: () => ({
media: useMedia()
})
}
```
##### 2. If you want different parts of your app to use specific queries
```javascript
import { createMedia } from '@v-use/media'
const localMedia = createMedia({ breakpoints })
```
## api
### createMedia
```javascript
import { createMedia } from '@v-use/media'
const media = createMedia({ breakpoints? })
```
Returns `media` - documented below
### setupMedia
```javascript
import { setupMedia } from '@v-use/media'
createApp(App).use(setupMedia, { injectKey?: (String | Symbol), breakpoints?: Object }).mount('#app')
```
`media` will then be available via `useMedia`
#### injectKey
An optional parameter to control the injection key used in `useMedia`
Default: 'media'
#### breakpoints
Breakpoints are specified as an object of the form:
```javascript
{
mediaName: mediaQuery
}
```
For example the default breakpoints are:
```javascript
{
mobile: 'screen and (max-width: 768px)',
desktop: 'screen and (min-width: 769px)'
}
```
### useMedia
Returns the `media` set up globally via `setupMedia`
### media
```javascript
reactive({
mediaName: Boolean,
current: Array
})
```
`mediaName` aligns with each one specified in `breakpoints`, and will dynamically update as the `mediaQuery` changes
`current` is an array of `mediaName`s that currently evaluate to `true`