README
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="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:
Prop | Required | Type | Default | Description |
---|---|---|---|---|
src | yes | String | - | Path to the h5p content |
l10n | no | Object | {} | UI translations |
embed | no | String | '' | Set embedCode and enable embed button |
resize | no | String | '' | Set resizeCode |
export | no | String | '' | Set exportUrl and enable export button |
copyright | no | Boolean | false | Enable copyright button |
icon | no | Boolean | false | Enable H5P icon |
fullscreen | no | Boolean | false | Enable fullscreen button |
See https://h5p.org/creating-your-own-h5p-plugin for translation strings.
NOTE: UI translations are not reactive. You have to manually trigger a rerender for translation changes to take effect (e.g. by binding :key to your locale).
Events
All events emitted by H5P are emitted by vue-h5p, event names are the H5P event type, payload is the event data.
Slots
You can use the default slot to render a placeholder while the content is loading.
The named slot "error" is rendered if a request to get the h5p JSON files fails, the slot-scope provides failed request as "error" object.
Development
Put your extracted h5p content into public/h5p, files are served by vue-dev-server.
Serve the example using
yarn example
Write code, commit changes using conventional commits.
Prepare release with
yarn pre-version