Docus inside an existing project under /docs route

[tux2nicolae]

We try to integrate docus to handle only the /docs route but due to the app/pages/[[lang]]/[...slug].vue it seems that it catches our existing pages or other pages from nuxt content like /legal.

We also have these types of warnings in console when navigating to /docs

browser.mjs?v=50593eda:48 ssr:warn [Vue warn]: injection "navigation" not found. at <[...slug]>
at <RouteProvider>
at <RouterView>
at <NuxtPage>
at <Primitive>
at <UPage>
at <Primitive>
at <UContainer>
at <Primitive>
at <UMain>
at <Docs>
at <AsyncComponentWrapper>
at <LayoutLoader>
at <NuxtLayoutProvider>
at <NuxtLayout>
at <App>
at <NuxtRoot> 

and

runtime-core.esm-bundler.js?v=50593eda:50 [Vue warn]: injection "navigation" not found. 
  at <DocsAsideLeftBody > 
  at <Primitive as="aside" data-slot="left" class="hidden overflow-y-auto lg:block lg:max-h-[calc(100vh-var(--ui-header-height))] lg:sticky lg:top-(--ui-header-height) py-8 lg:ps-4 lg:-ms-4 lg:pe-6.5 lg:col-span-2" > 
  at <UPageAside data-slot="left" class="lg:col-span-2" > 
  at <PrimitiveSlot key=0 data-slot="left" class="lg:col-span-2" > 
  at <Primitive as=undefined data-slot="root" class="flex flex-col lg:grid lg:grid-cols-10 lg:gap-10" > 
  at <UPage > 
  at <Primitive as=undefined class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8" > 
  at <UContainer > 
  at <Primitive as="main" class="min-h-[calc(100vh-var(--ui-header-height))]" > 
  at <UMain > 
  at <Docs ref=Ref< undefined > > 
  at <AsyncComponentWrapper ref=Ref< undefined > > 
  at <LayoutLoader key="docs" layoutProps= {ref: RefImpl} name="docs" > 
  at <NuxtLayoutProvider layoutProps= {ref: RefImpl} key="docs" name="docs"  ... > 
  at <NuxtLayout > 
  at <App key=4 > 
  at <NuxtRoot>

But these warnings i think may be due to the fact that our app.vue may overwrite the docus app.vue, we also tried to create a nuxt layer with docus but without luck.

[larbish]

Hey, thanks for the feedback.

We try to integrate docus to handle only the /docs route but due to the app/pages/[[lang]]/[...slug].vue it seems that it catches our existing pages or other pages from nuxt content like /legal.

Can you share a reproduction or at least your app structure? If your app is defining other routes, they should be registered in the router and should be resolved before the dynamic docus route 🤔

But these warnings i think may be due to the fact that our app.vue may overwrite the docus app.vue, we also tried to create a nuxt layer with docus but without luck.

Indeed if you have an app.vue it will override the Docus one. It you can't get rid of your app.vue, we might think about provider a Docus layout that could be set under some conditions... I'd be happy to help if you share your code or a reproduction!