Is there anyway to separate openapi layout from main layout?

[salartalaA]

I want to separate my openapi layout from the main layout
Would someone tell which way is best practice for this section?

[fuma-nama]

if you mean a separate route group in Next.js, it would be easier to use the virtual file approach, and create a loader for each of them: source, openapiSource.

[salartalaA]

I mean separate layout file
for example like this:
(openapi)
layout.tsx
other pages ...

[fuma-nama]

yeah, it's what I mean, create a route group for openapi and copy its layout & page, then use a separated loader() for OpenAPI pages.

[salartalaA]

Ok but how to use those virtual files? It's complex for me
I'll be very thankful

[fuma-nama]

just follow https://fumadocs.dev/docs/ui/openapi#generate-pages but make a loader for each source

import { loader, multiple } from 'fumadocs-core/source';
import { openapiPlugin, openapiSource } from 'fumadocs-openapi/server';
import { docs } from 'fumadocs-mdx:collections/server';
import { openapi } from '@/lib/openapi';

export const source = loader(
  docs.toFumadocsSource(),
  {
    baseUrl: '/docs',
  },
);

export const openapiPages = loader(
  await openapiSource(openapi, { baseDir: 'openapi' }),
  {
    baseUrl: '/docs',
    plugins: [openapiPlugin()],
  },
);