nuxt-breakpoints

Resize observer breakpoints with Nuxt.js module.

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
nuxt-breakpoints
1.1.94 years ago4 years agoMinified + gzip package size for nuxt-breakpoints in KB

Readme

nuxt-breakpoints
Resize observer breakpoints with Nuxt.js module.

NPM Buy Me A Coffee Codecov License: MIT Package Size
DEMO
📖 Release Notes

Setup

  1. Add nuxt-breakpoints dependency to your project

yarn add nuxt-breakpoints # or npm install nuxt-breakpoints

  1. Add nuxt-breakpoints to the modules section of nuxt.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
export default {
  computed: {
    isMdOrSm () { return this.$breakpoints.md || this.$breakpoints.sm },
    isLargeThanSm() {
      return this.$breakpoints.lSm // Is Large than sm include sm
    },
    isSmallThanMd() {
      return this.$breakpoints.sMd // 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: 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

  1. Clone this repository
  2. Install dependencies using yarn install or npm install
  3. Start development server using npm run dev

Ref

Nuxt.js
MDN - ResizeObserver
ResizeObserver Polyfill

License

MIT License
Copyright (c) Steven Ho