My strapi pages are broken when using nuxt 3 dynamic pages

Questions and Answers
1
System Information
  • Strapi Version - 4.10.5:
  • Operating System: Ubuntu 22:
  • Database: SLQ:
  • Node Version: 16:
  • NPM Version: 8.19.2:
  • Yarn Version:

I have a strapi application which serves dynamic project and blog pages
eg. https://ip_address/projects/my-project-2023 and https://ip_address/blog/my-story-2023
Am using the slug to fetch data and display the pages
My Nuxt 3 pages/[id].vue which makes the api call to the Strapi Application

onMounted(async () => {
  try {
    const response = await fetch(
      `${server}/api/projects?_q=` + route.params.id,
      {
        method: "GET",
        headers: headers,
      }
    )
      .then(checkStatus)
      .then(parseJSON);
    projectData.value = response.data;
    loading.value = false;
  } catch (error) {
    error.value = error;
  }
});

They work perfectly on my localhost however they dont when live because i receive a 404 error.