feat: add Vue 3 support via sileo/vue subpath export

README.md

@@ -1,6 +1,6 @@
 <div align="center">
   <h1>Sileo</h1>
-  <p>An opinionated, physics-based toast component for React.</p>
+  <p>An opinionated, physics-based toast component for React & Vue.</p>
   <p><a href="https://sileo.aaryan.design">Try Out</a> &nbsp; / &nbsp; <a href="https://sileo.aaryan.design/docs">Docs</a></p>
   <video src="https://github.com/user-attachments/assets/a292d310-9189-490a-9f9d-d0a1d09defce"></video>
 </div>
@@ -11,10 +11,11 @@
 npm i sileo
 ```
 
-### Getting Started
+### React
 
 ```tsx
 import { sileo, Toaster } from "sileo";
+import "sileo/styles.css";
 
 export default function App() {
   return (
@@ -24,6 +25,59 @@ export default function App() {
     </>
   );
 }
+
+// Trigger toasts anywhere
+sileo.success({ title: "Saved", description: "Your changes were saved." });
+sileo.error({ title: "Error", description: "Something went wrong." });
+```
+
+### Vue
+
+```vue
+<script setup>
+import { Toaster, sileo } from "sileo/vue";
+import "sileo/styles.css";
+
+function handleClick() {
+  sileo.success({ title: "Saved", description: "Your changes were saved." });
+}
+</script>
+
+<template>
+  <Toaster position="top-right" />
+  <button @click="handleClick">Show toast</button>
+</template>
 ```
 
+### API
+
+The `sileo` API is identical across both frameworks:
+
+```ts
+sileo.show({ title: "Hello" });
+sileo.success({ title: "Saved", description: "Your changes were saved." });
+sileo.error({ title: "Error", description: "Something went wrong." });
+sileo.warning({ title: "Warning", description: "Proceed with caution." });
+sileo.info({ title: "Info", description: "Here's some information." });
+
+// Promise-based
+sileo.promise(fetchData(), {
+  loading: { title: "Loading..." },
+  success: (data) => ({ title: "Done", description: `Loaded ${data.length} items.` }),
+  error: (err) => ({ title: "Failed", description: String(err) }),
+});
+
+// Dismiss & clear
+sileo.dismiss(id);
+sileo.clear();
+```
+
+### Toaster Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `position` | `"top-left" \| "top-center" \| "top-right" \| "bottom-left" \| "bottom-center" \| "bottom-right"` | `"top-right"` | Where toasts appear |
+| `offset` | `number \| string \| { top?, right?, bottom?, left? }` | — | Viewport offset |
+| `options` | `Partial<SileoOptions>` | — | Default options for all toasts |
+
 For detailed docs, click here: https://sileo.aaryan.design

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "sileo",
 	"version": "0.1.0",
-	"description": "An opinionated, physics based toast notification library for react.",
+	"description": "An opinionated, physics based toast notification library for react and vue.",
 	"license": "MIT",
 	"repository": {
 		"type": "git",
@@ -19,6 +19,17 @@
 			},
 			"default": "./dist/index.js"
 		},
+		"./vue": {
+			"import": {
+				"types": "./dist/vue/index.d.mts",
+				"default": "./dist/vue/index.mjs"
+			},
+			"require": {
+				"types": "./dist/vue/index.d.ts",
+				"default": "./dist/vue/index.js"
+			},
+			"default": "./dist/vue/index.js"
+		},
 		"./styles.css": "./dist/styles.css"
 	},
 	"main": "./dist/index.js",
@@ -32,9 +43,22 @@
 	},
 	"peerDependencies": {
 		"react": ">=18",
-		"react-dom": ">=18"
+		"react-dom": ">=18",
+		"vue": ">=3"
+	},
+	"peerDependenciesMeta": {
+		"react": {
+			"optional": true
+		},
+		"react-dom": {
+			"optional": true
+		},
+		"vue": {
+			"optional": true
+		}
 	},
 	"devDependencies": {
-		"bunchee": "^6.9.4"
+		"bunchee": "^6.9.4",
+		"vue": "^3"
 	}
 }