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

Add this to your nuxt.config.ts to load Vimeo Player globally. Alternatively you can use the useScriptVimeoPlayer composable for more control. 

export default defineNuxtConfig({
  scripts: {
    registry: {
      vimeoPlayer: {
        trigger: 'onNuxtReady',
      }
    }
  }
})

This config automatically enables first-party mode (bundle + proxy). See below to customise.

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: Privacy Focused Proxy

No extra config needed. The script is bundled from your domain (faster loads, no extra DNS lookup) and runtime requests are reverse-proxied through your server with automatic anonymisation (user IPs stay hidden from Vimeo Player, works with ad blockers). Learn more.

Mode
Bundle Proxy
Privacy
User IP addresses are anonymised. Other request data passes through.
export default defineNuxtConfig({
  scripts: {
    // ✅ First-party mode: bundled + proxied
    registry: {
      vimeoPlayer: {
        trigger: 'onNuxtReady',
      },
    },
  },
})

Example

Using Vimeo Player in a component with 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 @vimeo/player dependency which includes its own types.

pnpm add -D @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.