# nuxt-modernizr

> Adds a Modernizr build to your Nuxt.js app.

Latest version **5.0.0** (published 2025-12-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install nuxt-modernizr
pnpm add nuxt-modernizr
yarn add nuxt-modernizr
bun add nuxt-modernizr
```

## Health

**Score 70/100 (B)** — status: stable.

Positive: has types; esm support; no vulnerabilities; has provenance; high maintenance score; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 5.0.0 |
| Published | 2025-12-06 |
| First published | 2020-07-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=22 |
| Dependencies | 4 |
| Unpacked size | 10.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 12 |
| Author | Sebastian Landwehr |
| Maintainers | dword-design |
| Keywords | browser-detection, caniuse, css, feature-detection, frontend, javascript, modernizr, npm, npm-package, nuxt, nuxt-module, nuxtjs, nuxtjs-module, webdevelopment |

## Links

- npm: https://www.npmjs.com/package/nuxt-modernizr
- Repository: https://github.com/dword-design/nuxt-modernizr
- Homepage: https://github.com/dword-design/nuxt-modernizr#readme
- Issues: https://github.com/dword-design/nuxt-modernizr/issues
- Funding: https://github.com/sponsors/dword-design
- npm.io page: https://npm.io/package/nuxt-modernizr

## Dependencies (4)

- [endent](https://npm.io/package/endent.md) npm:@dword-design/endent@^1.4.7
- [@nuxt/kit](https://npm.io/package/@nuxt/kit.md) ^4.2.1
- [modernizr](https://npm.io/package/modernizr.md) ^3.13.1
- [modernizr-build](https://npm.io/package/modernizr-build.md) npm:modernizr@^3.13.1

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 5.0.0 (latest) — 2025-12-06
- 4.0.1 — 2024-04-09
- 4.0.0 — 2024-02-13
- 3.0.25 — 2023-04-29
- 3.0.24 — 2023-04-26
- 3.0.23 — 2023-04-22
- 3.0.22 — 2023-04-22
- 3.0.21 — 2023-04-22
- 3.0.20 — 2023-04-20
- 3.0.19 — 2023-04-17
- 3.0.18 — 2023-04-14
- 3.0.17 — 2023-04-14
- 3.0.16 — 2023-04-14
- 3.0.15 — 2023-04-13
- 3.0.14 — 2023-04-12
- … 42 more at https://npm.io/package/nuxt-modernizr/versions

## README

<!-- TITLE/ -->
# nuxt-modernizr
<!-- /TITLE -->

<!-- BADGES/ -->
<p>
  <a href="https://npmjs.org/package/nuxt-modernizr">
    <img
      src="https://img.shields.io/npm/v/nuxt-modernizr.svg"
      alt="npm version"
    >
  </a><img src="https://img.shields.io/badge/os-linux%20%7C%C2%A0macos%20%7C%C2%A0windows-blue" alt="Linux macOS Windows compatible"><a href="https://github.com/dword-design/nuxt-modernizr/actions">
    <img
      src="https://github.com/dword-design/nuxt-modernizr/workflows/build/badge.svg"
      alt="Build status"
    >
  </a><a href="https://codecov.io/gh/dword-design/nuxt-modernizr">
    <img
      src="https://codecov.io/gh/dword-design/nuxt-modernizr/branch/master/graph/badge.svg"
      alt="Coverage status"
    >
  </a><a href="https://david-dm.org/dword-design/nuxt-modernizr">
    <img src="https://img.shields.io/david/dword-design/nuxt-modernizr" alt="Dependency status">
  </a><img src="https://img.shields.io/badge/renovate-enabled-brightgreen" alt="Renovate enabled"><br/><a href="https://gitpod.io/#https://github.com/dword-design/nuxt-modernizr">
    <img
      src="https://gitpod.io/button/open-in-gitpod.svg"
      alt="Open in Gitpod"
      width="114"
    >
  </a><a href="https://www.buymeacoffee.com/dword">
    <img
      src="https://www.buymeacoffee.com/assets/img/guidelines/download-assets-sm-2.svg"
      alt="Buy Me a Coffee"
      width="114"
    >
  </a><a href="https://paypal.me/SebastianLandwehr">
    <img
      src="https://sebastianlandwehr.com/images/paypal.svg"
      alt="PayPal"
      width="163"
    >
  </a><a href="https://www.patreon.com/dworddesign">
    <img
      src="https://sebastianlandwehr.com/images/patreon.svg"
      alt="Patreon"
      width="163"
    >
  </a>
</p>
<!-- /BADGES -->

<!-- DESCRIPTION/ -->
Adds a Modernizr build to your Nuxt.js app.
<!-- /DESCRIPTION -->

<!-- INSTALL/ -->
## Install

```bash
# npm
$ npx nuxi module add nuxt-modernizr

# Yarn
$ yarn nuxi module add nuxt-modernizr
```
<!-- /INSTALL -->

## Usage

Add the module to your Nuxt.js modules list in `nuxt.config.ts`:
```js
export default defineNuxtConfig({
  ...
  modules: [
    ['nuxt-modernizr', {
      'feature-detects': ['css/scrollbars', 'css/overflow-scrolling'],
      options: ['setClasses'],
    }],
  ],
});
```

Access Modernizr via the composable in your app:
```vue
<script setup lang="ts">
const modernizr = useModernizr();
</script>
```

Note that Modernizr only works client-side. The composable returns either a Modernizr instance or null, if we are server-side. So a reasonable check would look like this:

```ts
if (modernizr?.rgba) {
  console.log('Browser supports rgba.'),
}
```

## Options
This module passes the options down to the [modernizr](https://www.npmjs.com/package/modernizr) NPM package. Please refer to this for the available options.

Inline:
```ts
export default defineNuxtConfig({
  ...
  modules: ['nuxt-modernizr'],
  modernizr: {
    'feature-detects': ['css/scrollbars', 'css/overflow-scrolling'],
    options: ['setClasses'],
  },
});
```

Top-level:
```ts
export default defineNuxtConfig({
  ...
  modules: [
    'nuxt-modernizr',
  ],
  modernizr: {
    'feature-detects': ['css/scrollbars', 'css/overflow-scrolling'],
    options: ['setClasses'],
  },
});
```

<!-- LICENSE/ -->
## Contribute

Are you missing something or want to contribute? Feel free to file an [issue](https://github.com/dword-design/nuxt-modernizr/issues) or a [pull request](https://github.com/dword-design/nuxt-modernizr/pulls)! ⚙️

## Support

Hey, I am Sebastian Landwehr, a freelance web developer, and I love developing web apps and open source packages. If you want to support me so that I can keep packages up to date and build more helpful tools, you can donate here:

<p>
  <a href="https://www.buymeacoffee.com/dword">
    <img
      src="https://www.buymeacoffee.com/assets/img/guidelines/download-assets-sm-2.svg"
      alt="Buy Me a Coffee"
      width="114"
    >
  </a>&nbsp;If you want to send me a one time donation. The coffee is pretty good 😊.<br/>
  <a href="https://paypal.me/SebastianLandwehr">
    <img
      src="https://sebastianlandwehr.com/images/paypal.svg"
      alt="PayPal"
      width="163"
    >
  </a>&nbsp;Also for one time donations if you like PayPal.<br/>
  <a href="https://www.patreon.com/dworddesign">
    <img
      src="https://sebastianlandwehr.com/images/patreon.svg"
      alt="Patreon"
      width="163"
    >
  </a>&nbsp;Here you can support me regularly, which is great so I can steadily work on projects.
</p>

Thanks a lot for your support! ❤️

## See also

* [nuxt-mail](https://github.com/dword-design/nuxt-mail): Adds email sending capability to a Nuxt.js app. Adds a server route, an injected variable, and uses nodemailer to send emails.
* [nuxt-route-meta](https://github.com/dword-design/nuxt-route-meta): Adds Nuxt page data to route meta at build time.
* [nuxt-mermaid-string](https://github.com/dword-design/nuxt-mermaid-string): Embed a Mermaid diagram in a Nuxt.js app by providing its diagram string.
* [nuxt-content-git](https://github.com/dword-design/nuxt-content-git): Additional module for @nuxt/content that replaces or adds createdAt and updatedAt dates based on the git history.
* [nuxt-babel-runtime](https://github.com/dword-design/nuxt-babel-runtime): Nuxt CLI that supports babel. Inspired by @nuxt/typescript-runtime.

## License

[MIT License](https://opensource.org/license/mit/) © [Sebastian Landwehr](https://sebastianlandwehr.com)
<!-- /LICENSE -->

---
_Source: https://npm.io/package/nuxt-modernizr · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._