DEV Community

loading...
Cover image for Using Modernizr with Nuxt.js to Detect Browser Features

Using Modernizr with Nuxt.js to Detect Browser Features

dworddesign profile image Sebastian Landwehr Originally published at dword-design.de Updated on ・2 min read

What is Modernizr?

Modernizr is a package that detects browser features and makes them queriable via JavaScript and CSS. This is very handy to find out which CSS properties are supported, for example. The approach is much more flexible and stable than using browser vendor and version for this.

Using Modernizr with Nuxt.js

Modernizr uses a plugin-based architecture, and you have to build the package yourself, depending on the features you need to detect – at least if you are not using Nuxt.js! I have created the nuxt-modernizr module that makes it easy to add Modernizr to your Nuxt.js app. You pass the features as module options, and the module creates a Modernizr build and places it in the .nuxt folder. Here is how to configure it:

First, install the module via npm install nuxt-modernizr or yarn add nuxt-modernizr.

Then, in your nuxt.config.js, add the module and pass the options that should be passed to Modernizr:

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

Check out the Modernizr documentation for details.

Now we can use the Modernizr variable and the generated CSS classes on the HTML root element to check for browser features. My all-time favorite among browser features is CSS scrollbars, because the support is pretty different between browsers and depending on if they are available, you can adjust container sizes and style them or not.

if (Modernizr.cssscrollbar) {
  // CSS scrollbar support
}
Enter fullscreen mode Exit fullscreen mode
html.cssscrollbar {
  /* CSS scrollbar support */
}
Enter fullscreen mode Exit fullscreen mode

Final Thoughts

That was already it! Usage is pretty simple. Let me know if you find it useful or if there are any things that you are missing. Also, if you find it useful, leave a GitHub star on the repository.


Let me know what you think about the module and if there are any open questions. Also, since this is my first post, let me know what you think about the post in general.

You can find the module here on npm.

If you like what I'm doing, follow me on Twitter or check out my website. Also consider donating at Buy Me a Coffee, PayPal or Patreon. Thank you so much! ❤️

Discussion (0)

pic
Editor guide