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 --save
of load it via CDN
<script src="https://github.com/dobromir-hristov/vue-vimeo-player/raw/next//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="https://github.com/dobromir-hristov/vue-vimeo-player/raw/next//unpkg.com/vue@3"></script>
<script src="https://github.com/dobromir-hristov/vue-vimeo-player/raw/next//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. ⚠️Warning: When using this parameter, the play bar and UI will be hidden. To start playback for your viewers, you'll need to either enable autoplay or use our player SDK to start and control playback. **(available to Plus, PRO, or Business members)** | No |
Useful properties to interact with
Events emitted from the component.
The ready event only passes the player instance
Every other event has these properties: (event, data, player)
// 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>