[Vue Router warn]: No match found for location with path <API URL>

[enshaded]

Vue Router warn appears every time I use any of the functions from the nuxt-directus composables.

Version

nuxt-directus: 5.6.1
nuxt: 3.11.2

Steps to reproduce

nuxt.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: ['nuxt-directus'],
  runtimeConfig: {
    directus: {
      url: "http://localhost:8055"
    }
  }
})

pages/index.vue

<template>
    <span @click="fetchCollections">test</span>
</template>

<script setup lang='ts'>
const { getCollections } = useDirectusCollections();
const router = useRouter();
const fetchCollections = async () => {
  const collections = await getCollections();
};
</script>

What is Expected?

Response from Directus.

What is actually happening?

 WARN  [Vue Router warn]: No match found for location with path "/collections/"

[forge-oscar-caballero]

I'm experiencing the same bug. Items are accessible directly from http://localhost:8055/items/navigation/main-menu but not through nuxt v3.11.2.

const { data: menu } = await useAsyncData("navigation", () =>
  getItemById<NavigationMenu>({
    collection: "navigation",
    id: "main-menu",
  })
); 

I've setup my runtime configuration correctly.

runtimeConfig: {
    directus: {
      url: "http://localhost:8055",
    },
  },

[Vue Router warn]: No match found for location with path "/items/navigation/main-menu"

[forge-oscar-caballero]

@morkvitnir I just notice documentation is outdated for our case:

We need to arrange it inside public to be exposed:

runtimeConfig: {
  public: {
    directus: {
      url: "http://localhost:8055",
    },
  },
},