Vimeo Player · Nuxt Scripts

Vimeo is a video hosting platform that allows you to upload and share videos.

Nuxt Scripts provides a useScriptVimeoPlayer composable and a headless ScriptVimeoPlayer a component to interact with the Vimeo Player.

ScriptVimeoPlayer

The ScriptVimeoPlayer component is a wrapper around the useScriptVimeoPlayer composable. It provides a simple way to embed Vimeo videos in your Nuxt app.

It's optimized for performance by leveraging the Element Event Triggers, only loading the Vimeo Player when the specific elements events happen.

By default, it will load on the mousedown event.

Demo

Click to load

Clicking the video will load the Vimeo iframe and start the video.

Props

The ScriptVimeoPlayer component accepts the following props:

trigger: The trigger event to load the Vimeo Player. Default is mousedown. See Element Event Triggers for more information.
aboveTheFold: Optimizes the placeholder image for above-the-fold content. Default is false.
rootAttrs: Override the root attributes that are automatically set.
placeholderAttrs: The attributes for the placeholder image. Default is { loading: 'lazy' }.
id: Shorthand for vimeoOptions.id.
url: Shorthand for vimeoOptions.url.
vimeoOptions: All options from the Player SDK are supported, please consult the Embed Options for full documentation.

interface VimeoPlayerProps {
  id: number | undefined
  url?: string | undefined
  autopause?: boolean | undefined
  autoplay?: boolean | undefined
  background?: boolean | undefined
  byline?: boolean | undefined
  color?: string | undefined
  controls?: boolean | undefined
  dnt?: boolean | undefined
  height?: number | undefined
  interactive_params?: string | undefined
  keyboard?: boolean | undefined
  loop?: boolean | undefined
  maxheight?: number | undefined
  maxwidth?: number | undefined
  muted?: boolean | undefined
  pip?: boolean | undefined
  playsinline?: boolean | undefined
  portrait?: boolean | undefined
  responsive?: boolean | undefined
  speed?: boolean | undefined
  quality?: VimeoVideoQuality | undefined
  texttrack?: string | undefined
  title?: boolean | undefined
  transparent?: boolean | undefined
  width?: number | undefined
}

The Vimeo Video placeholder image is lazy-loaded by default. You should change this behavior if your video is above the fold or consider using the #placeholder slot to customize the placeholder image.

<ScriptVimeoPlayer above-the-fold />

Component API

See the Facade Component API for full props, events, and slots.

Events

The ScriptVimeoPlayer component emits all events from the Vimeo Player SDK. Please consult the Player Events for full documentation.

const emits = defineEmits<{
  play: [e: EventMap['play'], player: Player]
  playing: [e: EventMap['playing'], player: Player]
  pause: [e: EventMap['pause'], player: Player]
  ended: [e: EventMap['ended'], player: Player]
  timeupdate: [e: EventMap['timeupdate'], player: Player]
  progress: [e: EventMap['progress'], player: Player]
  seeking: [e: EventMap['seeking'], player: Player]
  seeked: [e: EventMap['seeked'], player: Player]
  texttrackchange: [e: EventMap['texttrackchange'], player: Player]
  chapterchange: [e: EventMap['chapterchange'], player: Player]
  cuechange: [e: EventMap['cuechange'], player: Player]
  cuepoint: [e: EventMap['cuepoint'], player: Player]
  volumechange: [e: EventMap['volumechange'], player: Player]
  playbackratechange: [e: EventMap['playbackratechange'], player: Player]
  bufferstart: [e: EventMap['bufferstart'], player: Player]
  bufferend: [e: EventMap['bufferend'], player: Player]
  error: [e: EventMap['error'], player: Player]
  loaded: [e: EventMap['loaded'], player: Player]
  durationchange: [e: EventMap['durationchange'], player: Player]
  fullscreenchange: [e: EventMap['fullscreenchange'], player: Player]
  qualitychange: [e: EventMap['qualitychange'], player: Player]
  camerachange: [e: EventMap['camerachange'], player: Player]
  resize: [e: EventMap['resize'], player: Player]
  enterpictureinpicture: [e: EventMap['enterpictureinpicture'], player: Player]
  leavepictureinpicture: [e: EventMap['leavepictureinpicture'], player: Player]
}>()

Slots

As the component is provided headless, there are a number of slots for you to customize the player however you like before it's loaded in.

default

The default slot is used to display content that will always be visible.

<template>
  <ScriptVimeoPlayer :id="331567154">
    <div class="bg-blue-500 text-white p-5">
      Video by NuxtJS
    </div>
  </ScriptVimeoPlayer>
</template>

awaitingLoad

The slot is used to display content while the video is loading.

<template>
  <ScriptVimeoPlayer :id="331567154">
    <template #awaitingLoad>
      <div class="bg-blue-500 text-white p-5">
        Click to play!
      </div>
    </template>
  </ScriptVimeoPlayer>
</template>

loading

The slot is used to display content while the video is loading.

<template>
  <ScriptVimeoPlayer :id="331567154">
    <template #loading>
      <div class="bg-blue-500 text-white p-5">
        Loading...
      </div>
    </template>
  </ScriptVimeoPlayer>
</template>

placeholder

The slot is used to display a placeholder image before the video is loaded. By default, this will show the vimeo thumbnail for the video. You can display it however you like.

<template>
  <ScriptVimeoPlayer :id="331567154">
    <template #placeholder="{ placeholder }">
      <img :src="placeholder" alt="Video Placeholder">
    </template>
  </ScriptVimeoPlayer>
</template>

useScriptVimeoPlayer

The useScriptVimeoPlayer composable lets you have fine-grain control over the Vimeo Player SDK. It provides a way to load the Vimeo Player SDK and interact with it programmatically.

export function useScriptVimeoPlayer<T extends VimeoPlayerApi>(_options?: VimeoPlayerInput) {}

Please follow the Registry Scripts guide to learn more about advanced usage.

VimeoPlayerApi

export interface VimeoPlayerApi {
  Vimeo: {
    Player: ScriptVimeoPlayer
  }
}

Example

Loading the Vimeo Player SDK and interacting with it programmatically.

<script setup lang="ts">
const video = ref()
const { onLoaded } = useScriptVimeoPlayer()

let player
onLoaded(({ Vimeo }) => {
  player = new Vimeo.Player(video.value, {
    id: 331567154
  })
})
</script>

<template>
  <div>
    <div ref="video" />
    <button @click="player.play()">
      Play
    </button>
  </div>
</template>

Google Maps

Show performance-optimized Google Maps in your Nuxt app.

YouTube Player

Show performance-optimized YouTube videos in your Nuxt app.