Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/codemonk-digital/vue-responsiveness
Tiny plugin for managing responsiveness breakpoints in Vue3 apps.
https://github.com/codemonk-digital/vue-responsiveness
bootstrap5 bulma chakra-ui ionic-framework master-css material-design material-ui materializecss media-queries quasar-framework responsiveness semantic-ui skeleton ssr tailwindcss vue vue3 vuetify windicss
Last synced: about 2 months ago
JSON representation
Tiny plugin for managing responsiveness breakpoints in Vue3 apps.
- Host: GitHub
- URL: https://github.com/codemonk-digital/vue-responsiveness
- Owner: codemonk-digital
- License: mit
- Created: 2023-03-02T03:50:24.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-04-09T06:46:32.000Z (9 months ago)
- Last Synced: 2024-11-01T22:42:44.830Z (about 2 months ago)
- Topics: bootstrap5, bulma, chakra-ui, ionic-framework, master-css, material-design, material-ui, materializecss, media-queries, quasar-framework, responsiveness, semantic-ui, skeleton, ssr, tailwindcss, vue, vue3, vuetify, windicss
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/vue-responsiveness
- Size: 634 KB
- Stars: 11
- Watchers: 1
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# Vue Responsiveness
**What** - tiny plugin for working with responsiveness intervals, focused runtime performance and great DX.
**Why** - I'm obsessed with runtime performance and ease of use: see [how it works](#how-it-works).
### Installation
#### yarn
```terminal
yarn add vue-responsiveness
```
#### npm
```terminal
npm i vue-responsiveness
```
### Basic demo
[Codesandbox](https://codesandbox.io/p/devbox/nxqvcr)
### Usage
#### main.ts
```ts
import { VueResponsiveness } from 'vue-responsiveness'
createApp()
.use(VueResponsiveness)
.mount('#app')
```
#### in any ``:
```html
...content
...content
...content
```
### Breakpoint presets:
```ts
import { VueResponsiveness, Presets } from "vue-responsiveness";
app.use(VueResponsiveness, Presets.Tailwind_CSS)
```
*Note:* The default config value is set to Bootstrap 5's [responsiveness breakpoints](https://getbootstrap.com/docs/5.3/layout/breakpoints/#available-breakpoints) preset.
Preset details:
```ts
Presets.Bootstrap_5 = {
xs: 0,
sm: 576,
md: 768,
lg: 992,
xl: 1200,
xxl: 1400,
}
```
Available presets:
`Bootstrap_3`, `Bootstrap_4`, `Bootstrap_5`, `Bulma`, `Chakra`, `Foundation`, `Ionic`, `Master_CSS`, `Material_Design`, `Materialize`, `Material_UI`, `Quasar`, `Semantic_UI`, `Skeleton`, `Tailwind_CSS`, `Vuetify`, `Windi_CSS`
*Notes:*
- If you maintain a CSS framework (or use one often) and want its preset added, [open an issue](https://github.com/codemonk-digital/vue-responsiveness/issues) or a PR.
- If you spot any inconsistency in [the presets](https://github.com/codemonk-digital/vue-responsiveness/blob/main/lib/presets.ts) (either my typo or some library update), please, let me know, I'll correct it.
### Bespoke intervals:
```ts
app.use(VueResponsiveness, {
small: 0,
medium: 777,
large: 1234
})
```
```html
...content
```
### Hide components, (while still rendering them) - usage with `v-show`:
`` below will be rendered at all times but will only be displayed on `md` and below:
```html
```
### Use in `setup()` or ``:
```ts
import { useMatches } from 'vue-responsiveness'
const matches = useMatches()
const currentInterval = computed(() => matches.interval)
const trueOnSmOnly = computed(() => matches.isOnly('sm'))
const trueOnMdAndAbove = computed(() => matches.isMin('md'))
```
### Testing:
Add plugin to `global.plugins` when testing components using the plugin's API:
Example
```ts
import MyComponent from './MyComponent.vue'
import { VueResponsiveness } from 'vue-responsiveness'
describe('<MyComponent />', () => {
it('should render', () => {
const wrapper = shallowMount(MyComponent, {
global: {
plugins: [VueResponsiveness]
}
})
// test here
})
})
```
### How it works:
- uses the native [`window.matchMedia(queryString)`](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) and only reacts to changes in the query's `matches` value. It's the same API powering CSS media queries.
- listeners are placed on the `MediaQueryList` instances, meaning they are garbage collected as soon as the app is unmounted, without leaving bound events behind on `<body>` or `window` object.
- no global pollution
- only one instance per app (much lighter than having one instance per component needing it)
- in terms of memory and/or CPU consumption, using `window.matchMadia` is a few hundred times lighter than using the _"traditional"_ `resize` event listener method
### Got issues?
[Let me know!](https://github.com/codemonk-digital/vue-responsiveness/issues)
Happy coding!
:: }<(((*> ::