Vlossom

[!NOTE] You are on the v2 project. Check out the v1 project for Vlossom v1.
Both versions will be maintained in parallel.

• Various Color Schemes — Easily style any component with a single prop
• Layered Style Sets — Global, named, or per-instance style overrides via CSS variables
• Overlay System — Modal, Toast, Confirm as plugins with full app context inheritance
• Declarative Responsive — Breakpoint objects instead of media queries
• Async Validation — Sync and async rules with built-in defaults per component
• Dark / Light Theme — One-line global toggle, auto-persisted

Quick Start

# Install
npm install vlossom
# or
pnpm add vlossom

[!TIP] Vlossom supports per-component tree shaking.
See VLOSSOM_USAGE_GUIDE.md.

// main.ts
import { createApp } from "vue";
import App from "./App.vue";
import { createVlossom, VlossomComponents } from "vlossom";
import "vlossom/styles";

const app = createApp(App);
app.use(
  createVlossom({
    components: VlossomComponents,
  }),
);
app.mount("#app");

<template>
  <vs-button primary>Hello Vlossom</vs-button>
</template>

<script setup lang="ts">
// Components are globally registered via createVlossom — no import needed
</script>

Component Overview

Layout

Form

Display

Feedback

Navigation

Utility

Links

• Changelog
• npm

Contributing

See CONTRIBUTING.md for development setup, commit conventions, and PR guidelines.

Project Structure

vlossom/
├── packages/vlossom/          # Main library package
│   └── src/
│       ├── components/        # UI components
│       ├── composables/       # Shared composables
│       ├── framework/         # Plugin & overlay system
│       ├── icons/             # Icon definitions
│       ├── plugins/           # Toast, Modal, Confirm plugins
│       ├── props/             # Shared prop definitions
│       ├── stores/            # State management
│       ├── styles/            # Global styles
│       └── utils/             # Utility functions
├── .github/                   # GitHub templates & workflows
└── release-please-config.json # Release automation

Component Structure

Each component follows this directory pattern:

vs-[name]/
├── Vs[Name].vue                           # Main component
├── Vs[Name].css                           # Styles
├── types.ts                               # TypeScript types
├── README.md                              # Documentation
├── __tests__/
│   └── vs-[name].test.ts                 # Unit tests
└── __stories__/
    ├── vs-[name].stories.ts              # Storybook stories
    └── vs-[name].chromatic.stories.ts    # Visual regression tests

For complex components, you may also include:

• vs-[name]-rules.ts — validation rules
• icons.ts — component-specific icons
• composables/ — component-specific composables

Releasing

Releases are automated via release-please. When a feat, fix, or chore commit is pushed to main:

1. release-please creates a release PR with version bump and changelog
2. Merging the release PR triggers npm publish automatically

Credits

• Pretendard - Default font (SIL Open Font License 1.1)

License

MIT