@nuxtjs/critters
TypeScript icon, indicating that this package has built-in type declarations

0.8.0 • Public • Published

@nuxtjs/critters

npm version npm downloads Github Actions CI Codecov License

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

Package Sidebar

Install

npm i @nuxtjs/critters

Weekly Downloads

8,217

Version

0.8.0

License

MIT

Unpacked Size

8.72 kB

Total Files

10

Last publish

Collaborators

  • danielroe