Sellmate Design System - Vue

Vue 3 component wrappers for Sellmate Design System built with Stencil web components.

📦 Installation

npm install @sellmate/design-system-vue

or

yarn add @sellmate/design-system-vue

🛠 Setup

Vue 3

import '@sellmate/design-system/styles.css';
import { createApp } from 'vue';
import { StencilVuePlugin } from '@sellmate/design-system-vue';
import App from './App.vue';

const app = createApp(App);

app.use(StencilVuePlugin);
app.mount('#app');

Import @sellmate/design-system/styles.css once at app entry so global token CSS variables are available for components like sd-button.

Vite Configuration

If you are using Vite, you need to configure vite-plugin-static-copy to serve the design system assets (icons, lazy-loaded components) correctly.

1. Install vite-plugin-static-copy:

npm install -D vite-plugin-static-copy

or

yarn add -D vite-plugin-static-copy

2. Update vite.config.ts:

import { defineConfig } from 'vite';
import { viteStaticCopy } from 'vite-plugin-static-copy';
export default defineConfig({
 plugins: [
  viteStaticCopy({
   targets: [
    {
     src: 'node_modules/@sellmate/design-system/dist/esm/*',
     dest: 'assets',
    },
   ],
  }),
 ],
});

🚀 Quick Start

Basic Component Usage

<template>
 <div>
  <SdButton @click="handleClick"> Click me </SdButton>
 </div>
</template>

<script setup lang="ts">
import { SdButton } from '@sellmate/design-system-vue';

const handleClick = () => {
 console.log('Button clicked');
};
</script>

📚 Available Components

• SdButton - Button component
• SdInput - Input component
• SdCheckbox - Checkbox component
• SdSelect - Select dropdown component
• SdTable - Table component
• SdTag - Tag component
• SdIcon - Icon component
• SdTooltip - Tooltip component
• SdPopover - Popover component
• SdDatePicker - Date picker component
• SdDateRangePicker - Date range picker component
• SdPagination - Pagination component

📋 Requirements

• Vue 3.0.0 or higher
• @sellmate/design-system (peer dependency)

📝 License

MIT