/nuxt-beastcss

Fast Critical CSS for Nuxt

Primary LanguageTypeScriptMIT LicenseMIT

Nuxt Beastcss Module

npm version npm downloads License Nuxt

Fast Critical CSS for Nuxt

⭐️ 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
  1. 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.