JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 21150
  • Score
    100M100P100Q145439F
  • License MIT

Define custom viewports for your Nuxt project

Package Exports

  • nuxt-viewport

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-viewport) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

nuxt-viewport

npm version npm downloads Github Actions CI Codecov License

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 */
  },
}

Usage with @nuxtjs/composition-api

import { defineComponent, useContext, watch } from '@nuxtjs/composition-api'

export default defineComponent({
  setup() {
    // Context.
    const context = useContext()
  
    // Viewport module.
    const viewport = context.$viewport

    // Watch breakpoint for updates.
    watch(() => viewport.breakpoint, (newBreakpoint, oldBreakpoint) => {
      console.log('Breakpoint updated:', oldBreakpoint, '->', newBreakpoint)
    })
  },
})

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",
    ]
  }
}

Configuration

breakpoints

  • Type: Object

An object where the key is the name of the viewport, and the value is the viewport size.

cookieName

  • Type: String
  • Default: viewport

The key for the document cookie.

defaultBreakpoints

  • Type: Object
  • Detectable devices: console, desktop, embedded, mobile, smarttv, tablet, wearable

An object where the key is the name of the detected device, and the value is the breakpoint key.

fallbackBreakpoint

  • Type: String
  • Default: viewport

The breakpoint key to be used, if the device was not detected.

Default configuration

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

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

      tablet: 768,
    },

    cookieName: 'viewport',

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

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

Example configuration for Tailwind CSS

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

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

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

API

$viewport.breakpoint

  • Type: String

Current breakpoint.

$viewport.isGreaterThan

  • Type: Boolean
// Example: $viewport.breakpoint is "mobile".
// Result: false.
$viewport.isGreaterThan('desktop')

$viewport.isLessThan

  • Type: Boolean
// Example: $viewport.breakpoint is "desktop".
// Result: true.
$viewport.isLessThan('desktopWide')

$viewport.match

  • Type: Boolean
// Example: $viewport.breakpoint is "tablet".
// Result: true.
$viewport.match('tablet')

$viewport.matches

  • Type: Boolean
// Example: $viewport.breakpoint is "mobileWide".
// Result: true.
$viewport.matches('tablet', 'mobileWide')

Contributing

You can contribute to this module online with CodeSandBox:

Edit nuxt-viewport

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 mvrlin@pm.me