Vue.js 3: Store videos offline in a Vue PWA

I am using Vue 3 with Typescript. I am trying to show a video in the PWA. It works online great but when i try it offline the video is not loading. I store the video in the assets folder and in the finished dist the videos are in the media folder. Thank you for your help.

  <video autoplay loop class="video">
    <source :src='require("@/assets/videos/test.mp4")' type='video/mp4'>
  </video>

Answer

I found the solution myself.

It can easily be done with localstorage or indexedDB (for videos). This can only be done for small videos on iOS, because mobile Safari has a Limitation of 50MB (https://developers.google.com/web/ilt/pwa/live-data-in-the-service-worker#how_much_can_you_store)

Another solution without indexedDB can be found here: https://stackoverflow.com/a/56337080/7439224