Setup Segment and Amplitude in Vue 3 (or React, Angular…)

Segment setup

# Host Database
# localhost is used to configure the loopback interface
# when the system is booting. Do not change this entry.
## localhost
# Other IPs…
# End of section
devServer: {
host: ‘’
yarn serve
Navigating to the / of the app fires the event
Reloading the app while on te /query-and-explorer path
<script>  import AppHeader from ‘@/components/layout/AppHeader.vue’  import AppNavigation from ‘@/components/layout/AppNavigation.vue’  import { useRoute } from ‘vue-router’;  import { watch } from ‘vue’;  export default {     name: ‘App’,     components: {     AppHeader,     AppNavigation
setup() { const route = useRoute(); console.debug(`current route name on component setup init: ${}`); watch(() =>, () => { console.debug(`MyCoolComponent — watch changed to ${}`); console.log(‘Route Name Changed: ‘ console.log(‘Route Params:’ ) console.dir(route.params)‘Visited ‘ }); return { route }; },}</script>
Navigation events being logged ;)
const handleButtonClick = ()=>{const analyticsProps = {pathName:, path: router.currentRoute.value.path}console.log(“Clicked User Avatar” )console.dir(analyticsProps)‘Clicked User Avatar’, analyticsProps)}
User was clicked on the Alerts section
User was clicked on the Homepage

Setup Amplitude as a destination




Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store