A custom Vue composables to measure Web Vital metrics anywhere in your app in less than 20 lines of code.

web-vital-composable.mjs

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}
}