From cf7b3fdaa61a767500c543da1cd8bfda9c2fed93 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Sun, 6 Apr 2025 16:21:27 -0700
Subject: [PATCH] docs: add info on using with vite

---
 packages/beasties/README.md | 36 ++++++++++++++++++++++++++++++++++++
 1 file changed, 36 insertions(+)

diff --git a/packages/beasties/README.md b/packages/beasties/README.md
index 4d10812..63bc51a 100644
--- a/packages/beasties/README.md
+++ b/packages/beasties/README.md
@@ -56,6 +56,42 @@ console.log(inlined)
 // "<style>.blue{color:blue}</style><div class=\"blue\">I'm Blue</div>"
 ```
 
+## Usage with Vite
+
+Beasties can be used with Vite through a plugin. First, install the necessary packages:
+
+```bash
+# npm
+npm install -D vite-plugin-beasties
+
+# yarn
+yarn add -D vite-plugin-beasties
+
+# pnpm
+pnpm add -D vite-plugin-beasties
+```
+
+Then add the plugin to your Vite configuration:
+
+```js
+// vite.config.ts
+import { defineConfig } from 'vite'
+import { beasties } from 'vite-plugin-beasties'
+
+export default defineConfig({
+  plugins: [
+    beasties({
+      // optional beasties configuration
+      options: {
+        preload: 'swap',
+      }
+    })
+  ]
+})
+```
+
+The plugin will process the output for your `index.html` and inline critical CSS while lazy-loading the rest.
+
 ## Usage with webpack
 
 Beasties is also available as a Webpack plugin called [beasties-webpack-plugin](https://www.npmjs.org/package/beasties-webpack-plugin). [![npm](https://img.shields.io/npm/v/beasties-webpack-plugin.svg)](https://www.npmjs.org/package/beasties-webpack-plugin)
-- 
2.51.2