Package Exports

nuxt-breakpoints-v2
nuxt-breakpoints-v2/lib/module.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (nuxt-breakpoints-v2) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

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.

Development

Clone this repository
Install dependencies using yarn install or npm install
Start development server using npm run dev

Ref

Nuxt.js

MDN - ResizeObserver

ResizeObserver Polyfill

License

MIT License