What is the best method for implementing a Twitch <script> tag within Vue.js?

Question

What is the best method for implementing a Twitch <script> tag within Vue.js?

In an effort to replicate the functionality I achieved in Angular here, I am now attempting to do so within Vue.JS (2.6+).

My goal is to utilize the Twitch API for embedding a Stream, which currently only offers usage through inline HTML:

<script src= "https://player.twitch.tv/js/embed/v1.js"></script>
<div id="<player div ID>"></div>
<script type="text/javascript">
  var options = {
    width: <width>,
    height: <height>,
    channel: "<channel ID>",
    video: "<video ID>",
    collection: "<collection ID>",
  };
  var player = new Twitch.Player("<player div ID>", options);
  player.setVolume(0.5);
</script>

Similar to Angular, the use of Script tags within Vue Components is not permitted.

Therefore, I am curious about the most effective approach in Vue for incorporating this Twitch Embed into my application. (I am open to incorporating it either within the JS or HTML of the component)

javascript vue.js twitch

Answer 1

Answer №1

To utilize the twitch library, you must import it like any other standard library. If the library is not available through npm, you can simply download it and import it locally. This particular library does not appear to be an ES6 module, so it will be assigned to the global window object for your use.

For example:

main.js

import './libraries/twitch.v1.js';

// set up your vue app boilerplate

component:

<template>
  <div ref="twitchVideo" />
</template>

<script>
export default {
  name: 'twitch-video',
  data () {
    return { player: null }
  },
  mounted () {
    const options = {
      width: 854,
      height: 480,
      channel: 'dallas',
    };
    // make sure to provide an ID string as the first argument..
    this.player = new Twitch.Player(this.$refs.twitchVideo, options);
    this.player.setVolume(0.5);
  }
};
</script>

Alternatively, you can directly add the <script> tag to your index.html file. However, I would recommend against this approach due to uncertainties regarding when the script gets loaded within a component, which contradicts the purpose of bundling libraries.

Answer 2

To utilize the twitch library, you must import it like any other standard library. If the library is not available through npm, you can simply download it and import it locally. This particular library does not appear to be an ES6 module, so it will be assigned to the global window object for your use.

For example:

main.js

import './libraries/twitch.v1.js';

// set up your vue app boilerplate

component:

<template>
  <div ref="twitchVideo" />
</template>

<script>
export default {
  name: 'twitch-video',
  data () {
    return { player: null }
  },
  mounted () {
    const options = {
      width: 854,
      height: 480,
      channel: 'dallas',
    };
    // make sure to provide an ID string as the first argument..
    this.player = new Twitch.Player(this.$refs.twitchVideo, options);
    this.player.setVolume(0.5);
  }
};
</script>

Alternatively, you can directly add the <script> tag to your index.html file. However, I would recommend against this approach due to uncertainties regarding when the script gets loaded within a component, which contradicts the purpose of bundling libraries.

What is the best method for implementing a Twitch <script> tag within Vue.js?

Answer №1

Similar questions

Tips for converting an object into parameters for ng-include

Tips for maintaining circular references when converting a JavaScript object to JSON string format

JavaScript regular expressions: filtering out results from the output

What is causing React Js to fail loading css when switching from anchor tag to link tag?

Utilizing iOS Local Storage for Efficient Form Submission Handling

Is there a way for me to determine the specific link that I have clicked on

Having trouble with shipit.js deployment: Error encountered - git checkout undefined

Displaying a hand cursor on a bar chart when hovered over in c3.js

Utilizing a router to control a GET request for accessing an image file

Utilizing the handleChange method to manage multiple input fields

Discover the secret to instantly displaying comments after submission without refreshing the page in VueJS

Creating a new Vue component instance when a prop is modified

Navigate to a local server running on localhost:3000 and access the external URL www.google.com

Merge the data from various sections of a JSON object into a unified array

Could you assist me in retrieving information from an API request?

How can I prevent SweetAlert from automatically focusing when it first opens?

The alert box for model validation summary errors is deactivated when hidden using .hide() method

Alter the Vue view using an object instead of the url router

Even though setState is supposed to update the state and trigger a render, it's not showing up in the view for some

Steps for displaying a customized view within an NPM module: