nuxt-breakpoints
    TypeScript 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

    332

    Version

    1.1.9

    License

    MIT

    Unpacked Size

    13.5 kB

    Total Files

    7

    Last publish

    Collaborators

    • stevenho0811