fetch corrected

app/pages/index.vue

@@ -1,15 +1,17 @@
 <script setup lang="ts">
   import * as z from 'zod'
+  import urlJoin from 'url-join';
   import type { FormSubmitEvent } from '@nuxt/ui'
 
   const { loggedIn } = useUserSession()
   const conf = useRuntimeConfig()
-  const base_url = conf.app.baseURL.endsWith('/') ? conf.app.baseURL.slice(0, -1) : conf.app.baseURL
 
 
+  const toast = useToast()
   const video = ref(0);
   const url = ref("");
   const in_url = ref("");
+  const dwn_link = ref("");
 
   const file_dwnl = ref("");
 
@@ -37,35 +39,39 @@
 
 
   async function start_conversion(event: FormSubmitEvent<musicParamsSchema>) {
-    return fetch(base_url + "/convert", {
+    return $fetch("/convert", {
         method: "POST",
-        headers: {
-          "Content-Type": "application/json"
-        },
-        body: JSON.stringify({
+        body: {
           url: url.value,
           song: music_params.song,
           artist: music_params.artist,
           album: music_params.album
-        })
-      }).then(async r => {
-        //console.log(r.status)
-        if(r.status == 401) 
-           window.location.href = "/login"
-        if(r.ok) {
-          const data = await r.json();  // resolves to { file: "my_audio.mp3" }
-          const file = data.file;
-          file_dwnl.value = `/download/${file}`;
-          const a = document.createElement("a");
-          a.href = file_dwnl.value;
-          a.download = file;            // sets suggested filename
-          document.body.appendChild(a); // must append first
-          a.click();                     // triggers download
-          a.remove(); 
         }
-      })
+      }).then(r => { // r resolves to { file: "my_audio.mp3" }
+        const file = r.file; // in this case r["file"] --> "my_audio.mp3"
+        const a = document.createElement("a");
+        a.href = urlJoin(conf.app.baseURL, `/download/${file}`)
+        a.download = file;            // sets suggested filename
+        file_dwnl.value = a.href; // this ref activates the Download button
+        document.body.appendChild(a); // must append first
+        a.click();                     // triggers download
+        a.remove(); 
+        
+      }).catch(r => {
+        // response is NOT ok (401, 500, etc...)
+        const res = r.data;
+        console.log(r.data)
+        if(res.statusCode == 401) {
+          reloadNuxtApp({path: "/login"})
+        }    
+        else toast.add({
+          title: "Error",
+          description: "Returned error. Check your YT link, if this happens too often, try again in a couple of minutes",
+          color: "error"
+        })
 
-    }
+    })
+  }
 
 </script>
 
@@ -106,7 +112,7 @@
         <div class="text-center">
             <UButton class="mt-4 rounded-2xl px-9 w-2/3 py-3 justify-center text-center " loading-auto type="submit">Convert to MP3</UButton>
         </div>
-         <div class="text-center">
+        <div class="text-center" v-if="dwn_link != ''">
             <UButton class="mt-4 rounded-2xl px-9 w-2/3 py-3 justify-center text-center" icon="lucide:cloud-download" color="success" >Download</UButton>
         </div>
     </UForm>