Nuxt LLMs

repository·main·Indexed 41 days ago

https://github.com/nuxt-content/nuxt-llms

A Nuxt module for automatically generating machine-readable llms.txt and llms-full.txt documentation optimized for LLM consumption and web crawlers. Version 0.2.0 features seamless integration with @nuxt/content (v3.2.0+), support for custom documentation sections, and Nitro runtime hooks (llms:generate and llms:generate:full) for dynamic content modification.

Tokens
3.8K
Snippets
12
Records
13
Agent score
50%

What's inside Nuxt LLMs

  1. How llms.txt and llms-full.txt work

    main

    Nuxt LLMs generates two distinct documentation formats:

    llms.txt

    Generates a concise, structured documentation at the /llms.txt route following the llms.txt specification. It is optimized for both humans and AI, containing application metadata, organized sections, and links.

    llms-full.txt

    Generates a detailed, free-form documentation format at the /llms-full.txt route. This is useful for providing deep context to LLMs while reducing crawler traffic.

    Note: llms-full.txt is disabled by default. To enable it, you must provide full.title and full.description in your nuxt.config.ts.

    export default defineNuxtConfig({
      llms: {
        domain: 'https://example.com',
        title: 'My Application',
        full: {
          title: 'Full Documentation',
          description: 'Full documentation of the application',
        },
      },
    })
  2. Quick Setup for Nuxt LLMs

    main

    To use nuxt-llms in your Nuxt application, install the module, register it in your configuration, and provide the required application details.

    1. Install the module:

      npm i nuxt-llms
    2. Register in nuxt.config.ts:

      export default defineNuxtConfig({
        modules: ['nuxt-llms']
      })
    3. Configure application details: You must provide at least the domain. You can also define title, description, and custom sections containing links.

    Once configured, the documentation is available at /llms.txt.

    export default defineNuxtConfig({
      modules: ['nuxt-llms'],
      llms: {
        domain: 'https://example.com',
        title: 'My Application',
        description: 'My Application Description',
        sections: [
          {
            title: 'Section 1',
            description: 'Section 1 Description',
            links: [
              {
                title: 'Link 1',
                description: 'Link 1 Description',
                href: '/link-1',
              },
            ],
          },
        ],
      },
    })
  3. Integrate with Nuxt Content

    main

    Nuxt LLMs integrates seamlessly with @nuxt/content (v3.2.0+). When both are installed, Nuxt Content automatically uses nuxt-llms hooks to include all your content files in both llms.txt and llms-full.txt without additional configuration.

    Simply install both and place your markdown files in the content/ directory.

    export default defineNuxtConfig({
      modules: ['nuxt-llms', '@nuxt/content'],
      llms: {
        domain: 'https://example.com',
        title: 'My Application',
        description: 'My Application Description',
      },
    })
  4. Extend documentation from a Nuxt Module

    main

    If you are developing a Nuxt module and want to contribute to the user's LLM documentation, you must register a server plugin within your module's runtime.

    1. Create the server plugin in your module's runtime directory:

      // module/runtime/server/plugins/my-module-llms.ts
      export default defineNitroPlugin((nitroApp) => {
        nitroApp.hooks.hook('llms:generate', (event, options) => {
          options.sections.push({
            title: 'My Module',
            description: 'Documentation for my module features',
            links: []
          })
        })
      })
    2. Register the plugin in your module's setup function using addServerPlugin:

      import { defineNuxtModule, addServerPlugin } from '@nuxt/kit'
      import { fileURLToPath } from 'url'
      
      export default defineNuxtModule({
        setup(options, nuxt) {
          const runtimeDir = fileURLToPath(new URL('./runtime', import.meta.url))
          addServerPlugin(resolve(runtimeDir, 'server/plugins/my-module-llms'))
        }
      })
    // module/runtime/server/plugins/my-module-llms.ts
    export default defineNitroPlugin((nitroApp) => {
      nitroApp.hooks.hook('llms:generate', (event, options) => {
        options.sections.push({
          title: 'My Module',
          description: 'Documentation for my module features',
          links: []
        })
      })
    })
  5. Configure nuxt-llms options

    main

    The llms configuration object in nuxt.config.ts controls the generation of documentation.

    OptionTypeDescription
    domainstringRequired. The domain of the application.
    titlestringThe title displayed at the top of the documentation.
    descriptionstringThe description displayed at the top of the documentation.
    sectionsArray<Section>An array of documentation sections. Each section requires a title and can include a description and links.
    notesstringA special section that always appears at the end of the documentation.
    fullObjectConfiguration for the llms-full.txt route. Setting this enables the route.
    full.titlestringThe title for the llms-full.txt documentation.
    full.descriptionstringThe description for the llms-full.txt documentation.
    prerenderbooleanWhether to prerender /llms.txt (and /llms-full.txt) at build time. Defaults to true. Set to false to serve dynamically (e.g., via ISR).
  6. Extend documentation using runtime hooks

    main

    You can dynamically modify or add content to your documentation by creating a server plugin in your server/plugins directory using the provided Nitro hooks.

    llms:generate(event, options)

    Called for every request to /llms.txt. Use this to modify the structured options object (e.g., adding new sections or links).

    • event: H3Event - The current request event.
    • options: ModuleOptions - The module options you can modify.

    llms:generate:llms-full(event, options, contents)

    Called for every request to /llms-full.txt. Use this to append custom markdown content.

    • event: H3Event - The current request event.
    • options: ModuleOptions - The module options.
    • contents: string[] - An array of content sections you can modify or append to.
    // server/plugins/llms.ts
    export default defineNitroPlugin((nitroApp) => {
      // Method 1: Modifying structured llms.txt
      nitroApp.hooks.hook('llms:generate', (event, options) => {
        options.sections.push({
          title: 'API Documentation',
          description: 'REST API endpoints and usage',
          links: [
            {
              title: 'Authentication',
              description: 'API authentication methods',
              href: `${options.domain}/api/auth`
            }
          ]
        })
      })
    
      // Method 2: Adding raw markdown to llms-full.txt
      nitroApp.hooks.hook('llms:generate:llms-full', (event, options, contents) => {
        contents.push(`## API Authentication\n\n### Bearer Token\nTo authenticate, use:\n\`\`\`\nAuthorization: Bearer <token>\n\`\`\``)
      })
    })
  7. Configure the nuxt-llms module

    main

    The nuxt-llms module is configured using the llms key in your nuxt.config.ts. It requires a domain property to function correctly.

    Key configuration options include:

    • domain: The base URL/domain for your documentation (Required).
    • title: The title of your documentation.
    • description: A description of your documentation.
    • notes: An array of notes to include.
    • sections: An array of documentation sections.
    • prerender: Boolean determining if /llms.txt and /llms-full.txt should be prerendered. Defaults to true.
    • full: An object used to enable the /llms-full.txt endpoint. It accepts title and description properties.
    export default defineNuxtModule<ModuleOptions>({
      llms: {
        domain: 'https://example.com',
        title: 'My Docs',
        description: 'Documentation for my project',
        sections: [
          // ... your sections
        ],
        full: {
          title: 'Full Documentation',
          description: 'Complete documentation set'
        }
      }
    })
  8. Configure nuxt-llms module options

    main

    The ModuleOptions interface defines the configuration for the nuxt-llms module. You can use these keys in your nuxt.config.ts to define how your documentation is structured and served.

    Key options include:

    • domain: The domain of your documentation (required).
    • title (optional): The title of your documentation.
    • description (optional): The description of your documentation.
    • sections: An array of LLMsSection objects defining the structure of your documentation.
    • full (optional): Configuration for the full documentation content, requiring a title and description.
    • notes (optional): An array of strings for additional notes.
    • prerender (optional): Determines if /llms.txt and /llms-full.txt are prerendered at build time. Defaults to true. Set to false to serve them dynamically (e.g., via ISR).
    export interface ModuleOptions {
      domain: string
      full?: {
        title: string
        description: string
      }
      sections: Array<LLMsSection>
      title?: string
      description?: string
      notes?: string[]
      prerender?: boolean
    }
  9. Migrate from deprecated llmsHooks to Nitro hooks

    main

    The llmsHooks object and the helper functions onLLMsGenerate and onLLMsGenerateFull are deprecated. To customize the generation of llms.txt or llms-full.txt, you should use the Nitro runtime hooks via useNitroApp().hooks.hook() instead.

    Instead of using the deprecated llmsHooks or onLLMsGenerate helpers, register your callbacks using the following hook names:

    • llms:generate: Triggered when generating the standard llms.txt file. The callback receives (event, options).
    • llms:generate:full: Triggered when generating the llms-full.txt file. The callback receives (event, options, contents) where contents is an array of strings.

    If you see the warning [nuxt-llms] llmsHooks are deprecated... in your console, you are using the old API and should migrate to the Nitro hooks pattern.

    // Use the Nitro runtime hooks instead of the deprecated llmsHooks
    const nitroApp = useNitroApp()
    
    // For llms.txt
    nitroApp.hooks.hook('llms:generate', (event, options) => {
      // Custom logic for llms.txt generation
    })
    
    // For llms-full.txt
    nitroApp.hooks.hook('llms:generate:full', (event, options, contents) => {
      // Custom logic for llms-full.txt generation
    })
  10. Use llmsHooks in server-side code

    main

    The module provides llmsHooks which are available as server imports. You can use these to tap into the documentation generation lifecycle within your server routes or composables.

    To use them, simply import llmsHooks from the module's runtime utilities.

    // In a server route or utility
    import { llmsHooks } from '~/server/utils/hooks'
    // Use hooks as needed
  11. Use Nitro runtime hooks for llms generation

    main

    The nuxt-llms module provides Nitro runtime hooks that allow you to intercept or extend the generation of documentation files. These hooks are available via the NitroRuntimeHooks interface.

    Available hooks:

    • llms:generate: Triggered during the generation process. Receives the H3Event and the ModuleOptions.
    • llms:generate:full: Triggered during the generation of the full documentation. Receives the H3Event, ModuleOptions, and an array of contents (strings) representing the generated documentation content.
    declare module 'nitropack/types' {
      interface NitroRuntimeHooks {
        'llms:generate': (event: H3Event, options: ModuleOptions) => void
        'llms:generate:full': (event: H3Event, options: ModuleOptions, contents: string[]) => void
      }
    }
  12. Define documentation sections with LLMsSection

    main

    When configuring the sections option in ModuleOptions, each section must follow the LLMsSection interface. This allows you to organize your documentation into logical groups for LLM consumption.

    An LLMsSection includes:

    • title: The name of the section (required).
    • description (optional): A description of the section.
    • links (optional): An array of objects containing title, href, and an optional description for specific documentation pages within that section.
    export interface LLMsSection {
      title: string
      description?: string
      links?: Array<{
        title: string
        description?: string
        href: string
      }>
    }