dword-designnuxt-modernizr
bash
# 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.js:
js
export default {
...
modules: [
['nuxt-modernizr', {
'feature-detects': ['css/scrollbars', 'css/overflow-scrolling'],
options: ['setClasses'],
}],
],
}
Access the Modernizr variable in your app:
js
if (process.client && Modernizr.cssscrollbar) {
...
}
Note that Modernizr only works client-side, so don't forget to check for client-side via process.client. If you use a linter that restricts global variables, you can use window.Modernizr instead.
Because we use a global variable here, it can also be accessed in contributed components that need to access Modernizr. The only requirement is that this module is included in the build.
## Options
This module passes the options down to the modernizr NPM package. Please refer to this for the available options.
Directly:
js
export default {
...
modules: [
['nuxt-modernizr', {
'feature-detects': ['css/scrollbars', 'css/overflow-scrolling'],
options: ['setClasses'],
}],
],
}
Top-level:
js
export default {
...
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.