Define custom viewports for your Nuxt️ project
- ⚡️ 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
- 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 themodules
section ofnuxt.config.js
{
modules: [
[
'nuxt-viewport', {
/* Viewport options */
}
],
]
}
using top level options
{
modules: [
'nuxt-viewport',
],
viewport: {
/* Viewport options */
},
}
<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>
<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>
<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>
- Type: Object
An object where the key is the name of the viewport, and the value is the viewport size.
- Type: String
- Default:
viewport
The key for the document cookie.
- 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.
- Type: String
- Default:
viewport
The breakpoint key to be used, if the device was not detected.
{
// ...
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',
},
// ...
}
{
// ...
viewport: {
breakpoints: {
xs: 320,
sm: 640,
md: 768,
lg: 1024,
xl: 1280,
'2xl': 1536,
},
defaultBreakpoints: {
desktop: 'lg',
mobile: 'xs',
tablet: 'md',
},
fallbackBreakpoint: 'lg'
},
// ...
}
- Type: String
Current breakpoint.
- Type: Number
// Example using defaults.
viewport.breakpointValue('desktop') // Result: 1024.
viewport.breakpointValue('tablet') // Result: 768.
viewport.breakpointValue('mobile') // Result: 320.
- Type: Boolean
// Example: viewport.breakpoint is "mobile".
viewport.isGreaterThan('mobile') // Result: false.
viewport.isGreaterThan('desktop') // Result: false.
- Type: Boolean
// Example: viewport.breakpoint is "mobile".
viewport.isGreaterOrEquals('mobile') // Result: true.
viewport.isGreaterOrEquals('desktop') // Result: false.
- Type: Boolean
// Example: viewport.breakpoint is "desktop".
viewport.isLessThan('desktopWide') // Result: true.
viewport.isLessThan('mobile') // Result: false.
- Type: Boolean
// Example: viewport.breakpoint is "tablet".
viewport.match('tablet') // Result: true.
viewport.match('desktop') // Result: false.
- Type: Boolean
// Example: viewport.breakpoint is "mobileWide".
viewport.matches('tablet', 'mobileWide') // Result: true.
viewport.matches('mobile', 'tablet') // Result: false.
- Type: Object
Object with generated media queries.
You can contribute to this module online with CodeSandBox:
Or locally:
- Clone this repository
- Install dependencies using
yarn install
ornpm install
- Start development server using
yarn dev
ornpm run dev
Copyright (c) mvrlin mvrlin@pm.me