[PR #10] feat: add Vue 3 support via sileo/vue subpath export #22

New issue

Open

opened 2026-03-02 05:16:37 +03:00 by kerem · 0 comments

kerem commented

2026-03-02 05:16:37 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/hiaaryan/sileo/pull/10
Author: @LokiWasHere
Created: 2/16/2026
Status: 🔄 Open

Base: main ← Head: vue-package

📝 Commits (1)

75998a6 feat: add Vue support and update README.md

📊 Changes

16 files changed (+1991 additions, -726 deletions)

View changed files

📝 README.md (+56 -2)
📝 bun.lock (+43 -6)
📝 package.json (+27 -3)
➕ src/core/store.ts (+207 -0)
📝 src/core/types.ts (+8 -5)
📝 src/index.ts (+3 -2)
📝 src/react/icons.tsx (+0 -0)
➕ src/react/index.ts (+22 -0)
📝 src/react/sileo.tsx (+1 -2)
➕ src/react/toaster.tsx (+262 -0)
📝 src/styles.css (+263 -263)
➖ src/toast.tsx (+0 -443)
➕ src/vue/icons.ts (+63 -0)
➕ src/vue/index.ts (+26 -0)
➕ src/vue/sileo.ts (+737 -0)
➕ src/vue/toaster.ts (+273 -0)

📄 Description

Summary

Add Vue 3 support alongside the existing React adapter, making sileo a framework-agnostic toast library, closes #8.

Restructure the codebase into a shared core (src/core/) containing the toast store, API singleton, and generic types, with framework-specific adapters in src/react/ and src/vue/
Port the Toaster and Sileo components to Vue 3 using defineComponent + h() render functions (no .vue SFCs, no SFC compiler needed) producing identical DOM structure and data attributes so all existing CSS animations work as-is
Make the Vue Toaster client-only safe with an isMounted gate for SSR/Nuxt compatibility
Generalize SileoOptions<Renderable> so each adapter re-exports types specialized to its framework (ReactNode for React, VNode for Vue)
Add "sileo/vue" subpath export while keeping "sileo" fully backwards compatible for existing React consumers — zero breaking changes

Usage

// React (unchanged)
import { sileo, Toaster } from "sileo";

// Vue (new)
import { sileo, Toaster } from "sileo/vue";

Test plan

Verify existing React imports (import { sileo, Toaster } from "sileo") still work without changes
Verify import { sileo, Toaster } from "sileo/vue" resolves correctly in a Vue 3 project
Test all toast methods (success, error, warning, info, action, promise, dismiss, clear) from both adapters
Confirm toast animations (pill morph, expand/collapse, header transitions, entry/exit) render identically in Vue
Confirm hover-to-pause, swipe-to-dismiss, and auto-expand/collapse work in the Vue adapter
Verify SSR compatibility — Vue Toaster should render only slot content on the server and hydrate on the client
Run bun run build and confirm both entry points produce correct bundles with proper type declarations

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/hiaaryan/sileo/pull/10 **Author:** [@LokiWasHere](https://github.com/LokiWasHere) **Created:** 2/16/2026 **Status:** 🔄 Open **Base:** `main` ← **Head:** `vue-package` --- ### 📝 Commits (1) - [`75998a6`](https://github.com/hiaaryan/sileo/commit/75998a6904c434550bd10764121bbdf671868d44) feat: add Vue support and update README.md ### 📊 Changes **16 files changed** (+1991 additions, -726 deletions) <details> <summary>View changed files</summary> 📝 `README.md` (+56 -2) 📝 `bun.lock` (+43 -6) 📝 `package.json` (+27 -3) ➕ `src/core/store.ts` (+207 -0) 📝 `src/core/types.ts` (+8 -5) 📝 `src/index.ts` (+3 -2) 📝 `src/react/icons.tsx` (+0 -0) ➕ `src/react/index.ts` (+22 -0) 📝 `src/react/sileo.tsx` (+1 -2) ➕ `src/react/toaster.tsx` (+262 -0) 📝 `src/styles.css` (+263 -263) ➖ `src/toast.tsx` (+0 -443) ➕ `src/vue/icons.ts` (+63 -0) ➕ `src/vue/index.ts` (+26 -0) ➕ `src/vue/sileo.ts` (+737 -0) ➕ `src/vue/toaster.ts` (+273 -0) </details> ### 📄 Description ## Summary Add Vue 3 support alongside the existing React adapter, making sileo a framework-agnostic toast library, closes #8. - Restructure the codebase into a shared core (`src/core/`) containing the toast store, API singleton, and generic types, with framework-specific adapters in `src/react/` and `src/vue/` - Port the `Toaster` and `Sileo` components to Vue 3 using `defineComponent` + `h()` render functions (no `.vue` SFCs, no SFC compiler needed) producing identical DOM structure and data attributes so all existing CSS animations work as-is - Make the Vue Toaster client-only safe with an `isMounted` gate for SSR/Nuxt compatibility - Generalize `SileoOptions<Renderable>` so each adapter re-exports types specialized to its framework (`ReactNode` for React, `VNode` for Vue) - Add `"sileo/vue"` subpath export while keeping `"sileo"` fully backwards compatible for existing React consumers — zero breaking changes ### Usage ```ts // React (unchanged) import { sileo, Toaster } from "sileo"; // Vue (new) import { sileo, Toaster } from "sileo/vue"; ``` ## Test plan - [ ] Verify existing React imports (`import { sileo, Toaster } from "sileo"`) still work without changes - [x] Verify `import { sileo, Toaster } from "sileo/vue"` resolves correctly in a Vue 3 project - [ ] Test all toast methods (`success`, `error`, `warning`, `info`, `action`, `promise`, `dismiss`, `clear`) from both adapters - [x] Confirm toast animations (pill morph, expand/collapse, header transitions, entry/exit) render identically in Vue - [x] Confirm hover-to-pause, swipe-to-dismiss, and auto-expand/collapse work in the Vue adapter - [x] Verify SSR compatibility — Vue Toaster should render only slot content on the server and hydrate on the client - [x] Run `bun run build` and confirm both entry points produce correct bundles with proper type declarations --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>