Vue wrapper for Vimeo Embed Player

Embed a Vimeo player as a Vue 3 component with ease, even with Nuxt.js SSR.

If you want the Vue 2 version, follow the instructions on the master branch.

Installation

Using npm:

npm install vue-vimeo-player@next --save

of load it via CDN

<script src="//unpkg.com/vue-vimeo-player@next"></script>

Getting Started

You can either import it in your whole project

import vueVimeoPlayer from 'vue-vimeo-player'
import Vue from 'vue'
import App from '@/App.vue'
 
const app = Vue.createApp(App)

app.use(vueVimeoPlayer)

or import it locally in a component

  import { vueVimeoPlayer } from 'vue-vimeo-player'
  
  export default {
  	data: {},
  	components: { vueVimeoPlayer }
  }

Usage without module bundler

Just include the script from the CDN and attach it to your app instance

<script src="//unpkg.com/vue@3"></script>
<script src="//unpkg.com/vue-vimeo-player@next"></script>
<!-- .... -->
<vimeo-player :video-id='videoId'></vimeo-player>
<script>
const app = Vue.createApp({...})
app.use(VueVimeoPlayer.default)
app.mount(...)
</script>	

Usage with Nuxt.js

Warning: Nuxt does not yet support Vue 3. Use the Master branch for now.

Props

Methods

• update(videoID): Recreates the Vimeo player with the provided ID
• play()
• pause()
• mute()
• unmute()

Properties

Useful properties to interact with

• player - The instance of the Vimeo player

Events

Events emitted from the component.

The ready event only passes the player instance

• ready

Every other event has these properties: (event, data, player)

• play
• playing
• pause
• ended
• timeupdate
• progress
• seeking
• seeked
• texttrackchange
• chapterchange
• cuechange
• cuepoint
• volumechange
• playbackratechange
• bufferstart
• bufferend
• error
• loaded
• durationchange
• fullscreenchange
• qualitychange
• camerachange
• resize

Example

 // app.js
 import vueVimeoPlayer from 'vue-vimeo-player'
 import Vue from 'vue'
 import App from '@/App'

 const app = Vue.createApp(App)
 app.use(vueVimeoPlayer)
 app.mount('#app')

<template>
	<vimeo-player ref="player" :video-id="videoID" :player-height="height" @ready="onReady"/>
</template>
<script>
export default {
	data() {
		return {
			videoID: 'some-id',
			height: 500,
			options: {
				muted: true,
                autoplay: true,
			},
			playerReady: false
		}
	},
	methods: {
		onReady() {
			this.playerReady = true
		},
		play () {
			this.$refs.player.play()
		},
		pause () {
			this.$refs.player.pause()
		}
	}
}
</script>