Net Possibility Multiplier

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

    2.0.3 • Public • Published

    nuxt-viewport

    npm version npm downloads 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+

    Note
    This version is Nuxt 3 & Nuxt Bridge only. For Nuxt 2 see 1.0.1

    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

    <script setup>
    import { useNuxtApp } from '#app'
    const { $viewport } = useNuxtApp()
    
    watch($viewport.breakpoint, (newBreakpoint, oldBreakpoint) => {
      console.log('Breakpoint updated:', oldBreakpoint, '->', newBreakpoint)
    })
    </script>
    
    <template>
      <div>
        <div v-if="$viewport.isLessThan('tablet')">Should render only on mobile</div>
        <div v-else>Current breakpoint: {{ $viewport.breakpoint }}</div>
      </div>
    </template>

    Usage with composable

    <script setup>
    const viewport = useViewport()
    
    watch(viewport.breakpoint, (newBreakpoint, oldBreakpoint) => {
      console.log('Breakpoint updated:', oldBreakpoint, '->', newBreakpoint)
    })
    </script>
    
    <template>
      <div>
        <div v-if="viewport.isLessThan('tablet')">Should render only on mobile</div>
        <div v-else>Current breakpoint: {{ viewport.breakpoint }}</div>
      </div>
    </template>

    Usage with "@nuxt/bridge"

    <script setup>
    const viewport = useViewport()
    
    watch(viewport.breakpoint, (newBreakpoint, oldBreakpoint) => {
      console.log('Breakpoint updated:', oldBreakpoint, '->', newBreakpoint)
    })
    </script>
    
    <template>
      <div>
        <div v-if="viewport.isLessThan('tablet')">Should render only on mobile</div>
        <div v-else>Current breakpoint: {{ $viewport.breakpoint }}</div>
      </div>
    </template>

    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".
    
    viewport.isGreaterThan('mobile') // Result: false.
    viewport.isGreaterThan('desktop') // Result: false.

    viewport.isGreaterOrEquals

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

    viewport.isLessThan

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

    viewport.match

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

    viewport.matches

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

    viewport.queries

    • Type: Object

    Object with generated media queries.

    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

    Install

    npm i nuxt-viewport

    DownloadsWeekly Downloads

    776

    Version

    2.0.3

    License

    MIT

    Unpacked Size

    19 kB

    Total Files

    17

    Last publish

    Collaborators

    • mvrlin