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.

Vimeo Player

View source

Nuxt Config Setup

The simplest way to load Vimeo Player globally in your Nuxt App is to use Nuxt config. Alternatively you can directly use the useScriptVimeoPlayer composable. 

export default defineNuxtConfig({
  scripts: {
    registry: {
      vimeoPlayer: true
    }
  }
})

useScriptVimeoPlayer()

The useScriptVimeoPlayer composable lets you have fine-grain control over when and how Vimeo Player is loaded on your site. 

const { proxy } = useScriptVimeoPlayer()

const { Vimeo } = await proxy

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

First-Party Mode

This script supports First-Party Mode which is auto-enabled, routing all traffic through your domain for improved privacy and ad blocker bypass. 

export default defineNuxtConfig({
  scripts: {
    registry: {
      vimeoPlayer: true
    }
  }
})

Example

Using Vimeo Player only in production while using the proxy to send events. 

<script setup lang="ts">
const { proxy } = useScriptVimeoPlayer()

// noop in development, ssr
// just works in production, client
function handleAction() {
  const { Vimeo } = await proxy
}
</script>

<template>
  <div>
    <button @click="handleAction">
      Send Event
    </button>
  </div>
</template>

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 using 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.

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 Nuxt provides the component headless, you can use slots to customize the player however you like before it loads.

default

The default slot displays 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

This slot displays 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

This slot displays 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

This slot displays a placeholder image before the video loads. 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.

type Constructor<T extends new (...args: any) => any> = T extends new (...args: infer A) => infer R ? new (...args: A) => R : never

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

Vercel Analytics

Use Vercel Analytics in your Nuxt app.

X Embed

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