Kaveh-nuxt-breakpoints NPM

IMPORTANT NOTE: THIS REPO IS DEPRECATED.

So why is this repo deprecated? As time goes by, browsers and front-end progress rapidly, this lib was initially created to make it easy for me to get the current breakpoints through js when using Nuxt 2 at work, to display specific components, it has served its purpose for a while but it was not continuously maintained.

Nowadays, Resize Observer is widely used and has good support, there are even better alternatives like MediaQueryList that have better ways of achieving the same goal.

Vue and Nuxt have also released version 3, if you are already using the composition-api, VueUse has also provided useBreakpoints which may be a good alternative option.

As things change, implementing a similar lib is not difficult, I recently tidied up my GitHub and thought this package is no longer necessary. So I have decided to deprecate this project, I hope to write other good projects in the future and maintain them properly.

nuxt-breakpoints

Resize observer breakpoints with Nuxt.js module.

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,
    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: 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

nuxtjs resizeobserver breakpoint resize mediaquery responsive

lodash resize-observer-polyfill

@everything-registry/sub-chunk-2007

1.2.0

11 months ago