Choose your preferred configuration by choosing one of the presets from the list.
Once the project is created you should see successful message.
Go to root project and start application using instructions:

cd theoplayer-vuejs-sample
npm run serve

As a result you should be able to browse the default page under the following url: http://localhost:8080/
Reference the THEOplayer files in index.html like following:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
    <title>theoplayer-vuejs-sample</title>
    <link
      rel="stylesheet"
      type="text/css"
      href="//cdn.theoplayer.com/dash/theoplayer/ui.css"
    />
  </head>

  <body>
    <noscript>
      <strong
        >We're sorry but theoplayer-vuejs-sample doesn't work properly without
        JavaScript enabled. Please enable it to continue.</strong
      >
    </noscript>
    <div id="app"></div>
    <script
      type="text/javascript"
      src="//cdn.theoplayer.com/dash/theoplayer/THEOplayer.js"
    ></script>
    <!-- built files will be auto injected -->
  </body>
</html>

In the src/components/ add new file and name it Player.vue, then add the following snippet:

<template>
  <div
    class="theoplayer-container video-js theoplayer-skin vjs-16-9 THEOplayer"
    ref="theoplayer"
  ></div>
</template>

<script>
  export default {
    props: ["source"],
    mounted: function() {
      this.playerInit();
    },
    methods: {
      playerInit() {
        const player = new window.THEOplayer.Player(this.$refs.theoplayer, {
          fluid: true,
          libraryLocation: "//cdn.theoplayer.com/dash/theoplayer/"
        });
        player.source = {
          sources: this.source
        };
      }
    }
  };
</script>
<style>
  .THEOplayer {
    width: 50%;
    margin: 0 auto;
  }

  .video-js.vjs-16-9 {
    padding-top: 28.12%;
    width: 50%;
  }
</style>

Then you can reference the Player component in different parts of the app and pass the source, for instance you can change App.vue like following:

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png" />
    <Player :source="source" v-if="source" />
  </div>
</template>

<script>
  import Player from "./components/Player.vue";

  export default {
    name: "app",
    components: {
      Player
    },
    data: function() {
      return {
        source: [
          {
            type: "application/x-mpegurl",
            src: "//cdn.theoplayer.com/video/elephants-dream/playlist.m3u8"
          }
        ]
      };
    }
  };
</script>
<style>
  #app {
    font-family: "Avenir", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }
</style>

Including THEOplayer library assets

Create a new folder named i.e. libs under public folder and copy the THEOplayer WebSDK files there.
Change the index.html to reference local files:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
    <title>theoplayer-vuejs-sample</title>
    <link rel="stylesheet" type="text/css" href="libs/THEOplayer/ui.css" />
  </head>

  <body>
    <noscript>
      <strong
        >We're sorry but theoplayer-vuejs-sample doesn't work properly without
        JavaScript enabled. Please enable it to continue.</strong
      >
    </noscript>
    <div id="app"></div>
    <script type="text/javascript" src="libs/THEOplayer/THEOplayer.js"></script>
    <!-- built files will be auto injected -->
  </body>
</html>

In the Player.vue modify libraryLocation like following:

 const player = new window.THEOplayer.Player(this.$refs.theoplayer, {
    fluid: true,
    libraryLocation: "./libs/THEOplayer"
});

Make sure to follow us on GitHub!

Leuven

New York

Singapore

Barcelona