Vue.js Integration
Official Vue 3 package with full Composition API and Options API support.
Installation
1. Install the Package
Install the official Suggesto Vue package using npm, yarn, or pnpm:
Basic Usage
2. Import and Use the Component
Import the SuggestoWidget component and add it to your Vue application. Choose between Composition API or Options API:
Vue Component Usage
xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx with your actual Board ID from the dashboardComposable Usage (Advanced)
Using the useSuggesto Composable
For more control over the widget lifecycle, use the useSuggesto composable directly:
Using the Composable
Nuxt.js Users
If you're using Nuxt.js, we recommend using the dedicated @suggesto/nuxt module for the easiest setup experience with zero configuration.
Widget Configuration
All widget styling and behavior is configured through your Suggesto dashboard. The Vue component only requires the Board ID.
Available Event Handlers:
- @ready: Emitted when widget is initialized
- @feedback-submitted: Emitted when user submits feedback
- @error: Emitted if widget encounters an error
Note: When using the composable, events are handled directly via the on() method rather than Vue component events.
Conditional Rendering
You can conditionally render the widget using Vue's reactivity system based on user authentication or other app state:
Conditional Widget Rendering
Recent Improvements (v1.0.1)
Events are now properly queued and processed after widget loads. No more missed events due to timing issues!
Enhanced integration with Vue 3 Composition API and improved SSR compatibility for Nuxt applications.
Troubleshooting
If you encounter server-side rendering errors, ensure the plugin is client-side only:
Make sure to use reactive refs or reactive data properties:
Use Vue's event syntax with kebab-case for custom events: