Nuxt•3mo ago

Docus v3 - How to create another landing page

I've just started using the new version of Docus and I love it. Even purchased Nuxt UI Pro because of it. I'm a bit stuck at creating my second landing page (a page without the docs navigation). Setting the layout via frontmatter doesn't seem to work. Is this intended or a bug? What am I missing?

3 Replies

kapa.ai•3mo ago

Hi @alexgrozav. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I'm glad to hear you're enjoying Docus v3 and Nuxt UI Pro! Based on the available knowledge sources, Docus v3 is designed as a full Nuxt 3 application, and its content structure is driven by collections defined in content.config.ts. The landing page is typically set up as a special collection (often called landing) and rendered at the root route. The docs navigation and layout are handled separately, usually for the documentation section, not the landing page. Creating a second landing page (i.e., a page without the docs navigation) is not directly covered in the official migration or Docus v3 documentation. The sources do mention that layouts are customizable and that you can override components or layouts using Nuxt Layers, but there is no explicit mention of supporting multiple landing pages or switching layouts via frontmatter in Docus v3. The default behavior is to auto-generate navigation and layouts based on your folder structure and content collections, and the landing page is a special case handled by its own collection and route.

Setting the layout via frontmatter doesn't seem to work. Is this intended or a bug?

The knowledge sources do not explicitly state whether setting the layout via frontmatter is supported or not in Docus v3. However, the migration guides and Docus v3 blog posts do not mention using frontmatter to select layouts for individual pages. Instead, layouts and navigation are tightly coupled to the content collections and folder structure, and customization is typically done via component overrides or Nuxt Layers, not frontmatter fields. This suggests that the behavior you're seeing may be intended, or at least not currently supported as a feature in Docus v3. What can you do? - If you need a second landing page, you may need to create a new collection (e.g., landing2) and a corresponding route/component to render it, bypassing the default docs navigation and layout. This would involve customizing your Nuxt app structure, as Docus v3 is a full Nuxt app and allows such overrides. - For more advanced routing or layout logic, you might need to override or extend the default Docus behavior using Nuxt's features (pages, layouts, or layers), as Docus is built to be extensible in this way What’s New in Docus v3?. Summary:
The knowledge sources do not provide a built-in way to set a different layout via frontmatter for a second landing page in Docus v3. This appears to be a limitation or an intentional design choice. For now, you may need to use Nuxt's extensibility (custom pages, layouts, or layers) to achieve your goal. If you need more specific guidance, I recommend checking the Docus documentation or opening an issue/discussion with the Docus team for clarification on this use case. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

<@171014027034624000> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

alexgrozavOP•3mo ago

I've tried updating the default docs collections. Still doesn't work. The non-index pages return 404.

import { defineCollection, defineContentConfig, z } from "@nuxt/content";

export default defineContentConfig({
    collections: {
        landing: defineCollection({
            type: "page",
            source: {
                cwd: "content/landing",
                include: "**",
            },
        }),
        docs: defineCollection({
            type: "page",
            source: {
                cwd: "content/docs",
                include: "**",
            },
            schema: z.object({
                links: z
                    .array(
                        z.object({
                            label: z.string(),
                            icon: z.string(),
                            to: z.string(),
                            target: z.string().optional(),
                        }),
                    )
                    .optional(),
            }),
        }),
    },
});

import { defineCollection, defineContentConfig, z } from "@nuxt/content";

export default defineContentConfig({
    collections: {
        landing: defineCollection({
            type: "page",
            source: {
                cwd: "content/landing",
                include: "**",
            },
        }),
        docs: defineCollection({
            type: "page",
            source: {
                cwd: "content/docs",
                include: "**",
            },
            schema: z.object({
                links: z
                    .array(
                        z.object({
                            label: z.string(),
                            icon: z.string(),
                            to: z.string(),
                            target: z.string().optional(),
                        }),
                    )
                    .optional(),
            }),
        }),
    },
});

Gaming

Programming

Docus v3 - How to create another landing page

Did you find this page helpful?