@feedvalue/vue 0.1.1 → 0.1.4

package/README.md

@@ -141,9 +141,52 @@ async function handleSubmit() {
 </template>
 ```
 
+### Custom Fields
+
+Custom fields allow you to collect structured data beyond the main feedback message. **Custom fields must be defined in your widget configuration on the FeedValue dashboard before use.**
+
+1. Go to your widget settings in the FeedValue dashboard
+2. Add custom fields with types: `text`, `email`, or `emoji`
+3. Use `customFieldValues` when submitting:
+
+```vue
+<script setup>
+import { ref } from 'vue';
+import { useFeedValue } from '@feedvalue/vue';
+
+const { submit, isReady } = useFeedValue();
+const name = ref('');
+const category = ref('feature');
+
+async function handleSubmit() {
+  await submit({
+    message: 'Detailed feedback',
+    customFieldValues: {
+      // Field IDs must match those defined in your widget configuration
+      name: name.value,
+      category: category.value,
+    },
+  });
+}
+</script>
+
+<template>
+  <form @submit.prevent="handleSubmit">
+    <input v-model="name" placeholder="Your name" />
+    <select v-model="category">
+      <option value="bug">Bug Report</option>
+      <option value="feature">Feature Request</option>
+    </select>
+    <button type="submit" :disabled="!isReady">Submit</button>
+  </form>
+</template>
+```
+
+> **Important**: The field IDs in `customFieldValues` must match the field IDs defined in your widget configuration on the dashboard.
+
 ### User Identification
 
-User data is automatically included with feedback submissions:
+Attach user context to feedback submissions. This data is **not shown in the widget UI** but is stored with the submission and visible in your FeedValue dashboard:
 
 ```vue
 <script setup>
@@ -168,6 +211,10 @@ watch(() => props.user, (user) => {
 </script>
 ```
 
+> **User Data vs Custom Fields**
+> - **User data** (`identify`/`setData`): Hidden from users, automatically attached to submissions. Use for internal context like user IDs, subscription plans, etc.
+> - **Custom fields** (`customFieldValues`): Shown as form inputs in the widget. Users fill these in themselves. Must be defined in widget configuration first.
+
 ### Options API Support
 
 ```vue
@@ -247,9 +294,9 @@ const instance = inject(FEEDVALUE_KEY);
 const options = inject(FEEDVALUE_OPTIONS_KEY);
 ```
 
-## Nuxt 3 Integration
+## Nuxt Integration
 
-Create a plugin file:
+Works with Nuxt 3 and Nuxt 4. Create a plugin file:
 
 ```typescript
 // plugins/feedvalue.client.ts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@feedvalue/vue",
-  "version": "0.1.1",
+  "version": "0.1.4",
   "description": "FeedValue Vue 3 SDK - Plugin and Composables for Vue 3+",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -23,30 +23,20 @@
     "README.md"
   ],
   "sideEffects": false,
-  "scripts": {
-    "build": "tsup",
-    "dev": "tsup --watch",
-    "lint": "eslint src",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "test:coverage": "vitest run --coverage",
-    "typecheck": "tsc --noEmit",
-    "clean": "rm -rf dist"
-  },
   "peerDependencies": {
     "vue": ">=3.3.0"
   },
   "dependencies": {
-    "@feedvalue/core": "workspace:^"
+    "@feedvalue/core": "^0.1.4"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^5.2.0",
-    "@vitest/coverage-v8": "^2.1.0",
+    "@vitejs/plugin-vue": "^6.0.3",
+    "@vitest/coverage-v8": "^4.0.18",
     "@vue/test-utils": "^2.4.0",
-    "happy-dom": "^15.11.0",
+    "happy-dom": "^20.3.9",
     "tsup": "^8.3.0",
     "typescript": "^5.7.0",
-    "vitest": "^2.1.0",
+    "vitest": "^4.0.18",
     "vue": "^3.5.0"
   },
   "publishConfig": {
@@ -74,5 +64,15 @@
   ],
   "engines": {
     "node": ">=18"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "lint": "eslint src",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf dist"
   }
-}
+}