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+
Quick Setup
- Add
nuxt-viewport
dependency to your project
npm install --save-dev nuxt-viewport
yarn add --dev nuxt-viewport
- Add
nuxt-viewport
to the modules
section of nuxt.config.js
{
modules: [
[
'nuxt-viewport', {
}
],
]
}
using top level options
{
modules: [
'nuxt-viewport',
],
viewport: {
},
}
Configuration
{
viewport: {
breakpoints: {
[key: string]: number
},
cookieName: string
defaultBreakpoints: {
[key: string]: string
},
fallbackBreakpoint: string
},
}
Example for TailwindCSS.
{
viewport: {
breakpoints: {
xs: 320,
sm: 640,
md: 768,
lg: 1024,
xl: 1280,
'2xl': 1536,
},
defaultBreakpoints: {
desktop: 'lg',
mobile: 'xs',
tablet: 'md',
},
fallbackBreakpoint: 'lg'
},
}
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',
},
}
Typescript
If using typescript or running typescript language server to check the code (for example through Vetur), add types to types
array in your tsconfig.json
:
{
"compilerOptions": {
"types": [
"@nuxt/types",
"nuxt-viewport",
]
}
}
API
-
$viewport.breakpoint
- Current breakpoint.
-
$viewport.isGreaterThan(searchBreakpoint)
- Returns true, if searchBreakpoint is greater, than the current breakpoint.
-
$viewport.isLessThan(searchBreakpoint)
- Returns true, if searchBreakpoint is less, than the current breakpoint.
-
$viewport.match(breakpointToMatch)
- Returns true if current breakpoint is matching the value.
-
$viewport.matches(breakpointsToMatch)
- Returns true if current breakpoint is included in the values.
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
Copyright (c) mvrlin mvrlin@pm.me