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+

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

Quick Setup

Add nuxt-viewport dependency to your project

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

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:

Or locally:

Clone this repository
Install dependencies using yarn install or npm install
Start development server using yarn dev or npm run dev

License

MIT License

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

mvrlin / nuxt-viewport

Programming Languages

Labels

Projects that are alternatives of or similar to nuxt-viewport