Critical CSS for Nuxt
npm install @nuxtjs/critters[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![Github Actions CI][github-actions-ci-src]][github-actions-ci-href]
[![Codecov][codecov-src]][codecov-href]
[![License][license-src]][license-href]
> CSS optimization using beasties (formerly critters) for Nuxt
- Zero-configuration required
- Enables CSS Extraction
- Critical CSS automatically injected to page
- Works with Nitro prerendering
1. Add @nuxtjs/critters dependency to your project
``bash`
yarn add @nuxtjs/critters # or npm install @nuxtjs/critters
2. Add @nuxtjs/critters to the modules section of nuxt.config.js
`js`
{
modules: [
'@nuxtjs/critters',
],
}
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.
You can override the @nuxtjs/critters defaults like this:
`js`
// 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',
},
},
})
1. Clone this repository
1. Enable corepack with corepack enablepnpm install
1. Install dependencies using pnpm dev`
1. Start development server using
[npm-version-src]: https://img.shields.io/npm/v/@nuxtjs/critters/latest.svg
[npm-version-href]: https://npmjs.com/package/@nuxtjs/critters
[npm-downloads-src]: https://img.shields.io/npm/dm/@nuxtjs/critters.svg
[npm-downloads-href]: https://npm.chart.dev/@nuxtjs/critters
[github-actions-ci-src]: https://github.com/nuxt-modules/critters/workflows/ci/badge.svg
[github-actions-ci-href]: https://github.com/nuxt-modules/critters/actions?query=workflow%3Aci
[codecov-src]: https://img.shields.io/codecov/c/github/nuxt-modules/critters.svg
[codecov-href]: https://codecov.io/gh/nuxt-modules/critters
[license-src]: https://img.shields.io/npm/l/@nuxtjs/critters.svg
[license-href]: https://npmjs.com/package/@nuxtjs/critters