I want to import a blob url generated by an external js file in nuxt.js into a vue file.

recorder.js

this.chunks.push(evt.data)
this.chunkType = evt.data.type

if (this.state !== 'inactive') {
  return
}

let blob = new Blob(this.chunks, { 'type': this.chunkType })
let blobUrl = URL.createObjectURL(blob)
const recording = {
  ts: new Date().getTime(),
  blobUrl: blobUrl,
  mimeType: blob.type,
  size: blob.size,
}
console.log(blobUrl);`

I would like to convert the blob url generated by this code into a blob file in the vue page.

recorder.vue

<h4 class="mt-16 mb-10 ml-6">record file</h4>

      <div v-for="(recording, idx) in recordings" :key="recording.ts">

        <v-card class="mb-14" max-width="450">
          <v-card-title primary-title>
            <v-layout justify-center>
              <div class="ml-3">
                <v-card-title class="mb-3"
                  >file #{{ idx + 1 }}
                </v-card-title>

                <audio
                  id="recordFile"
                  :src="recording.blobUrl"
                  controls="true"
                />

script

 submitFile(_idx) {
  axios
    .get(blobUrl, {
      responseType: 'blob',
    })
    .then(({ data }) => {
      console.log(data) // → Blob
    })
    .catch((err) => {
      console.error(err)
    })

I was able to turn the blob url into a blob file and output it to the console log using the above method inside the external file recorder.js. However, I don't know how to export this blob url to a vue page.

recorder.js

export default class RecorderService {
constructor (baseUrl) {
this.baseUrl = baseUrl

I would like to output from export default class like this.