@nuxtjs/critters

Critical CSS for Nuxt.js

Usage no npm install needed!

<script type="module">
  import nuxtjsCritters from 'https://cdn.skypack.dev/@nuxtjs/critters';
</script>

README

@nuxtjs/critters

npm version npm downloads Github Actions CI Codecov License

CSS optimization using critters for Nuxt

Features

  • Zero-configuration required
  • Enables CSS Extraction
  • Critical CSS automatically injected to page

Quick setup

  1. Add @nuxtjs/critters dependency to your project
yarn add @nuxtjs/critters # or npm install @nuxtjs/critters
  1. Add @nuxtjs/critters to the modules section of nuxt.config.js
{
  modules: [
    '@nuxtjs/critters',
  ],
}

How it works

Nuxt has a number of ways to optimize your CSS in production:

  1. ✅ Nuxt uses cssnano at the build step to minify CSS rules
  2. 📦 You can enable purgecss to remove unused CSS rules from your bundle.
  3. ✅ with @nuxtjs/critters you can now extract CSS files and load them separately, just inlining the CSS necessary to render the page.

Options

You can override the @nuxtjs/critters defaults like this:

// nuxt.config.js
export default {
  critters: {
    // Options passed directly to critters: https://github.com/GoogleChromeLabs/critters#critters-2
    config: {
      // Default: 'media'
      preload: 'swap'
    }
  }
}

Development

  1. Clone this repository
  2. Install dependencies using yarn install
  3. Start development server using yarn dev

License

MIT License