@nuxtjs/critters
v0.8.0
Published
Critical CSS for Nuxt
Downloads
30,346
Maintainers
Readme
@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
- Add
@nuxtjs/critters
dependency to your project
yarn add @nuxtjs/critters # or npm install @nuxtjs/critters
- Add
@nuxtjs/critters
to themodules
section ofnuxt.config.js
{
modules: [
'@nuxtjs/critters',
],
}
How it works
Nuxt has a number of ways to optimize your CSS in production:
- ✅ Nuxt uses
cssnano
in the build step to minify CSS rules - 📦 You can enable
purgecss
to remove unused CSS rules from your bundle. - ✅ 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
- Clone this repository
- Enable corepack with
corepack enable
- Install dependencies using
pnpm install
- Start development server using
pnpm dev