Node's Package Magician

    nuxt-modernizr

    3.0.0 • Public • Published

    nuxt-modernizr

    npm version Linux macOS Windows compatible Build status Coverage status Dependency status Renovate enabled
    Open in Gitpod Buy Me a Coffee PayPal Patreon

    Adds a Modernizr build to your Nuxt.js app.

    Install

    # npm
    $ npm install nuxt-modernizr
    
    # Yarn
    $ yarn add nuxt-modernizr

    Usage

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

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

    Access the Modernizr variable in your app:

    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:

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

    Top-level:

    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:

    Buy Me a Coffee  If you want to send me a one time donation. The coffee is pretty good 😊.
    PayPal  Also for one time donations if you like PayPal.
    Patreon  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

    Install

    npm i nuxt-modernizr

    DownloadsWeekly Downloads

    393

    Version

    3.0.0

    License

    MIT

    Unpacked Size

    8.9 kB

    Total Files

    6

    Last publish

    Collaborators

    • dword-design