الصفحات · Laravilt
Third-Party Packages
Integrating npm packages into custom fields
Integrate npm packages into custom form fields.
Recommended Packages
Core UI
| Package | Purpose | Install |
|---|---|---|
| radix-vue | UI primitives | npm i radix-vue |
| lucide-vue-next | Icons | npm i lucide-vue-next |
| @vueuse/core | Composables | npm i @vueuse/core |
Rich Text Editors
| Package | Purpose | Install |
|---|---|---|
| @tiptap/vue-3 | WYSIWYG editor | npm i @tiptap/vue-3 @tiptap/starter-kit |
| @milkdown/vue | Markdown editor | npm i @milkdown/core @milkdown/vue |
File Handling
| Package | Purpose | Install |
|---|---|---|
| vue-filepond | File uploads | npm i vue-filepond filepond |
| @uppy/vue | Advanced uploads | npm i @uppy/core @uppy/vue |
Date & Time
| Package | Purpose | Install |
|---|---|---|
| v-calendar | Date picker | npm i v-calendar@next |
| vue-datepicker | Date/time | npm i @vuepic/vue-datepicker |
Specialized
| Package | Purpose | Install |
|---|---|---|
| vue-color | Color picker | npm i vue-color |
| signature_pad | Signatures | npm i signature_pad |
| monaco-editor | Code editor | npm i monaco-editor |
Example: Tiptap Editor
vue
Example: Signature Pad
vue
Related
- Vue Components - Component patterns
- Creating Fields - Field class creation