Have ideas to improve npm?Join in the discussion! »

nuxt-breakpointsTypeScript icon, indicating that this package has built-in type declarations

1.1.9 • Public • Published

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: 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 shockshocksoul@gmail.com

Install

npm i nuxt-breakpoints

DownloadsWeekly Downloads

312

Version

1.1.9

License

MIT

Unpacked Size

13.5 kB

Total Files

7

Last publish

Collaborators

  • avatar