Scripts

Vimeo Player

Copy for LLMs

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.

Script Stats

Transfer
8.9 KB
Decoded
23.8 KB
Loading
CDN
First-Party
No
Bundling
No
Tracked Data
Video Engagement

Types

To use Video Player with full TypeScript support, you will need to install the @types/vimeo__player dependency.

pnpm add -D @types/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
}

Eager Loading Placeholder

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>
Edit this page
Markdown For LLMs

Umami Analytics

Use Umami Analytics in your Nuxt app.

X Embed

Server-side rendered X (Twitter) embeds with zero client-side API calls.