vue-form-style-generator

Vue Form Style Generator

A Vue 3 plugin for generating customizable form styles with theme support.

Features

• 🎨 Multiple themes support (default and dark)
• 🎯 Easy to use and customize
• 🚀 Built with Vue 3 and TypeScript
• 💅 Powered by Tailwind CSS
• 📦 Lightweight and performant

Installation

npm install vue-form-style-generator

Usage

import { createApp } from 'vue'
import App from './App.vue'
import StyleGenerator from 'vue-form-style-generator'
import 'vue-form-style-generator/src/style.css'

const app = createApp(App)

// Use with default theme
app.use(StyleGenerator)

// Or use with dark theme
app.use(StyleGenerator, { theme: 'dark' })

app.mount('#app')

Available Themes

• default: Light theme with blue accent colors
• dark: Dark theme with blue accent colors

Form Classes

import { formClasses } from 'vue-form-style-generator'

// Available classes:
formClasses.input    // Form input styles
formClasses.label    // Form label styles
formClasses.button   // Form button styles
formClasses.error    // Form error message styles
formClasses.container // Form container styles
formClasses.group    // Form group styles

Example

<template>
  <div :class="formClasses.container">
    <form>
      <div :class="formClasses.group">
        <label :class="formClasses.label">Username</label>
        <input type="text" :class="formClasses.input" />
      </div>
      <button :class="formClasses.button">Submit</button>
    </form>
  </div>
</template>

<script setup lang="ts">
import { formClasses } from 'vue-form-style-generator'
</script>

Customization

You can customize the theme by overriding CSS variables:

:root {
  --color-primary: #your-color;
  --color-background: #your-color;
  /* ... other variables */
}

License

MIT