Package Exports

@nuxtjs/critters

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@nuxtjs/critters) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@nuxtjs/critters

CSS optimization using critters for Nuxt

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

✅ Nuxt uses cssnano at 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
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

License

MIT License