nuxt-breakpoints-v2

Resize observer breakpoints with Nuxt.js module.

New Update

• Add breakpoint 1600px(xxl)
• Can include scrollbar size on breakpoints

DEMO

📖 Release Notes

Setup

1. Add nuxt-breakpoints dependency to your project

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

2. 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,
    xxl: 1600, // Add new breakpoint
    options: {
      polyfill: true,
      throttle: 200,
      scrollbar: true // Include scrollbar width | height in breakpoints
    }
  }
}

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(xl) && <= 1600px(xxl) | | xxl | number | 1600 | >= 1600, 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

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 [email protected]