how to use Modernizr in VueJS Webpack project

Question

Does anyone have a simple tutorial to bundle and use Modernizr in a VueJs Webpack project?

I use the default Webpack project of VueJS with monofile components. I want it all bundled.

For precision i want to use inputtypes.date in a majority of forms and avoid display vuetify date picker when on mobile browser with date picker support.

Answer 1

I have not used modernizr, but based on my experience using webpack, i think you can use existing modernizr loaders, i.e webpack-modernizr-loader

As its docs says your can use .modernizrrc.js config file, for example:

"use strict";

module.exports = {
  options: [
    "setClasses"
  ],
  "feature-detects": [
    "inputtypes"
  ]
};

adding webpack rule and alias to your webpack.config.js (note you need point to right place, where config file stored in alias path.resolve...):

const path = require('path');

module.exports = {
  module: {
    rules: [
      {
        loader: "webpack-modernizr-loader",
        test: /\.modernizrrc\.js$/
      }
    ]
  },
  resolve: {
    alias: {
      modernizr$: path.resolve(__dirname, "/path/to/.modernizrrc.js")
    }
  }
}

then you can import your modernizr and use it like this:

import modernizr from 'modernizr';

if(modernizr.inputtypes.date) {
   ...
}