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.
##
127.0.0.1 localhost
# Other IPs…
127.0.0.1 mycustomlocaldomain.com
# End of section
devServer: {
host: ‘mycustomlocaldomain.com’
},
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: ${route.name}`); watch(() => route.name, () => { console.debug(`MyCoolComponent — watch route.name changed to ${route.name}`); console.log(‘Route Name Changed: ‘+route.name) console.log(‘Route Params:’ ) console.dir(route.params) window.analytics.page(‘Visited ‘+route.name) }); return { route }; },}</script>
Navigation events being logged ;)
const handleButtonClick = ()=>{const analyticsProps = {pathName: router.currentRoute.value.name, path: router.currentRoute.value.path}console.log(“Clicked User Avatar” )console.dir(analyticsProps)window.analytics.track(‘Clicked User Avatar’, analyticsProps)}
User was clicked on the Alerts section
User was clicked on the Homepage

Setup Amplitude as a destination

Conclusions

--

--

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