Nuxt Beastcss Module

[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![License][license-src]][license-href]
[![Nuxt][nuxt-src]][nuxt-href]

> Fast Critical CSS for Nuxt

- ✨  Release Notes

⭐️ Features

- 🧙  Zero-configuration required
- 🧬  Auto Enables Nuxt CSS Extraction
- 📝  Inject critical CSS automatically to page html
- 🧼  Removes injected CSS from main files
- ⚡️  Lightning fast
- 🎭️  Working both in ssr and generate mode
- 👯  Both __Nuxt 3__ and __Nuxt 2__ supported.

📦 Quick Setup

1. Add nuxt-beastcss dependency to your project

``bash


Using pnpm

pnpm add -D nuxt-beastcss

Using yarn

yarn add --dev nuxt-beastcss

Using npm

npm install --save-dev nuxt-beastcss
`

2. Add nuxt-beastcss to the modules section of nuxt.config.ts

`js
export default defineNuxtConfig({
modules: [
'nuxt-beastcss'
]
})
`

That's it! You can now use Nuxt Beastcss in your Nuxt app ✨

🔨 Options

You can write the nuxt-beastcss config like this:

`js
// nuxt.config.js
import { defineNuxtConfig } from 'nuxt'
export default defineNuxtConfig({
modules: ['nuxt-beastcss'],
beastcss: {
// Options passed directly to beastcss: https://github.com/freddy38510/beastcss/tree/master/packages/beastcss#options
config: {
// Default: false
fontFace: true,
},
},
})
`

In the config object you can pass all beastcss-official-options.

💻 Development

`bash


Install dependencies

npm install

Generate type stubs

npm run dev:prepare

Develop with the playground

npm run dev

Build the playground

npm run dev:build

Run ESLint

npm run lint

Fix style

npm run lint:fix

Run Vitest

npm run test
npm run test:watch

Release new version

npm run release
``

👏 Thanks

Thanks to @freddy38510 for his work on beastcss and thanks to @leeoniya for dropcss the magic behind HTML parsing speed.

[npm-version-src]: https://img.shields.io/npm/v/nuxt-beastcss/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
[npm-version-href]: https://npmjs.com/package/nuxt-beastcss

[npm-downloads-src]: https://img.shields.io/npm/dm/nuxt-beastcss.svg?style=flat&colorA=18181B&colorB=28CF8D
[npm-downloads-href]: https://npmjs.com/package/nuxt-beastcss

[license-src]: https://img.shields.io/npm/l/nuxt-beastcss.svg?style=flat&colorA=18181B&colorB=28CF8D
[license-href]: ./LICENSE

[nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js
[nuxt-href]: https://nuxt.com