WebPlayer with Vue.js

Installation

npm

npm install @car-cutter/vue-webplayer

Yarn

yarn add @car-cutter/vue-webplayer

pnpm

pnpm add @car-cutter/vue-webplayer

Usage

Vue 3

import { WebPlayer } from "@car-cutter/vue-webplayer";

Vue 2

import { WebPlayer } from "@car-cutter/vue-webplayer/vue2";

Then, use the component as: <WebPlayer :compositionUrl="url" />

Quick start

Vue 3

/src/App.vue

<script setup lang="ts">
  import { WebPlayer } from "@car-cutter/vue-webplayer";
</script>

<template>
  <main>
    <h1>Vue App</h1>
    <div class="webplayer-wrapper">
      <WebPlayer
        compositionUrl="https://cdn.car-cutter.com/libs/web-player/v3/demos/composition.json"
        :infiniteCarrousel="true"
        @compositionLoaded="() => console.log('Composition loaded')"
      />
    </div>
  </main>
</template>

<style scoped>
  .webplayer-wrapper {
    max-width: 800px;
    margin-inline: auto;
  }
</style>

Vue 2

/src/App.vue

<script>
  import { WebPlayer } from "@car-cutter/vue-webplayer/vue2";

  export default {
    components: {
      WebPlayer,
    },
    methods: {
      onCompositionLoaded() {
        console.log("Composition loaded");
      },
    },
  };
</script>

<template>
  <main>
    <h1>Vue App</h1>
    <div class="webplayer-wrapper">
      <WebPlayer
        compositionUrl="https://cdn.car-cutter.com/libs/web-player/v3/demos/composition.json"
        :infiniteCarrousel="true"
        @compositionLoaded="onCompositionLoaded"
      />
    </div>
  </main>
</template>

<style scoped>
  .webplayer-wrapper {
    max-width: 800px;
    margin-inline: auto;
  }
</style>

Version Compatibility

• Vue 3: Use the default import from @car-cutter/vue-webplayer
• Vue 2: Use the specific import from @car-cutter/vue-webplayer/vue2

Next steps

For more customisation, take a look at available props in the Properties section