Numbers:
const formatter = Intl.NumberFormat(LOCALE, { notation: 'compact' })

Currency:

Intl.NumberFormat(LOCALE, {
  notation: 'compact',
  style: 'currency',
  currency: 'ZWD'
})

Indeed:

<template>
  <div
    @mouseover="hover = true"
    @mouseleave="hover = false"
  />
</template>

And now we now when the mouse is hovering.
A warning though: it is not compatible with touch screens !

Using JS to generate a default avatar with one letter:

function genAvatar(name) {
  try {
    // Match General_Category=Letter
    const match = name.match(/\p{L}/u);
    return (match && match[0]) || null;
  } catch {
    return name[0] || null;
  }
}

const productIds = [123, 456, undefined, 789]
const products = productIds
  .map(getProduct)
  .filter((item): item is Product => item !== undefined)

import { v4 as uuidv4 } from 'uuid'

export const useId = () => {
  const prefix = uuidv4()

  const $id = (name: string) => `${prefix}-${name}`

  return { $id }
}

It can work with the crypto module too.

const { length, 0: first, [length - 1]: last } = arr;

.full-width {
  width: 100vw;
  margin-left: 50%;
  transform: translate3d(-50%, 0, 0);
}

Or a responsive approach with CSS grid:

.wrapper {
  display: grid;
  grid-template-columns:
    [full-start] 1fr [wrapper-start]
    minmax(0, 70rem) [wrapper-end] 1fr [full-end];

  /* Optional gap */
  column-gap: var(--pad, 1rem);
}

Then

.wrapper > * {
  grid-column: wrapper;
}

.wrapper > .full-width {
  grid-column: full;
}

const currentSection = ref()
onMounted(() => {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
        if(entry.intersectionRatio > 0) {
          currentSection.value = entry.target.getAttribute('id')
        }
      })
     document.querySelectorAll('article h2').forEach((section) => {
        observer.observe(section)
     })
})

then add a class to the active currentSection.