Installation

📚 Resources

• Documentation: Complete guide with examples
• Storybook: Interactive examples and component playground
• npm Package

Prerequisites

• Vue.js 3.3+
• Node.js 16+

Installation via npm

npm install @surgeui/ds-vue

Installation via yarn

yarn add @surgeui/ds-vue

Installation via pnpm

pnpm add @surgeui/ds-vue

Configuration

Global import

// main.ts
import { createApp } from 'vue'
import SurgeUpDS from '@surgeui/ds-vue'
import '@surgeui/ds-vue/style.css'
import App from './App.vue'

const app = createApp(App)
app.use(SurgeUpDS)
app.mount('#app')

Selective import

<script setup>
import '@surgeui/ds-vue/style.css'
import { SuButton } from '@surgeui/ds-vue'
import type { ButtonProps } from '@surgeui/ds-vue/types'
</script>

<template>
  <SuButton variant="primary">
    My button
  </SuButton>
</template>

Configuration with options

// main.js
import { createApp } from 'vue'
import SurgeUpDS from '@surgeui/ds-vue'

const app = createApp(App)

// Customize component prefix
app.use(SurgeUpDS, {
  prefix: 'My', // Components will be MyButton, MyInput, etc.
  
  // custom text color
  textPrimaryColor: '#213222',
  textSecondaryColor: '#454344',
  textTeriaryColor: '#676965',

  // Custom Button style
  button: {
    bg: '#101010',
    color: '#FFFFFF',
    border: 'none',
    hoverBackground: '#383838',
    hoverShadow: '0 0'
  }

  // custom link style
  link?: {
    color: '#2563eb',
    hoverColor: '#1e40af',
    hoverBackground: 'none',
    activeColor: '#1e3a8a',
  }

  // Other options are currently under development.
})

options

Options	Description
prefix	Préfix du composants

TypeScript

The design system includes complete TypeScript types. No additional configuration is needed.

<script setup lang="ts">
import { SuButton } from '@surgeui/ds-vue'
import type { ButtonVariant } from '@surgeui/ds-vue'

const variant: ButtonVariant = 'primary'
</script>