Vue component for Form-Data forms
npm install @formdata/vueA Vue 3 component for embedding Form-Data forms in your Vue applications.
``bash`
npm install @formdata/vue
`js
// main.js
import { createApp } from 'vue'
import App from './App.vue'
import { FormDataPlugin } from '@formdata/vue'
const app = createApp(App)
app.use(FormDataPlugin)
app.mount('#app')
`
`vue
My Form
mode="sidebar"
trigger="fab"
:fab="{ icon: 'smilies', background: '#86c3e8' }"
/>
`
The component accepts the following props:
| Prop | Type | Default | Description |
|----------------|-----------|---------|-----------------------------------------------------------------|
| url | string | Required | Direct URL to the form |mode
| | string | 'inline' | Display mode ('inline', 'popup', 'sidebar', 'floating') |trigger
| | string | 'none' | Trigger type ('none', 'fab', 'tab') |params
| | object | {} | Parameters passed to the form as query params |id
| | string | - | Custom ID for the form instance |debug
| | boolean | false | When set, adds debug messages to the console |globalPropName
| | string | 'joy' | Name of the global function to use (useful for multiple forms) |
> Note: The url parameter is required and must be a direct form embed URL.
#### Inline Mode
When mode is set to 'inline':
`vue`
mode="inline"
:inline="{
width: '500px',
maxWidth: '100vw'
}"
/>
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| selector | string | - | CSS selector for the container |width
| | string | '100%' | Width of the form |maxWidth
| | string | '100vw' | Maximum width of the form |
#### Popup Mode
When mode is set to 'popup':
`vue`
mode="popup"
:popup="{
width: '800px',
height: '600px',
overlay: true
}"
/>
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| zIndex | string/number | 99999 | z-index value |transitionDuration
| | string | '300ms' | Animation duration |radius
| | string | '8px' | Border radius |width
| | string | - | Width of the popup |height
| | string | - | Height of the popup |overlay
| | boolean | false | Whether to show overlay |closeButton
| | boolean | true | Whether to show close button |
#### Sidebar Mode
When mode is set to 'sidebar':
`vue`
mode="sidebar"
:sidebar="{
side: 'right',
width: '600px',
overlay: true
}"
/>
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| side | string | 'right' | Side to display ('left', 'right') |width
| | string | '600px' | Width of the sidebar |transitionDuration
| | string | '300ms' | Animation duration |overlay
| | boolean | false | Whether to show overlay |zIndex
| | string/number | 99999 | z-index value |closeButton
| | boolean | true | Whether to show close button |
#### Floating Mode
When mode is set to 'floating':
`vue`
mode="floating"
:floating="{
width: '350px',
side: 'right',
radius: '8px'
}"
/>
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| width | string | '350px' | Width of the widget |maxWidth
| | string | '100vw' | Maximum width |overlay
| | boolean | false | Whether to show overlay |side
| | string | 'right' | Side to display ('left', 'right') |zIndex
| | string/number | 99999 | z-index value |transitionDuration
| | string | '300ms' | Animation duration |radius
| | string | '8px' | Border radius |closeButton
| | boolean | true | Whether to show close button |
#### FAB Trigger
When trigger is set to 'fab':
`vue`
trigger="fab"
:fab="{
background: '#86c3e8',
icon: 'smilies',
side: 'right'
}"
/>
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| background | string | - | Button background color |width
| | string | '50px' | Button size |zIndex
| | string/number | 99999 | z-index value |color
| | string | - | Icon color |onOpenMode
| | string | 'hide' | Behavior when open ('close', 'hide') |side
| | string | 'right' | Side to display ('left', 'right') |icon
| | string | - | Icon to display |iconSize
| | string | '50%' | Size of the icon |iconOnly
| | boolean | false | Whether to show only the icon |shadow
| | string | - | Box shadow for the button |
#### Tab Trigger
When trigger is set to 'tab':
`vue`
trigger="tab"
:tab="{
background: '#27bdf6',
label: 'Feedback',
side: 'right'
}"
/>
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| background | string | '#00a3dd' | Tab background color |borderRadius
| | string | '3px' | Border radius |zIndex
| | string/number | 99999 | z-index value |color
| | string | '#ffffff' | Text color |side
| | string | 'right' | Side to display ('left', 'right') |label
| | string | 'Feedback' | Text to display |bottom
| | string | '20%' | Distance from bottom of screen |
is set to true in popup, sidebar, or floating modes:`vue
mode="popup"
:popup="{ overlay: true }"
:overlay="{
opacity: 0.6,
color: '#000',
closeOnClick: true
}"
/>
`| Prop | Type | Default | Description |
|------|------|---------|-------------|
|
| string/number | 999 | z-index value |
| color | string | '#000' | Overlay color |
| opacity | number | 0.5 | Opacity (0-1) |
| closeOnClick | boolean | true | Close when overlay clicked |
| transitionDuration | string | '300ms' | Animation duration |Methods
The component exposes the following methods for controlling the form:
`vue
url="https://forms.form-data.com/your-form-id/embed"
mode="sidebar"
/>
``MIT