tokenizer-ui-kit 0.0.7 → 0.0.8

package/README.md

@@ -13,23 +13,29 @@ pnpm add tokenizer-ui-kit
 ## 🧩 Available Components
 
 ### Date Picker
+
 ```ts
 import { DatePicker } from "tokenizer-ui-kit";
 ```
 
 ### Button
+
 ```ts
 import { CButton } from "tokenizer-ui-kit";
 ```
 
 ### Circular Loader
+
 ```ts
 import { CircularLoader } from "tokenizer-ui-kit";
 ```
 
 ## 🚀 Usage
 
-### 1. Import components and styles
+### For Vue/Vite Applications
+
+#### 1. Import components and styles
+
 ```vue
 <script setup>
 import { DatePicker, CButton, CircularLoader } from "tokenizer-ui-kit";
@@ -38,7 +44,8 @@ import "tokenizer-ui-kit/dist/tokenizer-ui-kit.css";
 </script>
 ```
 
-### 2. Use components
+#### 2. Use components
+
 ```vue
 <template>
   <div>
@@ -62,11 +69,65 @@ const handleClick = () => {
 </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