{"id":13506619,"url":"https://github.com/mvrlin/nuxt-viewport","last_synced_at":"2026-02-14T10:08:39.609Z","repository":{"id":40276618,"uuid":"342028215","full_name":"mvrlin/nuxt-viewport","owner":"mvrlin","description":"🌈  Define custom viewports for your Nuxt project","archived":false,"fork":false,"pushed_at":"2025-09-17T21:08:39.000Z","size":1508,"stargazers_count":152,"open_issues_count":5,"forks_count":9,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-09-29T05:20:02.267Z","etag":null,"topics":["media-queries","nuxt","nuxt-module","viewport"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mvrlin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2021-02-24T20:34:00.000Z","updated_at":"2025-09-24T10:58:48.000Z","dependencies_parsed_at":"2024-01-21T09:39:08.721Z","dependency_job_id":"fa77f7cb-fef9-4ed1-93b3-bec875999a9c","html_url":"https://github.com/mvrlin/nuxt-viewport","commit_stats":{"total_commits":43,"total_committers":3,"mean_commits":"14.333333333333334","dds":0.2093023255813954,"last_synced_commit":"771c2299225707829648880ea5f320f63dd997c5"},"previous_names":[],"tags_count":25,"template":false,"template_full_name":null,"purl":"pkg:github/mvrlin/nuxt-viewport","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mvrlin%2Fnuxt-viewport","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mvrlin%2Fnuxt-viewport/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mvrlin%2Fnuxt-viewport/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mvrlin%2Fnuxt-viewport/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mvrlin","download_url":"https://codeload.github.com/mvrlin/nuxt-viewport/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mvrlin%2Fnuxt-viewport/sbom","scorecard":{"id":669628,"data":{"date":"2025-08-11","repo":{"name":"github.com/mvrlin/nuxt-viewport","commit":"01acc51008a52d3e1a4908f84061863b2af6ea2b"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":2.1,"checks":[{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Code-Review","score":1,"reason":"Found 5/30 approved changesets -- score normalized to 1","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 1 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":0,"reason":"license file not detected","details":["Warn: project does not have a license file"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'main'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 7 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":5,"reason":"5 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-xffm-g5w8-qvg7","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-67mh-4wv8-2f99","Warn: Project is vulnerable to: GHSA-356w-63v5-8wf4","Warn: Project is vulnerable to: GHSA-859w-5945-r5v3"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-21T19:30:28.878Z","repository_id":40276618,"created_at":"2025-08-21T19:30:28.878Z","updated_at":"2025-08-21T19:30:28.878Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29439967,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-14T07:24:13.446Z","status":"ssl_error","status_checked_at":"2026-02-14T07:23:58.969Z","response_time":53,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["media-queries","nuxt","nuxt-module","viewport"],"created_at":"2024-08-01T01:00:54.650Z","updated_at":"2026-02-14T10:08:39.603Z","avatar_url":"https://github.com/mvrlin.png","language":"TypeScript","funding_links":[],"categories":["Uncategorized","TypeScript"],"sub_categories":["Uncategorized"],"readme":"# nuxt-viewport\n\n[![npm version][npm-version-src]][npm-version-href]\n[![npm downloads][npm-downloads-src]][npm-downloads-href]\n[![License][license-src]][license-href]\n\n\u003e Define custom viewports for your [Nuxt](https://nuxt.com/)️ project\n\n## Features\n\n- ⚡️\u0026nbsp; Fast \u0026 Light with [MatchMedia API](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) ⚡️\n- 🕶\u0026nbsp; Auto detects the device viewport from Cookie \u0026 User-Agent\n- 👌\u0026nbsp; Zero configuration to start\n- 👴️\u0026nbsp; Supports IE9+\n\n\u003e **Note**\\\n\u003e This version is Nuxt 3+ \u0026 Nuxt Bridge only. For Nuxt 2 see [1.0.1](https://www.npmjs.com/package/nuxt-viewport/v/1.0.1)\n\n## Quick Setup\n\n1. Add `nuxt-viewport` dependency to your project\n\n```bash\nnpx nuxi@latest module add nuxt-viewport\n```\n\n2. Add `nuxt-viewport` to the `modules` section of `nuxt.config.js`\n\n```js\n{\n  modules: [\n    [\n      'nuxt-viewport', {\n        /* Viewport options */\n      }\n    ],\n  ]\n}\n```\n\nusing top level options\n\n```js\n{\n  modules: [\n    'nuxt-viewport',\n  ],\n\n  viewport: {\n    /* Viewport options */\n  },\n}\n```\n\n## Usage\n```vue\n\u003cscript setup\u003e\nimport { useNuxtApp } from '#app'\nconst { $viewport } = useNuxtApp()\n\nwatch($viewport.breakpoint, (newBreakpoint, oldBreakpoint) =\u003e {\n  console.log('Breakpoint updated:', oldBreakpoint, '-\u003e', newBreakpoint)\n})\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cdiv v-if=\"$viewport.isLessThan('tablet')\"\u003eShould render only on mobile\u003c/div\u003e\n    \u003cdiv v-else\u003eCurrent breakpoint: {{ $viewport.breakpoint }}\u003c/div\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n```\n\n## Usage with composable\n```vue\n\u003cscript setup\u003e\nconst viewport = useViewport()\n\nwatch(viewport.breakpoint, (newBreakpoint, oldBreakpoint) =\u003e {\n  console.log('Breakpoint updated:', oldBreakpoint, '-\u003e', newBreakpoint)\n})\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cdiv v-if=\"viewport.isLessThan('tablet')\"\u003eShould render only on mobile\u003c/div\u003e\n    \u003cdiv v-else\u003eCurrent breakpoint: {{ viewport.breakpoint }}\u003c/div\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n```\n\n## Usage with \"@nuxt/bridge\"\n```vue\n\u003cscript setup\u003e\nconst viewport = useViewport()\n\nwatch(viewport.breakpoint, (newBreakpoint, oldBreakpoint) =\u003e {\n  console.log('Breakpoint updated:', oldBreakpoint, '-\u003e', newBreakpoint)\n})\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cdiv v-if=\"viewport.isLessThan('tablet')\"\u003eShould render only on mobile\u003c/div\u003e\n    \u003cdiv v-else\u003eCurrent breakpoint: {{ $viewport.breakpoint }}\u003c/div\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n```\n\n## Configuration\n\n### `breakpoints`\n\n- Type: Object\n\nAn object where the key is the name of the viewport, and the value is the viewport size.\n\n### `cookie`\n\n- Type: Object\n\nAn object with options for cookie.\nSee more https://www.npmjs.com/package/cookiejs#cookie-attributes\n\n### `defaultBreakpoints`\n\n- Type: Object\n- Detectable devices: `bot`, `desktop`, `mobile`, `tablet`, `tv`\n\nAn object where the key is the name of the detected device, and the value is the breakpoint key.\n\n### `fallbackBreakpoint`\n\n- Type: String\n- Default: `viewport`\n\nThe breakpoint key to be used, if the device was not detected.\n\n### `feature`\n\n- Type: `'minWidth' | 'maxWidth'`\n- Default: `'minWidth'`\n\nCSS media feature.\n\n## Default configuration\n\n```js\n{\n  // ...\n  viewport: {\n    breakpoints: {\n      desktop: 1024,\n      desktopMedium: 1280,\n      desktopWide: 1600,\n\n      mobile: 320,\n      mobileMedium: 375,\n      mobileWide: 425,\n\n      tablet: 768,\n    },\n\n    cookie: {\n      expires: 365, // 365 days\n      name: 'viewport',\n      path: '/',\n      sameSite: 'Strict',\n      secure: true,\n    },\n\n    defaultBreakpoints: {\n      desktop: 'desktop',\n      mobile: 'mobile',\n      tablet: 'tablet',\n    },\n\n    fallbackBreakpoint: 'desktop',\n\n    feature: 'minWidth',\n  },\n  // ...\n}\n```\n\n## Example configuration for Tailwind CSS\n```js\n{\n  // ...\n  viewport: {\n    breakpoints: {\n      xs: 320,\n      sm: 640,\n      md: 768,\n      lg: 1024,\n      xl: 1280,\n      '2xl': 1536,\n    },\n\n    defaultBreakpoints: {\n      desktop: 'lg',\n      mobile: 'xs',\n      tablet: 'md',\n    },\n\n    fallbackBreakpoint: 'lg'\n  },\n  // ...\n}\n```\n\n## Per-page configuration\nYou can override the global configuration for specific pages using [`definePageMeta`](https://nuxt.com/docs/api/utils/define-page-meta).\n```vue\n\u003cscript setup\u003e\ndefinePageMeta({\n  viewport: {\n    breakpoints: {\n      desktop: 1024,\n      mobile: 320,\n      tablet: 768\n    },\n    cookie: {\n      name: 'viewport-per-page'\n    }\n    // Other fields will be inherited from the global configuration\n  }\n})\n\u003c/script\u003e\n```\n\n## API\n\n### `viewport.breakpoint`\n- Type: String\n\nCurrent breakpoint.\n\n### `viewport.breakpointValue`\n- Type: Number\n\n```js\n// Example using defaults.\n\nviewport.breakpointValue('desktop') // Result: 1024.\nviewport.breakpointValue('tablet') // Result: 768.\nviewport.breakpointValue('mobile') // Result: 320.\n```\n\n### `viewport.isGreaterThan`\n- Type: Boolean\n\n```js\n// Example: viewport.breakpoint is \"mobile\".\n\nviewport.isGreaterThan('mobile') // Result: false.\nviewport.isGreaterThan('desktop') // Result: false.\n```\n\n### `viewport.isGreaterOrEquals`\n- Type: Boolean\n\n```js\n// Example: viewport.breakpoint is \"mobile\".\n\nviewport.isGreaterOrEquals('mobile') // Result: true.\nviewport.isGreaterOrEquals('desktop') // Result: false.\n```\n\n### `viewport.isLessThan`\n- Type: Boolean\n\n```js\n// Example: viewport.breakpoint is \"desktop\".\n\nviewport.isLessThan('desktopWide') // Result: true.\nviewport.isLessThan('mobile') // Result: false.\n```\n\n### `viewport.isLessOrEquals`\n- Type: Boolean\n\n```js\n// Example: viewport.breakpoint is \"tablet\".\n\nviewport.isLessOrEquals('tablet') // Result: true.\nviewport.isLessOrEquals('mobile') // Result: false.\n```\n\n### `viewport.match`\n- Type: Boolean\n\n```js\n// Example: viewport.breakpoint is \"tablet\".\n\nviewport.match('tablet') // Result: true.\nviewport.match('desktop') // Result: false.\n```\n\n### `viewport.matches`\n- Type: Boolean\n\n```js\n// Example: viewport.breakpoint is \"mobileWide\".\n\nviewport.matches('tablet', 'mobileWide') // Result: true.\nviewport.matches('mobile', 'tablet') // Result: false.\n```\n\n### `viewport.queries`\n- Type: Object\n\nObject with generated media queries.\n\n## Contributing\n\nYou can contribute to this module online with CodeSandBox:\n\n[![Edit nuxt-viewport](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/mvrlin/nuxt-viewport/tree/main/?fontsize=14\u0026hidenavigation=1\u0026theme=dark)\n\nOr locally:\n\n1. Clone this repository\n2. Install dependencies using `yarn install` or `npm install`\n3. Start development server using `yarn dev` or `npm run dev`\n\n## License\n\n[MIT License](./LICENSE)\n\nCopyright (c) mvrlin mvrlin@pm.me\n\n\u003c!-- Badges --\u003e\n[npm-version-src]: https://img.shields.io/npm/v/nuxt-viewport/latest.svg?style=for-the-badge\n[npm-version-href]: https://npmjs.com/package/nuxt-viewport\n\n[npm-downloads-src]: https://img.shields.io/npm/dt/nuxt-viewport.svg?style=for-the-badge\n[npm-downloads-href]: https://npmjs.com/package/nuxt-viewport\n\n[license-src]: https://img.shields.io/npm/l/nuxt-viewport.svg?style=for-the-badge\n[license-href]: https://npmjs.com/package/nuxt-viewport\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmvrlin%2Fnuxt-viewport","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmvrlin%2Fnuxt-viewport","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmvrlin%2Fnuxt-viewport/lists"}