@nuxtjs/critters

CSS optimization using beasties (formerly 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

2. 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 beasties: https://github.com/danielroe/beasties#beasties-
    config: {
      // Default: 'media'
      preload: 'swap',
    },
  },
})

Development

1. Clone this repository
2. Enable corepack with corepack enable
3. Install dependencies using pnpm install
4. Start development server using pnpm dev

License

MIT License