/critters

CSS optimization using critters for Nuxt

Primary LanguageTypeScriptMIT LicenseMIT

@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
  • Works with Nitro prerendering

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 in 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
import { defineNuxtConfig } from 'nuxt'
export default defineNuxtConfig({
  modules: ['@nuxtjs/critters'],
  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