dword-design/nuxt-modernizr

Adds a Modernizr build to your Nuxt.js app.

nuxt-modernizr

Adds a Modernizr build to your Nuxt.js app.

Install

# 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:

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:

 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: 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

nuxt-modernizr's Issues

Deprecated dependencies

The following dependencies are deprecated:

• @dword-design/nuxt-push-plugins

Check out the build for details.

Fix zero code coverage

Search forum posts about the problem

no-js logic (set classes) got a conflict with head options

Hi, just started to use this package and it seems quite nice.
But I noticed a isse on my code and not sure if depending on my code, this package or nuxt logic itself and I would liek to ask some help.

Here a description of my issue (steps):

1. I've installed the package following the documentation. All is fine.

2. Because I want to use the "no-js / js class" logic for setting a class on html element (the "setClasses" option from Modernizr itself), I did the following: set the option as shown on package documentation, then added 'no-js' class to the html tag from nuxt config file, as following:

``
head: {
...

htmlAttrs: {

  class: 'no-js',

},

...

}
``

Also here all was fine.
Page is loaded, and class "no-js" added on DOM (by Nuxt htmlAttrs). Then JS on client is loaded, also Modernizr, and class "no-js" is changed to class "js" by Modernizr.

3. Then here the issue: on a page (call this page "subpage") I've decided to overwrite, in the page itself by the method "head", the title of the page.
   This is working, but as side effects I've noticed that when I navigate from the homepage to the "subpage", the no-js/js class set by modernizr is kind of "reset".

My possible explanation
After several tests, it seems that the setClasses logic is kind of 'reset' any time in a Vue page or Vue component I set the "head" property and try to overwrite ANY options in it (at page change).

In this way the Modernizr "setClasses" logic (what I use to call "no-js / js class trick") seems crashing or at least reset to the value set in nuxt config file (".no-js").

My question
Anyone experienced this issue? is this an issue related to this package, or to Nuxt logic in general?
Could anyone support me on this issue?

I've also set a test repo where I've set some basic code as documentation here:
https://github.com/valeriosillari/nuxt-modernizr-test

Error: 'Failed to resolve import...'

When tryin to follow the instructions of the readme.md (in nuxt 3), this error occurs:

Failed to resolve import "/Users/alexanderhorner/Documents/GitHub.nosync/wgg-homepage/.nuxt/Users/alexanderhorner/Documents/GitHub.nosync/wgg-homepage/.nuxt/nuxt-modernizr/plugin.js" from "virtual:nuxt:/Users/alexanderhorner/Documents/GitHub.nosync/wgg-homepage/.nuxt/plugins/client.mjs". Does the file exist?

package.json:

{
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview"
  },
  "devDependencies": {
    "@nuxt/content": "^2.1.0",
    "nuxt": "^3.0.0-rc.10",
    "sass": "^1.54.9"
  },
  "dependencies": {
    "@nuxtjs/google-fonts": "^3.0.0-0",
    "flickity": "^3.0.0",
    "isotope-layout": "^3.0.6",
    "nuxt-modernizr": "^2.0.10",
    "reading-time": "^1.5.0",
    "vue-stripe-menu": "^2.1.1",
    "vue3-lazyload": "^0.3.6"
  }
}

Feature request: add TS types for Modernizr and all its properties

In TypeScript projects the TS compiler will complain about the variable Modernizr not existing on the Window object or globally. It can be solved by adding types manually*, but it would be helpful if this would module provide the types out of the box.

Good to know that community type definitions for Modernizr exist, but do not add them to window (if I am not mistaken): https://www.npmjs.com/package/@types/modernizr

(*) Note: I manually typed the test result for the <details> element as follows:

declare global {
  interface Window {
    Modernizr: {
      details: boolean;
    };
  }
};

Action Required: Fix Renovate Configuration

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Error type: Cannot find preset's package (github>whitesource/merge-confidence:beta)