integration-vue-3

Add Amplitude analytics to Vue 3 applications using the Unified Browser SDK.

28|Updated Dec 5, 2025
One-click install
npx skills add https://github.com/amplitude/wizard --skill integration-vue-3-amplitude
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: integration-vue-3
Source: https://github.com/amplitude/wizard/tree/main/skills/integration/integration-vue-3
Command: npx skills add https://github.com/amplitude/wizard --skill integration-vue-3-amplitude

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill helps you add Amplitude analytics to Vue 3 applications.

Core Features & Use Cases

  • Initialize Amplitude with initAll in your main.ts to enable the Unified Browser SDK.
  • Identify users during login using setUserId() and Identify objects.
  • Track events with amplitude.track() to capture user interactions.
  • Reset sessions on logout with amplitude.reset() to unlink future events.
  • Follow the Vue 3 example project and best practices for event naming and PII avoidance.
  • Unified SDK usage to enable analytics, session replay, experiments, and guides.

Quick Start

Install dependencies, set VITE_AMPLITUDE_API_KEY in your environment, and start the dev server to try the Vue 3 Amplitude integration.

Frequently Asked Questions about integration-vue-3

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add Amplitude analytics to a Vue 3 application?

To add Amplitude analytics to a Vue 3 application, initialize the Unified Browser SDK using initAll in your main.ts file with your API key. You can then use amplitude.track() to capture user interactions and Identify objects to set user properties.

How does user identification work when tracking events in Vue 3 with Amplitude?

User identification in Amplitude works by calling setUserId() during the login flow to associate events with specific users. You can use Identify objects to set additional user properties and amplitude.reset() on logout to unlink future events from that user.

Does the Amplitude Unified Browser SDK support session replay and experiments in Vue 3?

Yes, the Amplitude Unified Browser SDK supports session replay, experiments, and guides in Vue 3 applications. Initializing the SDK with initAll enables these analytics features alongside standard event tracking and user identification capabilities.

What environment variables do I need to set up Amplitude tracking in a Vite Vue 3 project?

You need to set the VITE_AMPLITUDE_API_KEY environment variable in your Vite Vue 3 project to initialize Amplitude tracking. This key authenticates your application with the Amplitude analytics platform when the dev server starts.

What are the best practices for naming Amplitude events to avoid PII in Vue 3?

Best practices for Amplitude event naming include using consistent, descriptive names for tracked events and strictly avoiding personally identifiable information (PII) in event properties. The Vue 3 integration example project provides guidelines for safe event naming conventions.

How do I reset a user session in Amplitude when a user logs out of my Vue 3 app?

To reset a user session in Amplitude when a user logs out of your Vue 3 app, call the amplitude.reset() method. This clears the current session and unlinks future tracked events from the previously identified user.