# Vue.js

## Minimal component sample


```js
'use strict'

Vue.component('flowplayer', {
  props: ['token', 'src', 'poster', 'ratio', 'autoplay'],
  template: '<div>',

  mounted: function () {
    this.player = flowplayer(this.$el, this.$props)
  },

  destroyed: function() {
    this.player.destroy()
  }

})
```

## Init


```js
var app = new Vue({ el: "#player" })
```

## Embed


```html
<link rel="stylesheet" href="//cdn.flowplayer.com/releases/native/3/stable/style/flowplayer.css"></div>
<div id="demo"><div id="player">
  <flowplayer token="[your token]" ratio="960:400" src="//edge.flowplayer.org/bauhaus.mp4" poster="https://flowplayer.com/media/img/demos/minimalist.jpg"></flowplayer>
  </div>
  </div>
```