@nuxt/scripts 0.6.5 → 0.7.0

package/dist/runtime/components/ScriptGoogleMaps.vue

@@ -1,10 +1,11 @@
 <script lang="ts" setup>
 /// <reference types="google.maps" />
-import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { computed, onBeforeUnmount, onMounted, ref, watch, toRaw } from 'vue'
 import type { HTMLAttributes, ImgHTMLAttributes, Ref, ReservedProps } from 'vue'
 import { withQuery } from 'ufo'
 import type { QueryObject } from 'ufo'
 import { defu } from 'defu'
+import { hash } from 'ohash'
 import type { ElementScriptTrigger } from '../types'
 import { scriptRuntimeConfig } from '../utils'
 import { useScriptTriggerElement } from '../composables/useScriptTriggerElement'
@@ -44,15 +45,19 @@ const props = withDefaults(defineProps<{
   /**
    * Defines the Google Maps API key. Must have access to the Static Maps API as well.
    */
-  apiKey: string
+  apiKey?: string
   /**
-   * Defines map marker location.
+   * A latitude / longitude of where to focus the map.
    */
-  query?: string
+  center?: google.maps.LatLng | google.maps.LatLngLiteral | `${string},${string}`
+  /**
+   * Should a marker be displayed on the map where the centre is.
+   */
+  centerMarker?: boolean
   /**
    * Options for the map.
    */
-  options?: google.maps.MapOptions
+  mapOptions?: google.maps.MapOptions
   /**
    * Defines the width of the map.
    */
@@ -75,30 +80,39 @@ const props = withDefaults(defineProps<{
    * Customize the root element attributes.
    */
   rootAttrs?: HTMLAttributes & ReservedProps & Record<string, unknown>
+  /**
+   * Extra Markers to add to the map.
+   */
+  markers?: (`${string},${string}` | google.maps.marker.AdvancedMarkerElementOptions)[]
 }>(), {
   // @ts-expect-error untyped
   trigger: ['mouseenter', 'mouseover', 'mousedown'],
-  width: 600,
+  width: 640,
   height: 400,
+  centerMarker: true,
 })
 
 const emits = defineEmits<{
   // our emit
-  ready: [e: Ref<google.maps.Map | undefined>]
+  ready: [e: typeof googleMaps]
   error: []
 }>()
 
 const apiKey = props.apiKey || scriptRuntimeConfig('googleMaps')?.apiKey
 
-if (!apiKey)
+const mapsApi = ref<typeof google.maps | undefined>()
+
+if (import.meta.dev && !apiKey)
   throw new Error('GoogleMaps requires an API key. Please provide `apiKey` on the <ScriptGoogleMaps> or globally via `runtimeConfig.public.scripts.googleMaps.apiKey`.')
-if (!props.query && !props.options?.center)
-  throw new Error('GoogleMaps requires either a query or center prop to be set.')
+
+// TODO allow a null center may need to be resolved via an API function
 
 const rootEl = ref<HTMLElement>()
 const mapEl = ref<HTMLElement>()
 
-const { $script } = useScriptGoogleMaps({
+const centerOverride = ref()
+
+const { load, status, onLoaded } = useScriptGoogleMaps({
   apiKey: props.apiKey,
   scriptOptions: {
     trigger: useScriptTriggerElement({ trigger: props.trigger, el: rootEl }),
@@ -106,16 +120,65 @@ const { $script } = useScriptGoogleMaps({
 })
 
 const options = computed(() => {
-  return defu(props.options, {
+  return defu({ center: centerOverride.value }, props.mapOptions, {
+    center: props.center,
     zoom: 15,
     mapId: 'map',
   })
 })
 const ready = ref(false)
 
-function queryToLocation(service: google.maps.places.PlacesService, query: string) {
-  return new Promise<google.maps.LatLng>((resolve, reject) => {
-    service.findPlaceFromQuery({
+const map: Ref<google.maps.Map | undefined> = ref()
+const mapMarkers: Ref<Map<string, google.maps.marker.AdvancedMarkerElement>> = ref(new Map())
+
+function isLocationQuery(s: string | any) {
+  return typeof s === 'string' && (s.split(',').length > 2 || s.includes('+'))
+}
+
+async function createAdvancedMapMarker(_options: google.maps.marker.AdvancedMarkerElementOptions | `${string},${string}`) {
+  const lib = await importLibrary('marker')
+  const options = typeof _options === 'string'
+    ? {
+        position: {
+          lat: Number.parseFloat(_options.split(',')[0]),
+          lng: Number.parseFloat(_options.split(',')[1]),
+        },
+      }
+    : _options
+  const mapMarkerOptions = defu(toRaw(options), {
+    map: toRaw(map.value!),
+    // @ts-expect-error unified API for maps and markers
+    position: options.location,
+  })
+  const marker = new lib.AdvancedMarkerElement(mapMarkerOptions)
+  // create new marker
+  mapMarkers.value.set(hash(_options), marker)
+  return marker
+}
+
+const queryToLatLngCache = new Map<string, google.maps.LatLng>()
+
+async function resolveQueryToLatLang(query: string) {
+  if (query && typeof query === 'object')
+    return Promise.resolve(query)
+  if (queryToLatLngCache.has(query)) {
+    return Promise.resolve(queryToLatLngCache.get(query))
+  }
+  // only if the query is a string we need to do a lookup
+  // eslint-disable-next-line no-async-promise-executor
+  return new Promise<google.maps.LatLng>(async (resolve, reject) => {
+    if (!mapsApi.value) {
+      await load()
+      // await new promise, watch until mapsApi is set
+      await new Promise<void>((resolve) => {
+        const _ = watch(mapsApi, () => {
+          _()
+          resolve()
+        })
+      })
+    }
+    const placesService = new mapsApi.value!.places.PlacesService(map.value!)
+    placesService.findPlaceFromQuery({
       query,
       fields: ['name', 'geometry'],
     }, (results, status) => {
@@ -123,58 +186,134 @@ function queryToLocation(service: google.maps.places.PlacesService, query: strin
         return resolve(results[0].geometry.location)
       return reject(new Error(`No location found for ${query}`))
     })
+  }).then((res) => {
+    queryToLatLngCache.set(query, res)
+    return res
   })
 }
 
-const map: Ref<google.maps.Map | undefined> = ref()
-const markers: Ref<google.maps.marker.AdvancedMarkerElement[]> = ref([])
-defineExpose({
+const libraries = new Map<string, any>()
+
+function importLibrary(key: 'marker'): Promise<google.maps.MarkerLibrary>
+function importLibrary(key: 'places'): Promise<google.maps.PlacesLibrary>
+function importLibrary(key: 'geometry'): Promise<google.maps.GeometryLibrary>
+function importLibrary(key: 'drawing'): Promise<google.maps.DrawingLibrary>
+function importLibrary(key: 'visualization'): Promise<google.maps.VisualizationLibrary>
+function importLibrary(key: string): Promise<any>
+function importLibrary<T>(key: string): Promise<T> {
+  if (libraries.has(key))
+    return libraries.get(key)
+  const p = mapsApi.value?.importLibrary(key) || new Promise((resolve) => {
+    const stop = watch(mapsApi, (api) => {
+      if (api) {
+        const p = api.importLibrary(key)
+        resolve(p)
+        stop()
+      }
+    }, { immediate: true })
+  })
+  libraries.set(key, p)
+  return p as any as Promise<T>
+}
+
+const googleMaps = {
+  googleMaps: mapsApi,
   map,
-  markers,
-})
+  createAdvancedMapMarker,
+  resolveQueryToLatLang,
+  importLibrary,
+} as const
+
+defineExpose(googleMaps)
 
 onMounted(() => {
   watch(ready, (v) => {
-    v && emits('ready', map)
+    if (v) {
+      emits('ready', googleMaps)
+    }
   })
-  watch($script.status, () => {
-    if ($script.status.value === 'error') {
+  watch(status, (v) => {
+    if (v === 'error') {
       emits('error')
     }
   })
-  // create the map
-  $script.then(async (instance) => {
-    const maps = await instance.maps as any as typeof google.maps // some weird type issue here
-    const _map = new maps.Map(mapEl.value!, options.value)
-    const placesService = new maps.places.PlacesService(_map)
-
-    watch(options, () => _map.setOptions(options.value))
-    watch(() => props.query, async (query) => {
-      // always clear old markers
-      markers.value.forEach(marker => marker.remove())
-      markers.value = []
-      if (query) {
-        const marker = await maps.importLibrary('marker') as google.maps.MarkerLibrary
-        const location = await queryToLocation(placesService, query).catch((err) => {
-          console.warn(err)
-          return {
-            lat: 0,
-            lng: 0,
-          }
-        })
-        _map.setCenter(location)
-        markers.value.push(new marker.AdvancedMarkerElement({
-          map: _map,
-          position: location,
-        }))
-        ready.value = true
+  watch(options, () => {
+    map.value?.setOptions(options.value)
+  })
+  watch([() => props.markers, map], () => {
+    if (!map.value) {
+      return
+    }
+    // mapMarkers is a map where we hash the next array entry as the map key
+    // we need to do a diff to see what we remove or add
+    const nextMap = new Map((props.markers || []).map(m => [hash(m), m]))
+    // compare idsToMatch in nextMap, if we're missing an id, we need to remove it
+    const toRemove = new Set([
+      ...mapMarkers.value.keys(),
+    ].filter(k => !nextMap.has(k)))
+    // compare to existing
+    const toAdd = new Set([...nextMap.keys()].filter(k => !mapMarkers.value.has(k)))
+    // do a diff of next and prev
+    const centerHash = hash({ position: options.value.center })
+    toRemove.forEach((key) => {
+      if (key === centerHash) {
+        return
       }
-    }, {
-      immediate: !!props.query,
+      // @ts-expect-error broken type
+      mapMarkers.value.get(key)?.setMap(null)
+      mapMarkers.value.delete(key)
     })
-    if (!props.query)
-      ready.value = true
-    map.value = _map
+    for (const k of toAdd) {
+      // @ts-expect-error broken
+      createAdvancedMapMarker(nextMap.get(k))
+    }
+  }, {
+    immediate: true,
+    deep: true,
+  })
+  watch([() => props.center, ready], async (next, prev) => {
+    if (!map.value) {
+      return
+    }
+    let center = toRaw(next[0])
+    if (center) {
+      if (isLocationQuery(center) && ready.value) {
+        // need to resolve center from query
+        // @ts-expect-error broken
+        center = await resolveQueryToLatLang(center as string)
+      }
+      map.value!.setCenter(center as google.maps.LatLng)
+      if (props.centerMarker) {
+        if (prev[0]) {
+          const prevCenterHash = hash({ position: prev[0] })
+          // @ts-expect-error broken upstream type
+          mapMarkers.value.get(prevCenterHash)?.setMap(null)
+          mapMarkers.value.delete(prevCenterHash)
+        }
+        // @ts-expect-error untyped
+        createAdvancedMapMarker({ position: center })
+      }
+    }
+  }, {
+    immediate: true,
+    deep: true,
+  })
+  onLoaded(async (instance) => {
+    mapsApi.value = await instance.maps as any as typeof google.maps // some weird type issue here
+    // may need to transform the center before we can init the map
+    const center = options.value.center as string
+    const _options: google.maps.MapOptions = {
+      ...options.value,
+      // @ts-expect-error broken
+      center: !center || isLocationQuery(center) ? undefined : center,
+    }
+    map.value = new mapsApi.value!.Map(mapEl.value!, _options)
+    if (center && isLocationQuery(center)) {
+      // need to resolve center
+      centerOverride.value = await resolveQueryToLatLang(center)
+      map.value?.setCenter(centerOverride.value)
+    }
+    ready.value = true
   })
 })
 
@@ -190,15 +329,34 @@ if (import.meta.server) {
 }
 
 const placeholder = computed(() => {
+  let center = options.value.center
+  if (center && typeof center === 'object') {
+    center = `${center.lat},${center.lng}`
+  }
+  // @ts-expect-error lazy type
   const placeholderOptions: PlaceholderOptions = defu(props.placeholderOptions, {
     // only map option values
     zoom: options.value.zoom,
-    center: options.value.center?.toString() || '',
+    center,
   }, {
     size: `${props.width}x${props.height}`,
     key: apiKey,
     scale: 2, // we assume a high DPI to avoid hydration issues
-    markers: `color:red|${props.query}`,
+    markers: [
+      ...(props.markers || []),
+      center,
+    ]
+      .filter(Boolean)
+      .map((m) => {
+        if (typeof m === 'object' && m.location) {
+          m = m.location
+        }
+        if (typeof m === 'object' && m.lat) {
+          return `${m.lat},${m.lng}`
+        }
+        return m
+      })
+      .join('|'),
   })
   return withQuery('https://maps.googleapis.com/maps/api/staticmap', placeholderOptions as QueryObject)
 })
@@ -206,7 +364,7 @@ const placeholder = computed(() => {
 const placeholderAttrs = computed(() => {
   return defu(props.placeholderAttrs, {
     src: placeholder.value,
-    alt: props.query || '',
+    alt: 'Google Maps Static Map',
     loading: props.aboveTheFold ? 'eager' : 'lazy',
     style: {
       cursor: 'pointer',
@@ -219,10 +377,10 @@ const placeholderAttrs = computed(() => {
 
 const rootAttrs = computed(() => {
   return defu(props.rootAttrs, {
-    'aria-busy': $script.status.value === 'loading',
-    'aria-label': $script.status.value === 'awaitingLoad'
+    'aria-busy': status.value === 'loading',
+    'aria-label': status.value === 'awaitingLoad'
       ? 'Google Maps Static Map'
-      : $script.status.value === 'loading'
+      : status.value === 'loading'
         ? 'Google Maps Map Embed Loading'
         : 'Google Maps Embed',
     'aria-live': 'polite',
@@ -241,8 +399,8 @@ const rootAttrs = computed(() => {
 const ScriptLoadingIndicator = resolveComponent('ScriptLoadingIndicator')
 
 onBeforeUnmount(() => {
-  markers.value.forEach(marker => marker.remove())
-  markers.value = []
+  mapMarkers.value.forEach(marker => marker.remove())
+  mapMarkers.value.clear()
   map.value?.unbindAll()
   map.value = undefined
   mapEl.value?.firstChild?.remove()
@@ -251,15 +409,15 @@ onBeforeUnmount(() => {
 
 <template>
   <div ref="rootEl" v-bind="rootAttrs">
-    <div v-show="ready" ref="mapEl" class="script-google-maps__map" :style="{ width: '100%', height: '100%', maxWidth: '100%' }" />
+    <div v-show="ready" ref="mapEl" :style="{ width: '100%', height: '100%', maxWidth: '100%' }" />
     <slot v-if="!ready" :placeholder="placeholder" name="placeholder">
       <img v-bind="placeholderAttrs">
     </slot>
-    <slot v-if="$script.status.value === 'loading'" name="loading">
+    <slot v-if="status !== 'awaitingLoad' && !ready" name="loading">
       <ScriptLoadingIndicator color="black" />
     </slot>
-    <slot v-if="$script.status.value === 'awaitingLoad'" name="awaitingLoad" />
-    <slot v-else-if="$script.status.value === 'error'" name="error" />
+    <slot v-if="status === 'awaitingLoad'" name="awaitingLoad" />
+    <slot v-else-if="status === 'error'" name="error" />
     <slot />
   </div>
 </template>

package/dist/runtime/components/ScriptIntercom.vue

@@ -46,9 +46,12 @@ const intercom = useScriptIntercom({
     trigger,
   },
 })
-if (props.trigger === 'click')
-  intercom.Intercom('show')
-const { $script } = intercom
+const { status, onLoaded } = intercom
+if (props.trigger === 'click') {
+  onLoaded((instance) => {
+    instance.Intercom('show')
+  })
+}
 
 defineExpose({
   intercom,
@@ -56,7 +59,7 @@ defineExpose({
 
 let observer: MutationObserver
 onMounted(() => {
-  watch($script.status, (status) => {
+  watch(status, (status) => {
     if (status === 'loading') {
       observer = new MutationObserver(() => {
         if (document.getElementById('intercom-frame')) {
@@ -86,8 +89,8 @@ onBeforeUnmount(() => {
     }"
   >
     <slot :ready="isReady" />
-    <slot v-if="$script.status.value === 'awaitingLoad'" name="awaitingLoad" />
-    <slot v-else-if="$script.status.value === 'loading' || !isReady" name="loading" />
-    <slot v-else-if="$script.status.value === 'error'" name="error" />
+    <slot v-if="status === 'awaitingLoad'" name="awaitingLoad" />
+    <slot v-else-if="status === 'loading' || !isReady" name="loading" />
+    <slot v-else-if="status === 'error'" name="error" />
   </div>
 </template>

package/dist/runtime/components/ScriptLemonSqueezy.vue

@@ -26,7 +26,7 @@ onMounted(() => {
   rootEl.value?.querySelectorAll('a[href]').forEach((a) => {
     a.classList.add('lemonsqueezy-button')
   })
-  instance.$script.then(({ Setup, Refresh }) => {
+  instance.onLoaded(({ Setup, Refresh }) => {
     Setup({
       eventHandler(event) {
         emits('lemonSqueezyEvent', event)

package/dist/runtime/components/ScriptStripePricingTable.vue

@@ -26,11 +26,11 @@ const containerEl = ref<HTMLDivElement | undefined>()
 const instance = useScript(`https://js.stripe.com/v3/pricing-table.js`, {
   trigger: useScriptTriggerElement({ trigger: props.trigger, el: rootEl }),
 })
-const { $script } = instance
+const { onLoaded, status } = instance
 
 const pricingTable = ref<HTMLElement | undefined>()
 onMounted(() => {
-  $script.then(() => {
+  onLoaded(() => {
     const StripePricingTable = window.customElements.get('stripe-pricing-table')!
     const stripePricingTable = new StripePricingTable()
     stripePricingTable.setAttribute('publishable-key', props.publishableKey)
@@ -45,7 +45,7 @@ onMounted(() => {
     rootEl.value!.appendChild(stripePricingTable)
     emit('ready', instance)
   })
-  watch($script.status, (status) => {
+  watch(status, (status) => {
     if (status === 'error') {
       emit('error')
     }
@@ -60,9 +60,9 @@ onBeforeUnmount(() => {
 <template>
   <div ref="rootEl">
     <div ref="containerEl" />
-    <slot v-if="$script.status.value === 'loading'" name="loading" />
-    <slot v-if="$script.status.value === 'awaitingLoad'" name="awaitingLoad" />
-    <slot v-else-if="$script.status.value === 'error'" name="error" />
+    <slot v-if="status === 'loading'" name="loading" />
+    <slot v-if="status === 'awaitingLoad'" name="awaitingLoad" />
+    <slot v-else-if="status === 'error'" name="error" />
     <slot />
   </div>
 </template>

package/dist/runtime/components/ScriptVimeoPlayer.vue

@@ -8,12 +8,7 @@ import { useScriptTriggerElement } from '../composables/useScriptTriggerElement'
 import { useScriptVimeoPlayer } from '../registry/vimeo-player'
 import { useAsyncData, useHead } from '#imports'
 
-const props = withDefaults(defineProps<{
-  // custom
-  trigger?: ElementScriptTrigger
-  placeholderAttrs?: ImgHTMLAttributes
-  rootAttrs?: HTMLAttributes
-  aboveTheFold?: boolean
+interface VimeoOptions {
   // copied from @types/vimeo__player
   id?: number | undefined
   url?: string | undefined
@@ -25,7 +20,7 @@ const props = withDefaults(defineProps<{
   controls?: boolean | undefined
   dnt?: boolean | undefined
   height?: number | undefined
-  // eslint-disable-next-line vue/prop-name-casing
+
   interactive_params?: string | undefined
   keyboard?: boolean | undefined
   loop?: boolean | undefined
@@ -42,12 +37,19 @@ const props = withDefaults(defineProps<{
   title?: boolean | undefined
   transparent?: boolean | undefined
   width?: number | undefined
+}
+
+const props = withDefaults(defineProps<{
+  // custom
+  trigger?: ElementScriptTrigger
+  placeholderAttrs?: ImgHTMLAttributes
+  rootAttrs?: HTMLAttributes
+  aboveTheFold?: boolean
+  vimeoOptions?: VimeoOptions
+  id?: number | undefined
+  url?: string | undefined
 }>(), {
   trigger: 'mousedown',
-  width: 640,
-  height: 480,
-  loop: false,
-  controls: true,
 })
 
 const emits = defineEmits<TEmits>()
@@ -122,7 +124,7 @@ if (props.trigger === 'mousedown') {
   })
 }
 const ready = ref(false)
-const { $script } = useScriptVimeoPlayer({
+const { onLoaded, status } = useScriptVimeoPlayer({
   scriptOptions: {
     trigger,
   },
@@ -140,12 +142,16 @@ if (import.meta.server) {
   })
 }
 
+const id = computed(() => {
+  return props.vimeoOptions?.id || props.id
+})
+
 const { data: payload } = useAsyncData(
-  `vimeo-embed:${props.id}`,
+  `vimeo-embed:${id.value}`,
   // TODO ideally we cache this
-  () => $fetch(`https://vimeo.com/api/v2/video/${props.id}.json`).then(res => (res as any)[0]),
+  () => $fetch(`https://vimeo.com/api/v2/video/${id.value}.json`).then(res => (res as any)[0]),
   {
-    watch: [() => props.id],
+    watch: [id],
   },
 )
 
@@ -169,10 +175,26 @@ defineExpose({
   setPlaybackRate: (rate: number) => player?.setPlaybackRate(rate),
 })
 
+const width = computed(() => {
+  return props.vimeoOptions?.width || elVimeo.value?.parentNode?.offsetWidth || 640
+})
+
+const height = computed(() => {
+  return props.vimeoOptions?.height || elVimeo.value?.parentNode?.offsetHeight || 480
+})
+
 onMounted(() => {
-  $script.then(async ({ Vimeo }) => {
-    // filter props for false values
-    player = new Vimeo.Player(elVimeo.value, props)
+  onLoaded(async ({ Vimeo }) => {
+    const vimeoOptions = props.vimeoOptions || {}
+    if (!vimeoOptions.id && props.id) {
+      vimeoOptions.id = props.id
+    }
+    if (!vimeoOptions.url && props.url) {
+      vimeoOptions.url = props.url
+    }
+    vimeoOptions.width = width.value
+    vimeoOptions.height = height.value
+    player = new Vimeo.Player(elVimeo.value, vimeoOptions)
     if (clickTriggered) {
       player!.play()
       clickTriggered = false
@@ -186,33 +208,35 @@ onMounted(() => {
       })
     }
   })
+})
 
-  watch(() => props.id, (v) => {
-    v && player?.loadVideo(Number(v))
-  })
-  watch($script.status, (status) => {
-    if (status === 'error') {
-      // @ts-expect-error untyped
-      emits('error')
-    }
-  })
+watch(() => props.id, (v) => {
+  if (v) {
+    player?.loadVideo(Number(v))
+  }
+})
+watch(status, (status) => {
+  if (status === 'error') {
+    // @ts-expect-error untyped
+    emits('error')
+  }
 })
 
 const rootAttrs = computed(() => {
   return defu(props.rootAttrs, {
-    'aria-busy': $script.status.value === 'loading',
-    'aria-label': $script.status.value === 'awaitingLoad'
+    'aria-busy': status.value === 'loading',
+    'aria-label': status.value === 'awaitingLoad'
       ? 'Vimeo Player - Placeholder'
-      : $script.status.value === 'loading'
+      : status.value === 'loading'
         ? 'Vimeo Player - Loading'
         : 'Vimeo Player - Loaded',
     'aria-live': 'polite',
     'role': 'application',
     'style': {
       maxWidth: '100%',
-      width: `${props.width}px`,
-      height: `'auto'`,
-      aspectRatio: `${props.width}/${props.height}`,
+      width: `${width.value}px`,
+      height: 'auto',
+      aspectRatio: `16/9`,
       position: 'relative',
       backgroundColor: 'black',
     },
@@ -240,19 +264,19 @@ onBeforeUnmount(() => player?.unload())
 
 <template>
   <div ref="rootEl" v-bind="rootAttrs">
-    <div v-show="ready" ref="elVimeo" class="vimeo-player" style="width: 100%; height: 100%; max-width: 100%;" />
+    <div v-show="ready" ref="elVimeo" class="vimeo-player" />
     <slot v-if="!ready" v-bind="payload" :placeholder="placeholder" name="placeholder">
       <img v-if="placeholder" v-bind="placeholderAttrs">
     </slot>
-    <slot v-if="$script.status.value === 'loading'" name="loading">
+    <slot v-if="status === 'loading'" name="loading">
       <ScriptLoadingIndicator color="white" />
     </slot>
-    <slot v-if="$script.status.value === 'awaitingLoad'" name="awaitingLoad" />
-    <slot v-else-if="$script.status.value === 'error'" name="error" />
+    <slot v-if="status === 'awaitingLoad'" name="awaitingLoad" />
+    <slot v-else-if="status === 'error'" name="error" />
     <slot />
   </div>
 </template>
 
 <style>
-.vimeo-player iframe{max-width:100%!important}
+.vimeo-player iframe{aspect-ratio:16/9;height:auto;max-width:100%!important;width:100%}
 </style>