@nuxtjs/critters
Features
- Zero-configuration required
- Enables CSS Extraction
- Critical CSS automatically injected to page
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 usescssnano
at the build step to minify CSS rules -
📦 You can enablepurgecss
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
export default {
critters: {
// Options passed directly to critters: https://github.com/GoogleChromeLabs/critters#critters-2
config: {
// Default: 'media'
preload: 'swap'
}
}
}
Development
- Clone this repository
- Install dependencies using
yarn install
- Start development server using
yarn dev