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 npmnpm install --save-dev nuxt-viewport# Using yarnyarn 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.breakpointValue`

Type: Number

// Example using defaults.viewport.breakpointValue('desktop') // Result: 1024.viewport.breakpointValue('tablet') // Result: 768.viewport.breakpointValue('mobile') // Result: 320.

`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