Vue.js 3: Why Are Backend API Calls Appending Nested Route Paths?

I'm new to Vue.js and have encountered an issue with API calls in my project.

I am using the following Vite configuration:

JAVASCRIPTCopied
export default defineConfig({
  plugins: [
    vue(),
    vueDevTools(),
  ],
  server: {
    port: 7000,
    proxy: {
      '/api': {
        target: 'http://localhost:8081/',
        changeOrigin: true
      },
    },
  },
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
})

My router setup is as follows:

JAVASCRIPTCopied
routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/recipes/:id',
      name: 'recipe',
      component: RecipeView
    },
    {
      path: '/about',
      name: 'about',
      component: AboutView
    },
    {
      path: '/recipes/add',
      name: 'recipe-add',
      component: AddRecipe
    },
    {
      path: '/recipes/edit/:id',
      name: 'recipes-edit',
      component: EditRecipe
    }
  ]

All pages load correctly and make their respective backend calls on mounted. For instance, the recipe page calls:

JAVASCRIPTCopied
state.recipes = (await axios.get('api/recipes')).data;

However, on the add and edit pages, the API call seems to be prepending part of the route path. For example, on the add page:

JAVASCRIPTCopied
state.allCategories = (await axios.get('api/categories')).data;

This request incorrectly resolves to something like http://localhost:7000/recipes/api/categories, whereas changing the route to a non-nested path (e.g., '/recipe-add') results in the correct URL and successful data retrieval.

Why is the 'recipes' segment being appended in these cases, and how can I fix this issue?