Nuxt.js Integration
Official Nuxt module for seamless integration with zero configuration. The easiest way to add Suggesto to your Nuxt application.
Just add your Board ID to nuxt.config.ts - everything else is handled automatically
Automatically loads client-side only, preventing SSR hydration issues
Supports Nuxt's runtime configuration for environment-specific settings
Installation
1. Install the Module
Install the official Suggesto Nuxt module:
2. Configure the Module
Add the module to your nuxt.config.ts and configure your Board ID:
nuxt.config.ts
xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx with your actual Board ID from the dashboardThe Suggesto widget is now automatically active on all pages of your Nuxt application! The module handles everything:
- Client-side only loading (no SSR issues)
- Automatic widget initialization
- Runtime configuration management
- TypeScript support
Usage
Automatic Widget Loading
Once configured, the widget works automatically. No additional code needed in your components:
pages/index.vue
Advanced Configuration
Custom Base URL
If you're using a custom Suggesto instance, you can specify a custom base URL:
nuxt.config.ts
Programmatic Control (Advanced)
Access the widget instance for programmatic control and event handling. This works alongside the automatic widget loading:
components/FeedbackButton.vue
New in v1.0.4: Singleton pattern ensures no conflicts between auto-loading and manual control. You can safely use both approaches simultaneously!
Environment-Specific Configuration
Using Environment Variables
Use environment variables for different Board IDs across environments:
nuxt.config.ts
Conditional Loading
Create a plugin for environment-specific logic:
plugins/suggesto-conditional.client.ts
Module Configuration Options
boardIdYour Suggesto board ID (required)
baseUrlCustom Suggesto instance URL (optional)
disabledDisable the module (optional)
Recent Improvements (v1.0.4)
Prevents widget conflicts and duplicate loading. Auto-loading and manual control now work seamlessly together!
Corrected TypeScript to JavaScript file references in plugins for better compatibility.
Full compatibility testing and support for the latest Nuxt 4.0+ features and build system.
Troubleshooting
Ensure the module is properly configured:
- Check that
@suggesto/nuxtis in the modules array - Verify your Board ID is correct
- Make sure you're testing in a browser (widget is client-side only)
The module automatically registers TypeScript definitions. If you encounter issues:
The widget works in both development and production. For environment-specific behavior, use runtime config or conditional plugins as shown in the examples above.
If you were previously using the Vue integration method, the Nuxt module provides a much simpler setup. Remove any manual script loading and Vue components, then follow the installation steps above. The module handles everything automatically!