Skip to main content

WebPlayer with Vue.js

Installation​

tip

When you use the Web Player as a dependency in your application, you need to update it whenever the package is updated, as it evolves frequently. See Updating to the Latest Version.

npm install @car-cutter/vue-webplayer

Usage​

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

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

Quick start​

/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>

Version Compatibility​

This package requires Vue 3.

Updating to the Latest Version​

To update @car-cutter/vue-webplayer to the latest version, run:

npm install @car-cutter/vue-webplayer@latest

You can check which version is currently installed with:

npm list @car-cutter/vue-webplayer
tip

After updating, rebuild your application to ensure the new version is picked up correctly.

Next steps​

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