Using vue reactive variable in JavaScript module

These days, I am working on a video steaming system. Vue.js is used for the front end, and Ruby on Rails for back end.

To simplify the uploading logic, I created a module. Uploading videos takes time, so implementing a progress bar is necessary. However, if the video-uploading logic is written in JavaScript module, it is a little difficult to get the value.

Here is how to do it.

First, in the JavaScript module file, you can import reactive from vue, and declare the reactive value that has the progress percentage. This variable should be exported as well as the uploading logic. Once the reactive value is imported in vue file, it can be used just like other reactive variables. By doing this, progress percentages can be updated, and users can see how much video is uploaded already.