tserkov/vue-twitch-player

A Vue component for embedding a Twitch player.

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>

vue-twitch-player's Issues

Emit child method

Hi! How to emit child method, for example, 'play' after listen method pause?

Parent:

<twitch-player :channel="url" @pause="onPaused()"></twitch-player>

    //...
    methods: {
        onPaused() {
            this.$emit('play'); //on child
        },
    //...

A way to change video on the fly?

hey nice wrapper for vue

I tried changing the data but it doesn't change the video, is there a way to change the video?

Thanks

Adding comments

Hello, I would like to add the comments on the side of the video. I tested some settings without success. Apart from this detail everything works thank you very much !!

Failed to compile.

after installation vue-twitch-player, and complet "main.js" and "template" , I have error message : "Failed to compile.

./src/components/StreamPage.vue
Module Error (from ./node_modules/eslint-loader/index.js):

/var/www/html/o-game/O-game-frontend/app/src/components/StreamPage.vue
13:7 error The "VueTwitchPlayer" component has been registered but not used vue/no-unused-components

✖ 1 problem (1 error, 0 warnings)"
I use Vue.Js version 4.4.6

thank you

Multiple TwitchVideos Element

Hi there,

first of all thank you for the great work and providing this as OS.

I try to include multiple TwitchVideos on one page but only one starts to load. All other components are there but twitch doesn't seem to populate it with the iframe.

Any ideas?

Best regards!