Nuxt-breakpoints-v2 NPM

nuxt-breakpoints-v2

Resize observer breakpoints with Nuxt.js module.

New Update

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

Setup

Add nuxt-breakpoints dependency to your project

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

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.