vue-h5p

A vue h5p component for displaying H5P content standalone, inspired by tunapanda/h5p-standalone.

Installation

With module loader

npm install vue-h5p

or

yarn add vue-h5p

in your component:

<template>
  <h5p src="https://github.com/technowledgy/vue-h5p/raw/main/path/to/h5p-content" :l10n="translations" @xapi="handleXAPIEvent">
    Loading...
    <template #error>
      Resource not available. :(
    </template>
  </h5p>
</template>

<script>
import h5p from 'vue-h5p'
import translations from './translations'

export default {
  components: {
    h5p
  },
  computed: {
    translations () {
      return translations
    }
  },
  methods: {
    handleXAPIEvent (ev) {
      console.log('H5P emitted X-API event')
    }
  }
}
</script>

Props

The component accepts the following props: