docudjeex/docs/content/2.concepts/7.nuxt.md

description, title, navigation

description	title	navigation
Build interactive and reusable elements with Nuxt components	Nuxt	icon i-simple-icons-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.

::prose-note You can use the Nuxt 4 new directory structure provided by the compatibility version 4 . All files related to front app code goes in app/ folder for cleaner organization and better IDE performance. ::

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:

::prose-steps

Run the following command

npm install @nuxtjs/plausible

Enable the module in nuxt.config.ts

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:

::tabs :::tabs-item{.my-5 icon="i-lucide-code" label="Code"}

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

<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>

:::

:::tabs-item{icon="i-simple-icons-markdown" label="Markdown"}

::browser-frame{title="The Alps"}
![mountains landscape](/mountains.webp)
::

:::

:::tabs-item{icon="i-lucide-eye" label="Preview"} ::::browser-frame{title="The Alps"} {.rounded-lg} :::: ::: ::

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