nuxt-viewport

nuxt-viewport

Define custom viewports for your Nuxt️ project

Features

• ⚡️  Fast & Light with MatchMedia API ⚡️
• 🕶  Auto detects the device viewport from Cookie & User-Agent
• 👌  Zero configuration to start
• 👴️  Supports IE9+

Quick Setup

1. Add nuxt-viewport dependency to your project

# Using npm
npm install --save-dev nuxt-viewport
# Using yarn
yarn add --dev nuxt-viewport

1. Add nuxt-viewport to the modules section of nuxt.config.js

{
  modules: [
    [
      'nuxt-viewport', {
        /* Viewport options */
      }
    ],
  ]
}

using top level options

{
  modules: [
    'nuxt-viewport',
  ],

  viewport: {
    /* Viewport options */
  },
}

Configuration

{
  // ...
  viewport: {
    // Define your own breakpoints.
    breakpoints: {
      [key: string]: number
    },

    // Default breakpoints based on device type for auto detection.
    // Available devices: "console", "desktop", "embedded", "mobile", "smarttv", "tablet", "wearable".
    defaultBreakpoints: {
      [key: string]: string
    },

    // Breakpoint to fallback, if device was not detected.
    fallbackBreakpoint: string
  },
  // ...
}

Example for TailwindCSS.

{
  // ...
  viewport: {
    breakpoints: {
      xs: 320,
      sm: 640,
      md: 768,
      lg: 1024,
      xl: 1280,
      '2xl': 1536,
    },

    defaultBreakpoints: {
      desktop: 'lg',
      mobile: 'xs',
      tablet: 'md',
    },

    fallbackBreakpoint: 'lg'
  },
  // ...
}

Default configuration

{
  // ...
  viewport: {
    breakpoints: {
      desktop: 1024,
      desktopMedium: 1280,
      desktopWide: 1600,

      mobile: 320,
      mobileMedium: 375,
      mobileWide: 425,

      tablet: 768,
    },

    defaultBreakpoints: {
      desktop: 'desktop',
      mobile: 'mobile',
      tablet: 'tablet',
    },

    fallbackBreakpoint: 'desktop',
  },
  // ...
}

Typescript

If using typescript or running typescript language server to check the code (for example through Vetur), add types to types array in your tsconfig.json:

{
  "compilerOptions": {
    "types": [
      "@nuxt/types",
      "nuxt-viewport",
    ]
  }
}

API

• $viewport.breakpoint - Current breakpoint.

• $viewport.isGreaterThan(searchBreakpoint) - Returns true, if searchBreakpoint is greater, than the current breakpoint.

• $viewport.isLessThan(searchBreakpoint) - Returns true, if searchBreakpoint is less, than the current breakpoint.

• $viewport.match(breakpointToMatch) - Returns true if current breakpoint is matching the value.

• $viewport.matches(breakpointsToMatch) - Returns true if current breakpoint is included in the values.

Contributing

You can contribute to this module online with CodeSandBox:

Or locally:

1. Clone this repository
2. Install dependencies using yarn install or npm install
3. Start development server using yarn dev or npm run dev

License

MIT License

Copyright (c) mvrlin [e-mail]