nuxt-beastcss

Nuxt Beastcss Module

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

# 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

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:

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

# 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.