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.
Using npm:
npm install vue-vimeo-player@next --saveof load it via CDN
<script src="//unpkg.com/vue-vimeo-player@next"></script>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 } }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>Warning: Nuxt does not yet support Vue 3. Use the Master branch for now.
| Prop | Type | Default | Description | Required |
|---|---|---|---|---|
| autoplay | Boolean | false | The video automatically begins to playback as soon as it can do. | No |
| player-width | String or Number | 640 | The width of the video's display area | No |
| player-height | String or Number | 320 | The height of the video's display area | No |
| options | Object | {} | Options to pass to Vimeo.Player. See the Vimeo docs | No |
| video-id | String | Vimeo player unique identifier | Yes | |
| video-url | String | undefined | Vimeo url to play video (if using private links) | No |
| loop | Boolean | false | Upon reaching the end of the video, automatically seek back to the start. | No |
| controls | Boolean | true | This parameter if `false` will hide all elements in the player (play bar, sharing buttons, etc) for a chromeless experience. | No |
- update(videoID): Recreates the Vimeo player with the provided ID
- play()
- pause()
- mute()
- unmute()
Useful properties to interact with
- player - The instance of the Vimeo player
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
// 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>