tokenizer-ui-kit 0.0.6 → 0.0.8

package/README.md

@@ -32,20 +32,103 @@ import { CircularLoader } from "tokenizer-ui-kit";
 
 ## 🚀 Usage
 
+### For Vue/Vite Applications
+
+#### 1. Import components and styles
+
+```vue
+<script setup>
+import { DatePicker, CButton, CircularLoader } from "tokenizer-ui-kit";
+// ⚠️ IMPORTANT: Import CSS styles for proper styling
+import "tokenizer-ui-kit/dist/tokenizer-ui-kit.css";
+</script>
+```
+
+#### 2. Use components
+
 ```vue
 <template>
   <div>
     <DatePicker v-model="selectedDate" />
-    <CButton @click="handleClick">Click me</CButton>
+    <CButton @click="handleClick" color="green">Click me</CButton>
     <CircularLoader v-if="loading" />
   </div>
 </template>
 
 <script setup>
+import { ref } from "vue";
 import { DatePicker, CButton, CircularLoader } from "tokenizer-ui-kit";
+import "tokenizer-ui-kit/dist/tokenizer-ui-kit.css";
+
+const selectedDate = ref(null);
+const loading = ref(false);
+
+const handleClick = () => {
+  console.log("Button clicked!");
+};
 </script>
 ```
 
+### For Nuxt Applications
+
+#### Option 1: In `nuxt.config.ts` (Recommended)
+
+```typescript
+// nuxt.config.ts
+export default defineNuxtConfig({
+  css: ["tokenizer-ui-kit/dist/tokenizer-ui-kit.css"],
+  // ... other config
+});
+```
+
+#### Option 2: In `app.vue` or layout
+
+```vue
+<!-- app.vue or layouts/default.vue -->
+<script setup>
+// Import CSS globally
+import "tokenizer-ui-kit/dist/tokenizer-ui-kit.css";
+</script>
+
+<template>
+  <NuxtPage />
+</template>
+```
+
+#### Option 3: In individual components
+
+```vue
+<!-- components/MyComponent.vue -->
+<script setup>
+import { DatePicker, CButton } from "tokenizer-ui-kit";
+import "tokenizer-ui-kit/dist/tokenizer-ui-kit.css";
+
+const selectedDate = ref(null);
+</script>
+
+<template>
+  <DatePicker v-model="selectedDate" />
+  <CButton color="green">Click me</CButton>
+</template>
+```
+
+#### Option 4: Using Nuxt plugins
+
+```typescript
+// plugins/tokenizer-ui-kit.client.ts
+export default defineNuxtPlugin(() => {
+  // Import CSS only on client side
+  import("tokenizer-ui-kit/dist/tokenizer-ui-kit.css");
+});
+```
+
+## ⚠️ Important Notes
+
+- **CSS Styles**: Always import the CSS file for proper component styling
+- **Date Picker**: Requires CSS for calendar popup to display correctly
+- **TypeScript**: Full TypeScript support included
+- **Nuxt**: Use `nuxt.config.ts` for global CSS import (recommended)
+
 ## 📚 Documentation
 
 Each component comes with TypeScript support and comprehensive documentation.