Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/dword-design/nuxt-modernizr

Adds a Modernizr build to your Nuxt.js app.
https://github.com/dword-design/nuxt-modernizr

browser-detection caniuse css feature-detection frontend javascript modernizr npm npm-package nuxt nuxt-module nuxtjs nuxtjs-module webdevelopment

Last synced: 2 months ago
JSON representation

Adds a Modernizr build to your Nuxt.js app.

Host: GitHub
URL: https://github.com/dword-design/nuxt-modernizr
Owner: dword-design
License: other
Created: 2020-07-26T08:56:27.000Z (over 4 years ago)
Default Branch: master
Last Pushed: 2024-05-01T13:29:03.000Z (8 months ago)
Last Synced: 2024-05-01T15:33:44.419Z (8 months ago)
Topics: browser-detection, caniuse, css, feature-detection, frontend, javascript, modernizr, npm, npm-package, nuxt, nuxt-module, nuxtjs, nuxtjs-module, webdevelopment
Language: JavaScript
Homepage:
Size: 2.92 MB
Stars: 11
Watchers: 1
Forks: 0
Open Issues: 6
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE.md

Awesome Lists containing this project

README

# nuxt-modernizr

Adds a Modernizr build to your Nuxt.js app.

## Install

```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](https://www.npmjs.com/package/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](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:

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](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