app_vue2/pages/cmf_licence/organization.vue

<template>
  <div class="d-flex flex-column align-center">
    <h2 class="ma-4">{{ $t('cmf_structure_licence')}}</h2>
    <a
      href="https://www.cmf-musique.org/services/tarifs-preferentiels/"
      target="_blank"
    >
      {{ $t('cmf_licence_details_url')}}
    </a>

    <v-form
      ref="form"
      lazy-validation
    >
      <v-btn class="ma-12" @click="submit">{{ $t('generate') }}</v-btn>
    </v-form>
    <span v-if="pending">
      Loading...
    </span>
    <span v-if="fileUrl !== null">
      <a :href="fileUrl">{{ fileUrl }}</a>
    </span>
  </div>
</template>

<script lang="ts">
import {defineComponent, Ref, ref, useContext} from "@nuxtjs/composition-api";
import {HTTP_METHOD, QUERY_TYPE} from "~/types/enums";
import DataPersister from "~/services/data/dataPersister";
import {DataPersisterArgs} from "~/types/interfaces";

export default defineComponent({
  name: 'OrganizationCmfLicence',
  setup() {
    const { $config } = useContext()
    let pending: Ref<boolean> = ref(false)
    let fileUrl: Ref<string | null> = ref(null)
    console.log($config.baseUrl_mercure)
    const submit = async () => {

      const url = new URL($config.baseUrl_mercure)
      url.searchParams.append('topic', "files")
      // const eventSource = new EventSource(url.toString(), { withCredentials: true });
      const eventSource = new EventSource(url.toString());
      eventSource.onmessage = event => {
        // Will be called every time an update is published by the server
        const data = JSON.parse(event.data)
        fileUrl.value = data.url
        pending.value = false
      }

      const response = await DataPersister.request(
        '/api/export/cmf-licence/organization',
        HTTP_METHOD.POST,
        { type: QUERY_TYPE.DEFAULT, data: { format: 'pdf', async: true } } as DataPersisterArgs
      )
      pending.value = true
    }

    return {
      submit,
      pending,
      fileUrl
    }
  }
})
</script>