
Security News
vlt Launches "reproduce": A New Tool Challenging the Limits of Package Provenance
vlt's new "reproduce" tool verifies npm packages against their source code, outperforming traditional provenance adoption in the JavaScript ecosystem.
nuxt-viewport
Advanced tools
Define custom viewports for your Nuxt️ project
nuxt-viewport
dependency to your project# Using npm
npm install --save-dev nuxt-viewport
# Using yarn
yarn add --dev nuxt-viewport
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 */
},
}
{
// ...
viewport: {
// Define your own breakpoints.
breakpoints: {
[key: string]: number
},
// Cookie name.
// Default: "viewport".
cookieName: string
// Default breakpoints based on device type for auto detection.
// Available devices: "console", "desktop", "embedded", "mobile", "smarttv", "tablet", "wearable".
defaultBreakpoints: {
[key: string]: string
},
// Breakpoint to fallback, if device was not detected.
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'
},
// ...
}
{
// ...
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',
},
// ...
}
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",
]
}
}
$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.
You can contribute to this module online with CodeSandBox:
Or locally:
yarn install
or npm install
yarn dev
or npm run dev
Copyright (c) mvrlin mvrlin@pm.me
FAQs
Define custom viewports for your Nuxt project
The npm package nuxt-viewport receives a total of 10,062 weekly downloads. As such, nuxt-viewport popularity was classified as popular.
We found that nuxt-viewport demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
vlt's new "reproduce" tool verifies npm packages against their source code, outperforming traditional provenance adoption in the JavaScript ecosystem.
Research
Security News
Socket researchers uncovered a malicious PyPI package exploiting Deezer’s API to enable coordinated music piracy through API abuse and C2 server control.
Research
The Socket Research Team discovered a malicious npm package, '@ton-wallet/create', stealing cryptocurrency wallet keys from developers and users in the TON ecosystem.