Vue.js wrapper for Vimeo Embed Player

Vue.js wrapper for Vimeo player

The Vue-vimeo-player is a Vue.js wrapper for the Vimeo Embed Player, which allows you to use the Vimeo player as a Vue component with ease, even with Nuxt.js SSR.

Take a look at the example below.


To start working with the Vue vimeo player use the following command to install it.

npm install vue-vimeo-player --save


yarn add vue-vimeo-player

of load it via CDN

<script src="//"></script>

If used as a global component

import Vue from 'vue'
import vueVimeoPlayer from 'vue-vimeo-player'


If used as a local component

//In a component
import { vueVimeoPlayer } from 'vue-vimeo-player'

export default {
    data: {},
    components: { vueVimeoPlayer }

For usage with Nuxt.js please refer here.


  • player-width: String or Number, default 100%
  • player-height: String or Number, default 320
  • options: Object - options to pass to Vimeo.Player
  • video-id: String, required
  • loop: Boolean
  • autoplay: Boolean


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


Events emitted from the component.The ready event only passes the player instance

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

  • play
  • pause
  • ended
  • timeupdate
  • progress
  • seeked
  • texttrackchange
  • cuechange
  • cuepoint
  • volumechange
  • error
  • loaded
    <vimeo-player ref="player" :video-id="videoID" @ready="onReady" :player-height="height">
export default {
data() {
    return {
        videoID: '141851770',
        height: 600,
        options: {},
        playerReady: false,
methods: {
    onReady() {
        this.playerReady = true
    play () {
    stop () {

If you are interested for more or you have any bugs and suggestions, click here. That's it!

Created and submitted by @dmhristov.