spicykatsu

SpicyKatsuLib

Fun, simple component library for Vue 3. Built as a personal playground for my website. Feel free to use it in your own projects.

📖 Docs  |  📦 npm

Installation

npm install spicykatsu

Usage

Full Install (Recommended)

All components, styles, and directives are registered automatically. No extra imports needed.

import { createApp } from 'vue'
import App from './App.vue'
import { SpicyKatsu } from 'spicykatsu'

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

Tree-Shakeable (For production optimization)

Import only the components and directives you need. Each component's CSS is bundled automatically via its <style> block. However, you must also import the CSS variables so components look correct.

import { createApp } from 'vue'
import App from './App.vue'
import { SpicyBtn, SpicyModal } from 'spicykatsu/SpicyBtn'
import { spicyRipple } from 'spicykatsu/spicyRipple'

// Import CSS variables (required for components to look correct)
import 'spicykatsu/styles/variables'

const app = createApp(App)
app.component('SpicyBtn', SpicyBtn)
app.component('SpicyModal', SpicyModal)
app.directive('spicyRipple', spicyRipple)
app.mount('#app')

You can also import base utility styles if you use .spicyText, .spicyHeader, or .spicyLink classes:

import 'spicykatsu/styles/base'

Or import all styles at once:

import 'spicykatsu/styles'

Plugin with selective options

You can also use the plugin with options to control what gets registered:

app.use(SpicyKatsu, {
  useComponents: true,  // Register all components globally (default: true)
  useStyles: true,      // Inject all styles into <head> (default: true)
  useDirectives: true   // Register v-spicyDrag and v-spicyRipple (default: true)
})

Set any to false to opt out of that part. For example, to register components yourself but still get styles injected:

app.use(SpicyKatsu, { useComponents: false })

To inject only CSS variables (useful when tree-shaking components but still using the plugin for style injection):

app.use(SpicyKatsu, { useComponents: false, useStyles: 'variables' })

Components

Directives

Dev / Playground

Clone the repo and run:

bun install
bun run dev

The playground (playground/Playground.vue) has a live example of every component and directive.