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

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

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