Vue.js Element Timing API directive as plugin

elementTiming.js

export default {
  install: (app, options) => {
    let observer
    const obj = {
      created(el, binding) {
        if (options?.observe) {
          el.setAttribute('elementtiming', binding.arg)
          observer = new PerformanceObserver(list => {
            for (const entry of list.getEntries()) {
              const { identifier, loadTime } = entry
              // Brainstorming 🚨
              // Navigator.sendBeacon() why not
              if (identifier === binding.arg) {
                if (options?.outline) {
                  if (loadTime <= 4000) el.style.outline = '5px solid red';
                  if (loadTime > 2500 && loadTime < 4000) el.style.outline = '5px solid orange'
                  // if (loadTime <= 2500) Under control, open 🍺
                }
              }
            }
           })
           observer.observe({ entryTypes: ['element'] })
        }
      },
      beforeUnmount() {
        options?.observe && observer.observeobserver?.disconnect()
      }
    }
    app.directive('timing', obj)
  }
}

Vue.js Element Timing API directive

The Element Timing API provides features for monitoring the loading performance of large image elements and text nodes as they appear on screen.

Usage

import { createApp } from 'vue'
import elementTiming from './elementTiming.js'

createApp(/**/).use(elementTiming).mount('#app')

<img v-timing:element />