Nuxt.js: Modernizr webpack plugin

Created on 8 Jan 2018 · 3Comments · Source: nuxt/nuxt.js

Hello

I tried to make it work like this in my nuxt.config.js :

const ModernizrWebpackPlugin = require('modernizr-webpack-plugin')

module.exports = {
  build: {
    extend (config, ctx) {
      config.plugins.push(new ModernizrWebpackPlugin({
        'options': [
          'setClasses'
        ],
        'feature-detects': [
          'touchevents'
        ]
      }))
    }
  }
}

No errors during build, but classes are not added to html tag.
Any ideas please ?

thx

_{This question is available on Nuxt.js community (#c2193)}

Source

julienchazal

Most helpful comment

I've managed to get Modernizr working with NUXT this way:

1) I went to the download section of their web - https://modernizr.com/download?setclasses
2) I selected all the items I wanted Modernizr to test and then proceeded to download the Command Line Config file (modernizr-config.json)
3) npm i -g modernizr
4) modernizr -c modernizr-config.json
5) I took all the code from the newly generated modernizr.js file
5) I created modernizr-plugin.js file in my plugins folder and pasted the code there.
6) nuxt.config.js - I imported the modernizr-plugin.js here like every other plugin in NUXT. Docs for this: https://nuxtjs.org/api/configuration-plugins

My modernizr-plugin.js file looks like this:

/* eslint-disable */
if (process.browser) {
  // pasted code here...
}

Andkoo on 9 Feb 2018

👍8 ❤1

All 3 comments

I've managed to get Modernizr working with NUXT this way:

My modernizr-plugin.js file looks like this:

/* eslint-disable */
if (process.browser) {
  // pasted code here...
}

Andkoo on 9 Feb 2018

👍8 ❤1

I did almost the same thing, with the difference that I made use of the NPM scripts:

// package.json
{
  // ...
  "scripts": {
      "dev": "modernizr -c modernizr-config.json -d plugins; nuxt",
      "build": "modernizr -c modernizr-config.json -d plugins; nuxt build"
  }
  // ...
}