Adds a Modernizr build to your Nuxt.js app.
npm install nuxt-modernizr
src="https://img.shields.io/npm/v/nuxt-modernizr.svg"
alt="npm version"
>
src="https://github.com/dword-design/nuxt-modernizr/workflows/build/badge.svg"
alt="Build status"
>
src="https://codecov.io/gh/dword-design/nuxt-modernizr/branch/master/graph/badge.svg"
alt="Coverage status"
>
src="https://gitpod.io/button/open-in-gitpod.svg"
alt="Open in Gitpod"
width="114"
>
src="https://www.buymeacoffee.com/assets/img/guidelines/download-assets-sm-2.svg"
alt="Buy Me a Coffee"
width="114"
>
src="https://sebastianlandwehr.com/images/paypal.svg"
alt="PayPal"
width="163"
>
src="https://sebastianlandwehr.com/images/patreon.svg"
alt="Patreon"
width="163"
>
Adds a Modernizr build to your Nuxt.js app.
``bashnpm
$ npx nuxi module add nuxt-modernizr
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
`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 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'],
},
});
``Are you missing something or want to contribute? Feel free to file an issue or a pull request! ⚙️
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:
src="https://www.buymeacoffee.com/assets/img/guidelines/download-assets-sm-2.svg"
alt="Buy Me a Coffee"
width="114"
>
If you want to send me a one time donation. The coffee is pretty good 😊.
src="https://sebastianlandwehr.com/images/paypal.svg"
alt="PayPal"
width="163"
>
Also for one time donations if you like PayPal.
src="https://sebastianlandwehr.com/images/patreon.svg"
alt="Patreon"
width="163"
>
Here you can support me regularly, which is great so I can steadily work on projects.
Thanks a lot for your support! ❤️
* 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.