Skip to content

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

Open
LokiWasHere wants to merge 1 commit intohiaaryan:mainfrom
LokiWasHere:vue-package
Open

feat: add Vue 3 support via sileo/vue subpath export#10
LokiWasHere wants to merge 1 commit intohiaaryan:mainfrom
LokiWasHere:vue-package

Conversation

@LokiWasHere
Copy link
Copy Markdown

@LokiWasHere LokiWasHere commented Feb 16, 2026

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

Copy link
Copy Markdown

@rivethorn rivethorn left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tested the components in Vite (React and Vue), Next.js, and Nuxt applications.
Overall, the behavior across all variants is consistent with what’s demonstrated in the documentation site.

However, there are styling issues with the Toaster:

  • In dark mode, the description styles are incorrect.
  • In light mode, the fill color is white, which makes the Toaster body invisible.

This behavior is consistent in every app mentioned above.

See screenshots below for reference:

Light mode:

Image

Dark mode:

Image

@LokiWasHere
Copy link
Copy Markdown
Author

However, there are styling issues with the Toaster:

  • In dark mode, the description styles are incorrect.
  • In light mode, the fill color is white, which makes the Toaster body invisible.

This behavior is consistent in every app mentioned above.

@rivethorn I encountered the same issue & when I inspected how the library was used in the playground, I think he rely on the style property to update the text's color.

I would love if the default variant (light & dark) had good text colors, maybe a PR could fix that?

@rivethorn
Copy link
Copy Markdown

I would love if the default variant (light & dark) had good text colors, maybe a PR could fix that?

@LokiWasHere That could fix that, sure.

@kebab-casee
Copy link
Copy Markdown

@hiaaryan We would love to if this component will support vue version
200w

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Feature] Vue

3 participants