nuxt-breakpoints
Resize observer breakpoints with Nuxt.js module.
Setup
- Add
nuxt-breakpoints
dependency to your project
yarn add nuxt-breakpoints # or npm install nuxt-breakpoints
- Add
nuxt-breakpoints
to themodules
section ofnuxt.config.js
modules: // Simple usage 'nuxt-breakpoints' // With options 'nuxt-breakpoints' /* module options */ // Another way to use options breakpoints: // default options sm: 576 md: 768 lg: 992 xl: 1200 options: polyfill: true throttle: 200
Usage
// components.vue computed: { return this$breakpointsmd || this$breakpointssm } { return this$breakpointslSm // Is Large than sm include sm } { return this$breakpointssMd // Is Small than md include md } // ... etc lSm lMd lLg, and sSm sMd sLg
Options
property | type | default | note |
---|---|---|---|
xs | none | none | <= 576px,Extra small, smallest. |
sm | number | 576 | >= 576px(sm) && <= 768px(md) |
md | number | 768 | >= 768px(md) && <= 992px(lg) |
lg | number | 992 | >= 992px(lg) && <= 1200px(xl) |
xl | number | 1200 | >= 1200px, Extra large, largest. |
options | object<polyfill: boolean, throttle: number> | { polyfill: true, throttle: 200 } | polyfill default by true, which means will auto-import resize-observer-polyfill when the browser doesn't support ResizeObserver more information below, throttle will slow down when Window has resizing trigger speed. |
Development
- Clone this repository
- Install dependencies using
yarn install
ornpm install
- Start development server using
npm run dev
Ref
License
Copyright (c) Steven Ho shockshocksoul@gmail.com