Nuxt

Nuxt App

Docus is built on top of Nuxt 3, which means your documentation project is a full Nuxt application. When you scaffold a project using the Docus CLI, it adds a layer by default giving you all the flexibility of a standard Nuxt app.

By default, the Docus starter only contains a content/ and public/ folder and a package.json. This is all you need to start writing your documentation. You can go further and use any feature of a Nuxt project, from nuxt.config.ts to components or plugins.

Nuxt Modules

Want to enhance your docs with custom functionality? You can install and configure Nuxt modules just like in any Nuxt app.

To add Plausible analytics to your documentation:

npm install @nuxtjs/plausible

export default defineNuxtConfig({
  modules: ['@nuxtjs/plausible'],
})

Custom components

With the power of Nuxt Content and Nuxt UI, and with the help of the MDC syntax, you can use Nuxt UI components directly in your Markdown without any extra configuration needed.

However, you’re not limited to pre-built components. Docus makes it easy to create your own Vue components in your Nuxt app and use them in your content.

Here’s a simple example of a custom BrowserFrame component created in the components folder of your Nuxt app and integrated inside Markdown:

CodeMarkdownPreview

components/content/BrowserFrame.vue

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

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

This approach lets you create dynamic docs powered by Nuxt components using Markdown.