Adding instructions for Vue.js 3

[vsojo]

I kept getting all sorts of errors installing on Vue because I was getting confused with the documentation.
For posterity, and in the hope that it may help somebody someday, here's what I did to make it work in Vue 3, perhaps you guys want to add it into the instructions:

Instructions for Vue.js

Installing h5p-standalone

1. Run npm install h5p-standalone from the root folder of your project (where your package.json lives), or do the same with yarn add if you're using yarn.
2. Donwload the latest version of the source code and put it in an appropriate sub-folder inside the /public/ folder of your project, for example: /public/h5p/ (but this is entirely arbitrary as long as it's inside /public). Note: The file named h5p-standalone-X.Y.Z.zip works; perhaps the source-code files also work (?).
3. Decompress the .zip file.
4. Move the dist folder up to the /public/h5p/ folder.
5. If you want, you can get rid of the .zip file and the other folder that came from it, which should only contain the readme file now.
6. You can rename the dist folder if you want, for example, from /public/h5p/dist you can rename it to /public/h5p/h5p-standalone.

Making your H5P content files available

1. Put a copy of your desired .h5p file inside your project's public folder, for example: /public/h5p/contents/memory-baby-goats.h5p
2. Change the extension from .h5p to .zip
3. Decompress the .zip
4. You can delete the .zip and keep the decompressed folder.

Now we're ready to put it all together.

Rendering an H5P file in your Vue template

1. In the template, add a container for the H5P content: <div id="h5p-container"></div>
2. In the script section, you have to import the library and create the object, but you also have to link to the public CSS and JS files:

<script setup>
import { onMounted } from "vue";
import { H5P } from "h5p-standalone";

onMounted(() => {
  // IMPORTANT! Must be in here because the div element doesn't exist before the component is mounted!
  const el = document.getElementById("h5p-container");
  const options = {
    h5pJsonPath: "h5p/contents/memory-baby-goats",
    frameJs: "h5p/h5p-standalone/frame.bundle.js",
    frameCss: "h5p/h5p-standalone/styles/h5p.css",
  };
  new H5P(el, options);
});
...
</script>

As noted in the code, the loading must occur inside onMounted because the div element doesn't exist before the component is mounted!

Also, note that the locations h5p/contents/ and h5p/h5p-standalone/ are arbitrary and match the example here, but you may have different paths (same with the baby goats, of course).

[0xMurage]

@vsojo thank you for this.

The frame.bundle.js includes the core H5P library

Standalone H5P package essentially provides the logic to load the content, libraries and respective dependencies. After everything is loaded, we pass the control to H5P core player library (H5P.js) which handles the rest.

I think that's is something which is not really clear at the moment in the docs.

[0xMurage]

One can skip the second download of the H5P standalone zipped files by using something like

{
"frameJs": "https://cdn.jsdelivr.net/npm/[email protected]/dist/main.bundle.min.js",
"frameCss":"https://cdn.jsdelivr.net/npm/[email protected]/dist/styles/h5p.min.css"

}

other CDN hosted files should also work as well.

[vsojo]

Thanks, @murageyun.

In my case, I am planning to use it for a standalone mobile app for teachers in developing countries, where data/signal may not be guaranteed; so I guess I better distribute all necessary files packaged within the application itself.

Question: Do you mean I can load h5p-standalone from my local copy of frame.bundle.js instead of from the npm package? I couldn't make that work, which is why I had to use both. What would you change in my code above? i.e., in the <script setup> section I have import { H5P } from "h5p-standalone"; near the top. What should I do instead to get H5P to load from frame.bundle.js? If I just try getting it from there, I get an error:

The requested module '/src/assets/h5p-sources/frame.bundle.js' does not provide an export named 'H5P'

[0xMurage]

Do you mean I can load h5p-standalone from my local copy of frame.bundle.js instead of from the npm package?

Yes! You could achieve that by copying the frame.bundle.js, styles and fontes into the dist our your output folder as an asset.
You could have this as a postbuild instructions or in the Vue config (I have little expertise on Vue but I bet it has similar way of doing things like Angular or Ember)

[vsojo]

Yes! You could achieve that by copying the frame.bundle.js, styles and fontes into the dist our your output folder as an asset. You could have this as a postbuild instructions or in the Vue config (I have little expertise on Vue but I bet it has similar way of doing things like Angular or Ember)

Thanks! I did that and can load the frame.bundle.js file, but my problem is I have an import error. For some reason my code can't see the export of anything called H5P in there, and fails with the error I mentioned above:

import { H5P } from "assets/frame.bundle.js";

ERROR: The requested module 'assets/frame.bundle.js' does not provide an export named 'H5P'

[0xMurage]

that won't work as we currently don't support it.
The h5pJsonPath, frameJs, frameCss will be resolved as a static files/asset.

I suggest copying the frameJs, frameCss, and the fonts from node_modules into your output folder.

e.g. using cpx to copy everything in the node_modules/h5p-standalone folder except main.bundle.js.

{
"postbuild": "cpx 'node_modules/h5p-standalone/dist/**/!(main.bundle.*)'  'dist/assets/h5p-standalone'"
}

this will run atomatically after you run yarn build or npm build.

Thus in your H5P standalone player config, you could do something like:

{

"frameJs": "/assets/h5p-standalone/main.bundle.min.js",
"frameCss":"/assets/h5p-standalone/styles/h5p.min.css"

}

The assets might not be available during development if serving the app using npm run dev or yarn dev commands. That can easily be solved by using another post script on that command e.g.

{
"postdev": "cpx 'node_modules/h5p-standalone/dist/**/!(main.bundle.*)'  'dist/assets/h5p-standalone'"
}

I am not well familiar with Vue and the output folder is just for demo purpose, so replace with most appropriate location.

[rolexta]

Any example for Previous state restoration?