Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

nuxt-viewport

Package Overview
Dependencies
Maintainers
1
Versions
28
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

nuxt-viewport

Define custom viewports for your Nuxt project

  • 0.0.3
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
19K
decreased by-3.45%
Maintainers
1
Weekly downloads
 
Created
Source

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

Configuration

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

    // Cookie name.
    // Default: "viewport".
    cookieName: string

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

    cookieName: 'viewport',

    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:

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

Keywords

FAQs

Package last updated on 27 Feb 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc