nuxt-modernizr

nuxt-modernizr

Adds a Modernizr build to your Nuxt.js app.

Install

# npm
$ npx nuxi module add nuxt-modernizr

# Yarn
$ yarn nuxi module add nuxt-modernizr

Usage

Add the module to your Nuxt.js modules list in nuxt.config.ts:

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

Access Modernizr via the composable in your app:

<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:

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

Options

This module passes the options down to the modernizr NPM package. Please refer to this for the available options.

Inline:

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

Top-level:

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

Contribute

Are you missing something or want to contribute? Feel free to file an issue or a pull request! ⚙️

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:

 If you want to send me a one time donation. The coffee is pretty good 😊.
 Also for one time donations if you like PayPal.
 Here you can support me regularly, which is great so I can steadily work on projects.

Thanks a lot for your support! ❤️

See also

• 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: Adds Nuxt page data to route meta at build time.
• nuxt-mermaid-string: Embed a Mermaid diagram in a Nuxt.js app by providing its diagram string.
• nuxt-content-git: Additional module for @nuxt/content that replaces or adds createdAt and updatedAt dates based on the git history.
• nuxt-babel-runtime: Nuxt CLI that supports babel. Inspired by @nuxt/typescript-runtime.

License

MIT License © Sebastian Landwehr