Skip to content

Instantly share code, notes, and snippets.

@ms-fadaei
Created April 6, 2022 09:13
Show Gist options
  • Save ms-fadaei/92b740d0fae0f11abead6d0a3ff475b1 to your computer and use it in GitHub Desktop.
Save ms-fadaei/92b740d0fae0f11abead6d0a3ff475b1 to your computer and use it in GitHub Desktop.
A custom Vue composables to measure Web Vital metrics anywhere in your app in less than 20 lines of code.
import { ref } from 'vue'
import { getFCP, getLCP, getFID, getCLS } from "web-vitals"
export default function useWebVital() {
const fcp = ref(null)
const lcp = ref(null)
const fid = ref(null)
const cls = ref(null)
getFCP(({delta}) => fcp.value = delta)
getLCP(({delta}) => lcp.value = delta)
getFID(({delta}) => fid.value = delta)
getCLS(({delta}) => cls.value = delta)
return { fcp, lcp, fid, cls}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment