vue-twitch-player

A Vue component for embedding a Twitch player. See component for all available properties.

Vue-plugin-load-script is a dependency, since the Twitch Player API needs to be included from Twitch's servers.

Install

# npm
npm install --save-dev vue-twitch-player

# yarn
yarn add --dev vue-twitch-player

Use

  // In main.js
  import LoadScript from 'vue-plugin-load-script';
 
  Vue.use(LoadScript);

<template>
  <twitch-player
    :channel="channel"
  ></twitch-player>
</template>
 
<script>
  import VueTwitchPlayer from 'vue-twitch-player';
 
  export default {
    // ...
    components: {
      VueTwitchPlayer,
    },
    data() {
      return {
        channel: 'tserkov',
      };
    },
    // ...
  };
</script> 

<template>
  <twitch-player
    :video="video"
  ></twitch-player>
</template>
 
<script>
  import VueTwitchPlayer from 'vue-twitch-player';
 
  export default {
    // ...
    components: {
      VueTwitchPlayer,
    },
    data() {
      return {
        video: '117216248',
      };
    },
    // ...
  };
</script> 

<template>
  <twitch-player
    :collection="collection"
  ></twitch-player>
</template>
 
<script>
  import VueTwitchPlayer from 'vue-twitch-player';
 
  export default {
    // ...
    components: {
      VueTwitchPlayer,
    },
    data() {
      return {
        collection: 'TbyX29kRqhRnxA',
      };
    },
    // ...
  };
</script>