@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

npm install @jaiswald159/shared-vue-components

🚀 Usage

Vue 3

import { createApp } from 'vue'
import SharedVueComponents from '@jaiswald159/shared-vue-components'

const app = createApp(App)
app.use(SharedVueComponents)

Vue 2

import Vue from 'vue'
import SharedVueComponents from '@jaiswald159/shared-vue-components'

Vue.use(SharedVueComponents)

Nuxt 3

Create plugins/shared-vue-components.ts:

import SharedVueComponents from '@jaiswald159/shared-vue-components'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(SharedVueComponents)
})

Nuxt 2

Create plugins/shared-vue-components.js:

import Vue from 'vue'
import SharedVueComponents from '@jaiswald159/shared-vue-components'

Vue.use(SharedVueComponents)

Add to nuxt.config.js:

export default {
  plugins: ['~/plugins/shared-vue-components.js']
}

📚 Components

Button

<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

<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

<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

<template>
  <NotFoundPage message="Custom message" homePath="/dashboard" />
</template>

ErrorPage

<template>
  <ErrorPage 
    title="Error" 
    message="Something went wrong"
    :showDetails="true"
  />
</template>

🎯 Composables

useToggle

<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

<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

npm install
npm run build

Watch Mode

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