Vue 3 UI Kit

A customizable UI component library for Vue 3 with built-in theme support, BEM methodology, and SSR compatibility.

Features

• Vue 3 Composition API - Built with modern Vue 3 features
• BEM Methodology - Consistent class naming with auto-generated helpers
• Theme System - Light/dark themes with CSS variables
• SSR Ready - Full server-side rendering support
• Customizable - Modify via SCSS variables or JS configuration
• Zero Dependencies - Except Vue 3 and VueUse for theme logic

Installation

npm install ui-kit @vueuse/core

yarn add ui-kit @vueuse/core

Quick Start

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import UIKit from 'ui-kit';

createApp( App ).use( UIKit, {
    
	theme: 'dark', // default 'light'
	
	variables: {		
		primaryColor: '#2196F3',
		borderRadius: '8px',	
	}

} ).mount( '#app' );

Usage

Component Example

<template>
	
	<UiButton 
		variant="primary" 
		rounded 
		@click="handleClick"
	>
		<template #icon>
			<IconStar/>
		</template>
		Click Me
	</UiButton>

</template>

Theme Switching

<script setup>
import { useTheme } from 'ui-kit';

const { theme, setTheme, isDark } = useTheme();

const toggleTheme = () => {
	
	setTheme( isDark.value ? 'light' : 'dark' );

};
</script>

Customization

Via SCSS

// styles/theme.scss
$theme-vars: (
	primary-color: #00BCD4,
	text-color: #212121
);

@import '~ui-kit/src/assets/scss/variables';

Via JavaScript

app.use( UIKit, {
	
	variables: {
		primaryColor: '#FF5722',
		spacingBase: '12px',
	}

} );

SSR Support (Nuxt.js)

Create plugin:

// plugins/ui-kit.js
export default defineNuxtPlugin( ( nuxtApp ) => {
	
	const ssrTheme = process.server 
		? nuxtApp.ssrContext.req.cookies.theme 
		: null;

	nuxtApp.vueApp.use( UIKit, {
		
		theme: ssrTheme || 'light',
	
	} );

} );

Add to nuxt.config.js:

export default {
	
	css: [ '~/assets/theme.scss' ],
	build: { transpile: [ 'ui-kit' ] },

};

Development

# Clone repository
git clone https://gitverse.ru/woodell/ui-kit.git

# Install dependencies
npm install

# Develop with hot reload
npm run dev

# Build library
npm run build

# Test in demo app
cd demo && npm run dev

# Clone repository
git clone https://gitverse.ru/woodell/ui-kit.git

# Install dependencies
yarn

# Develop with hot reload
yarn dev

# Build library
yarn build

# Test in demo app
cd demo && yarn dev

Publication

npm run build && npm publish

ui-kit/
├─ src/
│  ├─ assets/
│  │  └─ scss/
│  │     ├─ _variables.scss
│  │     ├─ _mixins.scss
│  │     └─ themes/
│  │        ├─ _light.scss
│  │        └─ _dark.scss
│  ├─ components/
│  │  ├─ UiButton/
│  │  │  ├─ UiButton.vue
│  │  │  └─ UiButton.scss
│  │  └─ ThemeProvider/
│  │     └─ ThemeProvider.vue
│  ├─ composables/
│  │  ├─ useBem.js
│  │  └─ useTheme.js
│  ├─ plugins/
│  │  └─ theme.js
│  └─ index.js
├─ vite.config.js
├─ package.json
└─ README.md