Amplitude integration for Vue 3
This skill helps you add Amplitude analytics to Vue 3 applications.
Workflow
Follow these steps in order to complete the integration:
references/basic-integration-1.0-begin.md - Amplitude Setup - Begin ← Start herereferences/basic-integration-1.1-edit.md - Amplitude Setup - Editreferences/basic-integration-1.2-revise.md - Amplitude Setup - Revisereferences/basic-integration-1.3-conclude.md - Amplitude Setup - Conclusion
Reference files
references/EXAMPLE.md - Vue 3 example project codereferences/browser-unified-sdk.md - Amplitude documentation for Browser Unified Sdkreferences/browser-sdk-2.md - Amplitude documentation for Browser Sdk 2references/amplitude-quickstart.md - Amplitude documentation for Amplitude Quickstartreferences/basic-integration-1.0-begin.md - Amplitude setup - beginreferences/basic-integration-1.1-edit.md - Amplitude setup - editreferences/basic-integration-1.2-revise.md - Amplitude setup - revisereferences/basic-integration-1.3-conclude.md - Amplitude setup - conclusion
The example project shows the target implementation pattern. Consult the documentation for API details.
Key principles
- Environment variables: Always use environment variables for Amplitude keys. Never hardcode them.
- Minimal changes: Add Amplitude code alongside existing integrations. Don't replace or restructure existing code.
- Match the example: Your implementation should follow the example project's patterns as closely as possible.
- Unified SDK: For new browser/frontend projects, use
@amplitude/unified as the default SDK — it bundles Analytics, Session Replay, Experiment, and Guides & Surveys in a single package. Initialize with initAll(). Only use @amplitude/analytics-browser if the project already has it installed.
- Event naming: Event names MUST use Title Case with spaces following the [Noun] + [Past-Tense Verb] pattern (e.g., "Button Clicked", "Sign Up Completed", "Cart Viewed"). Do NOT use snake_case, camelCase, or SCREAMING_SNAKE. Property names should use snake_case (e.g., button_text, page_url).
- No PII in events: Never send PII (emails, full names, phone numbers, physical addresses, IP addresses) in
track() event properties. PII belongs in identify() user properties only.
- Autocapture: Enable autocapture in the init config to automatically capture sessions, page views, form interactions, and file downloads. Use the
autocapture config option (not the deprecated defaultTracking).
Identifying users
Identify users during login and signup events. Refer to the example code and documentation for the correct identify pattern for this framework. Call amplitude.setUserId(userId) to associate events with a known user, and use amplitude.identify() with an Identify object to set user properties. Call amplitude.reset() on logout to unlink future events from the current user. If both frontend and backend code exist, pass a consistent user/device ID via custom request headers to maintain event correlation.
1---2name: integration-vue-33description: Amplitude integration for Vue 3 applications4---56# Amplitude integration for Vue 378This skill helps you add Amplitude analytics to Vue 3 applications.910## Workflow1112Follow these steps in order to complete the integration:13141. `references/basic-integration-1.0-begin.md` - Amplitude Setup - Begin ← **Start here**152. `references/basic-integration-1.1-edit.md` - Amplitude Setup - Edit163. `references/basic-integration-1.2-revise.md` - Amplitude Setup - Revise174. `references/basic-integration-1.3-conclude.md` - Amplitude Setup - Conclusion1819## Reference files2021- `references/EXAMPLE.md` - Vue 3 example project code22- `references/browser-unified-sdk.md` - Amplitude documentation for Browser Unified Sdk23- `references/browser-sdk-2.md` - Amplitude documentation for Browser Sdk 224- `references/amplitude-quickstart.md` - Amplitude documentation for Amplitude Quickstart25- `references/basic-integration-1.0-begin.md` - Amplitude setup - begin26- `references/basic-integration-1.1-edit.md` - Amplitude setup - edit27- `references/basic-integration-1.2-revise.md` - Amplitude setup - revise28- `references/basic-integration-1.3-conclude.md` - Amplitude setup - conclusion2930The example project shows the target implementation pattern. Consult the documentation for API details.3132## Key principles3334- **Environment variables**: Always use environment variables for Amplitude keys. Never hardcode them.35- **Minimal changes**: Add Amplitude code alongside existing integrations. Don't replace or restructure existing code.36- **Match the example**: Your implementation should follow the example project's patterns as closely as possible.37- **Unified SDK**: For new browser/frontend projects, use `@amplitude/unified` as the default SDK — it bundles Analytics, Session Replay, Experiment, and Guides & Surveys in a single package. Initialize with `initAll()`. Only use `@amplitude/analytics-browser` if the project already has it installed.38- **Event naming**: Event names MUST use Title Case with spaces following the [Noun] + [Past-Tense Verb] pattern (e.g., "Button Clicked", "Sign Up Completed", "Cart Viewed"). Do NOT use snake_case, camelCase, or SCREAMING_SNAKE. Property names should use snake_case (e.g., button_text, page_url).39- **No PII in events**: Never send PII (emails, full names, phone numbers, physical addresses, IP addresses) in `track()` event properties. PII belongs in `identify()` user properties only.40- **Autocapture**: Enable autocapture in the init config to automatically capture sessions, page views, form interactions, and file downloads. Use the `autocapture` config option (not the deprecated `defaultTracking`).4142## Identifying users4344Identify users during login and signup events. Refer to the example code and documentation for the correct identify pattern for this framework. Call `amplitude.setUserId(userId)` to associate events with a known user, and use `amplitude.identify()` with an `Identify` object to set user properties. Call `amplitude.reset()` on logout to unlink future events from the current user. If both frontend and backend code exist, pass a consistent user/device ID via custom request headers to maintain event correlation.
amplitude