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-viewportdependency to your project
npx nuxi@latest module add nuxt-viewport- Add
nuxt-viewportto themodulessection 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: Object
An object with options for cookie. See more https://www.npmjs.com/package/cookiejs#cookie-attributes
- Type: Object
- Detectable devices:
bot,desktop,mobile,tablet,tv
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.
- Type:
'minWidth' | 'maxWidth' - Default:
'minWidth'
CSS media feature.
{
// ...
viewport: {
breakpoints: {
desktop: 1024,
desktopMedium: 1280,
desktopWide: 1600,
mobile: 320,
mobileMedium: 375,
mobileWide: 425,
tablet: 768,
},
cookie: {
expires: 365, // 365 days
name: 'viewport',
path: '/',
sameSite: 'Strict',
secure: true,
},
defaultBreakpoints: {
desktop: 'desktop',
mobile: 'mobile',
tablet: 'tablet',
},
fallbackBreakpoint: 'desktop',
feature: 'minWidth',
},
// ...
}{
// ...
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.isLessOrEquals('tablet') // Result: true.
viewport.isLessOrEquals('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 installornpm install - Start development server using
yarn devornpm run dev
Copyright (c) mvrlin [email protected]