npm package: @jaiswald159/shared-vue-components
Description: Universal Vue components, pages, and composables for Vue 2, Vue 3, Nuxt 2, and Nuxt 3
Author: Deepak Jaiswal
Latest version: 1.0.7

# @jaiswald159/shared-vue-components

Universal Vue components, pages, and composables for Vue 2, Vue 3, Nuxt 2, and Nuxt 3.

Powered by **vue-demi** and built with **Vite**.

---

## ✨ Features

- 🎯 **Universal** - Works with Vue 2, Vue 3, Nuxt 2, Nuxt 3
- 🏗️ **Built with Vite** - Fast builds, modern tooling
- 📦 **Tree-shakeable** - Import only what you need
- 💪 **TypeScript** - Full type support
- 🎨 **Styled** - Beautiful default styles
- 🔌 **vue-demi** - Industry-standard compatibility

---

## 📦 Installation

```bash
npm install @jaiswald159/shared-vue-components
```

---

## 🚀 Usage

### Vue 3

```javascript
import { createApp } from 'vue'
import SharedVueComponents from '@jaiswald159/shared-vue-components'

const app = createApp(App)
app.use(SharedVueComponents)
```

### Vue 2

```javascript
import Vue from 'vue'
import SharedVueComponents from '@jaiswald159/shared-vue-components'

Vue.use(SharedVueComponents)
```

### Nuxt 3

Create `plugins/shared-vue-components.ts`:

```typescript
import SharedVueComponents from '@jaiswald159/shared-vue-components'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(SharedVueComponents)
})
```

### Nuxt 2

Create `plugins/shared-vue-components.js`:

```javascript
import Vue from 'vue'
import SharedVueComponents from '@jaiswald159/shared-vue-components'

Vue.use(SharedVueComponents)
```

Add to `nuxt.config.js`:

```javascript
export default {
  plugins: ['~/plugins/shared-vue-components.js']
}
```

---

## 📚 Components

### Button

```vue
<template>
  <Button variant="primary" size="medium" @click="handleClick">
    Click Me
  </Button>
</template>
```

**Props:**
- `variant`: `'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info'`
- `size`: `'small' | 'medium' | 'large'`
- `disabled`: `boolean`

### Card

```vue
<template>
  <Card hoverable>
    <template #header>Title</template>
    <p>Content</p>
    <template #footer>
      <Button>Action</Button>
    </template>
  </Card>
</template>
```

**Props:**
- `hoverable`: `boolean` - Adds hover effect
- `bordered`: `boolean` - Shows border

### Modal

```vue
<template>
  <Modal v-model="isOpen" title="My Modal" size="medium">
    <p>Modal content</p>
    <template #footer>
      <Button @click="isOpen = false">Close</Button>
    </template>
  </Modal>
</template>
```

**Props:**
- `modelValue`: `boolean` - Controls visibility
- `title`: `string`
- `size`: `'small' | 'medium' | 'large' | 'fullscreen'`
- `closable`: `boolean`
- `closeOnBackdrop`: `boolean`

---

## 📄 Pages

### NotFoundPage

```vue
<template>
  <NotFoundPage message="Custom message" homePath="/dashboard" />
</template>
```

### ErrorPage

```vue
<template>
  <ErrorPage 
    title="Error" 
    message="Something went wrong"
    :showDetails="true"
  />
</template>
```

---

## 🎯 Composables

### useToggle

```vue
<script setup>
import { useToggle } from '@jaiswald159/shared-vue-components'

const { state, toggle, setTrue, setFalse } = useToggle(false)
</script>

<template>
  <Button @click="toggle">{{ state ? 'ON' : 'OFF' }}</Button>
</template>
```

### useLocalStorage

```vue
<script setup>
import { useLocalStorage } from '@jaiswald159/shared-vue-components'

const { value, setValue, removeValue } = useLocalStorage('key', 'default')
</script>

<template>
  <input v-model="value" />
</template>
```

---

## 🔧 Development

### Build

```bash
npm install
npm run build
```

### Watch Mode

```bash
npm run dev
```

---

## ✅ Compatibility

- Vue 2.6+ (requires @vue/composition-api)
- Vue 2.7+ ✅
- Vue 3.x ✅
- Nuxt 2 ✅
- Nuxt 3 ✅

---

## 📝 License

MIT © Deepak Jaiswal