Can't get it to work in VueJS 2

[Neeptossss]

Hi there 👋 I'm trying to get the plugin working on my VueJS 2 website, but the chromcastButton appears with the class vjs-hidden and don't work either way. I tried different ways such as passing plugin in videosjs option, calling it directly in videosjs call like this :

this.player = videojs( this.$refs.videoPlayer, options, function () { var player = this; player.chromcast(); }, );

But nothing seems to work. The videojs-chromcast SCSS / CSS works fine (i can see the button if i disable the vjs-hidden class), i can also see in the console that the plugin is loaded but it's not working.

Here is my component i will really appreciate it, if someone see something i'm doing wrong. PS : i also tried with preload web component on true. And i have the exact same issue with the airplay plugin

<template>
  <video ref="videoPlayer" class="video-js vjs-16-9"></video>
</template>

<script>
import videojs from "video.js";
require("@silvermine/videojs-quality-selector")(videojs);
require("@silvermine/videojs-chromecast")(videojs);
require("@silvermine/videojs-airplay")(videojs);
export default {
  name: "Player",
  data() {
    return {
      data: {},
      player: null,
    };
  },
  props: {
    film: {
      type: Object,
      required: true,
    },
  },
  mounted() {
    let options = {
      techOrder: ['chromecast', "html5"],
      autoplay: true,
      language: "fr",
      responsive: true,
      fluid: true,
      controls: true,
      controlBar: {
        remainingTimeDisplay: {
          displayNegative: false,
        },
      },
      sources: [
        {
          src: null,
          type: "video/mp4",
          label: "FHD",
        },
        {
          src: null,
          type: "video/mp4",
          label: "HD",
        },
        {
          src: null,
          type: "video/mp4",
          label: "SD",
        },
      ],
      poster: null,
      plugins: {
        airPlay: {},
        chromecast: {},
      },
      controlBar: {
        children: [
          "playToggle",
          "progressControl",
          "volumePanel",
          "qualitySelector",
          "chromecastButton",
          "airPlayButton",
          "fullscreenToggle",
        ],
      },
    };
    this.data = this.film;
    options.sources[0].src = this.data.video_fhd;
    options.sources[1].src = this.data.video_hd;
    options.sources[2].src = this.data.video_sd;
    options.poster = `https://image.tmdb.org/t/p/original${this.data.backdrop}`;
    console.log(this.data);
    this.player = videojs(
      this.$refs.videoPlayer,
      options,
      function onPlayerReady() {
        console.log("onPlayerReady", this);
      },
    );
  },
  beforeDestroy() {
    if (this.player) {
      this.player.dispose();
    }
  },
};
</script>

<style scoped></style>

[Caryyon]

You likely need to add:

<script type="text/javascript" src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1"></script>

this loads the casting framework that this plugin needs.