feat(middleware): add Vue.js support and refactor middleware structure 💎

- Add Vue composable with automatic reactivity support
- Refactor React middleware to uppercase naming convention
- Update package configuration for Vue dependencies and exports
- Update documentation with Vue usage examples
- Bump version to 0.3.0 for new feature release

Author: NeaByteLab

README.md

@@ -10,6 +10,9 @@ npm install @neabyte/stateless-js
 
 # React (Automatic Re-renders)
 npm install @neabyte/stateless-js react
+
+# Vue (Automatic Reactivity)
+npm install @neabyte/stateless-js vue
 ```
 
 ## 🔧 Module Support
@@ -25,6 +28,9 @@ import { createStateless, useStateless } from '@neabyte/stateless-js'
 // React (Automatic Re-renders)
 import { useReactStateless } from '@neabyte/stateless-js/react'
 
+// Vue (Automatic Reactivity)
+import { useVueStateless } from '@neabyte/stateless-js/vue'
+
 // TypeScript types
 import type { StateSetter, StateValue } from '@neabyte/stateless-js'
 ```
@@ -76,7 +82,28 @@ function Counter() {
 }
 ```
 
-### 🔄 State Sharing (Universal & React)
+### 🟢 Vue Usage
+
+```typescript
+import { useVueStateless } from '@neabyte/stateless-js/vue'
+
+export default {
+  name: 'Counter',
+  setup() {
+    const [setCount, countValue] = useVueStateless('counter', 0)
+    const count = computed(() => countValue.value)
+    const increment = () => {
+      setCount(current => current + 1)
+    }
+    return {
+      count,
+      increment
+    }
+  }
+}
+```
+
+### 🔄 State Sharing (Universal, React & Vue)
 
 ```typescript
 // Universal
@@ -96,6 +123,28 @@ function UserEditor() {
     Increase Age
   </button>
 }
+
+// Vue - Multiple components share the same state
+export default {
+  name: 'UserProfile',
+  setup() {
+    const [setUser, userValue] = useVueStateless('user', { name: 'John', age: 25 })
+    const user = computed(() => userValue.value)
+    return { user }
+  }
+}
+
+export default {
+  name: 'UserEditor',
+  setup() {
+    const [setUser, userValue] = useVueStateless('user', { name: 'Default', age: 0 })
+    const user = computed(() => userValue.value)
+    const increaseAge = () => {
+      setUser(u => ({ ...u, age: u.age + 1 }))
+    }
+    return { user, increaseAge }
+  }
+}
 ```
 
 ### 🎯 Different Data Types
@@ -123,9 +172,17 @@ const [setBigInt, big] = createStateless('bigint', BigInt(123))
 ### 🔧 Object Updates
 
 ```typescript
+// Universal
 const [setData, data] = createStateless('data', { count: 0, items: [] })
 
-// Immutable updates
+// React
+const [setData, data] = useReactStateless('react-data', { count: 0, items: [] })
+
+// Vue
+const [setData, dataRef] = useVueStateless('vue-data', { count: 0, items: [] })
+const data = computed(() => dataRef.value)
+
+// Immutable updates work the same way
 setData(current => ({ ...current, count: current.count + 1 }))
 setData(current => ({ ...current, items: [...current.items, 'new item'] }))
 ```
@@ -181,6 +238,16 @@ React hook that provides automatic re-renders when state changes.
 - `initialValue`: Initial value for the state
 - Returns: Tuple `[StateSetter<T>, T]` (direct value, not StateValue object)
 
+### Vue Functions
+
+#### `useVueStateless<T>(id: StateId, initialValue: T): [StateSetter<T>, Ref<T>]`
+
+Vue composable that provides automatic reactivity when state changes.
+
+- `id`: Unique identifier (string or number)
+- `initialValue`: Initial value for the state
+- Returns: Tuple `[StateSetter<T>, Ref<T>]` (reactive ref for Vue reactivity)
+
 ### Types
 
 #### `StateSetter<T>`

build.config.ts

@@ -13,7 +13,7 @@ import { resolve } from 'path'
  */
 export default defineBuildConfig({
   /** @type {string[]} Entry points for the build process */
-  entries: ['src/index', 'src/react'],
+  entries: ['src/index', 'src/react', 'src/vue'],
   /** @type {boolean} Whether to generate TypeScript declaration files */
   declaration: true,
   /** @type {boolean} Whether to clean the output directory before building */