Nuxt

TockDocs is a Nuxt app

TockDocs is distributed as a Nuxt layer. When you scaffold a project, you get a normal Nuxt application that extends the layer and can use the standard Nuxt ecosystem.

A starter app typically includes:

my-docs/
├── content/
├── nuxt.config.ts
├── package.json
└── public/

From there, you can add any normal Nuxt directories such as app/, server/, plugins/, or modules/.

Nuxt modules

You can install and configure Nuxt modules exactly as you would in any other Nuxt project.

Example: add Vercel Analytics.

npm install @vercel/analytics

export default defineNuxtConfig({
  extends: ['tockdocs'],
  modules: ['@vercel/analytics/nuxt/module'],
})

Custom Vue components in docs

You can use Markdown + MDC for most docs UI, but you can also create your own Vue components and use them inside content.

Example component:

Vue componentMarkdownPreview

app/components/content/BrowserFrame.vue

<script setup lang="ts">
defineProps<{
  title?: string
}>()
</script>

<template>
  <div class="w-fit overflow-hidden rounded-xl border border-muted bg-accented px-2 pb-2 shadow-md">
    <div class="flex items-center justify-between border-b border-accented bg-accented px-2 py-2">
      <div class="flex items-center gap-2">
        <span class="h-3 w-3 rounded-full bg-red-500" />
        <span class="h-3 w-3 rounded-full bg-yellow-500" />
        <span class="h-3 w-3 rounded-full bg-green-500" />
      </div>
      <div class="text-muted">
        {{ title }}
      </div>
    </div>
    <slot mdc-unwrap="p" />
  </div>
</template>

Vue pages

In addition to Markdown pages, you can create regular Vue pages.

<template>
  <div>
    <h1>Hello</h1>
  </div>
</template>

You can also use definePageMeta to change the layout or hide the default shell pieces:

<script setup lang="ts">
definePageMeta({
  layout: 'default',
  header: false,
  footer: false,
})
</script>

Custom layouts

TockDocs ships with:

• default for landing pages and custom Vue pages
• docs for documentation pages

You can add your own layouts in app/layouts/:

<template>
  <main class="custom-layout">
    <slot />
  </main>
</template>

Why the layer approach matters

Because TockDocs is a layer instead of a closed template, you can:

• keep docs authoring in Markdown
• override built-in components when needed
• add your own pages and APIs
• install more Nuxt modules
• mix marketing pages, app pages, and docs in one project