---
description: Build interactive and reusable elements with Nuxt components
title: Nuxt
navigation:
  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](https://nuxt.com/docs/guide/directory-structure/nuxt-config) to [components](https://nuxt.com/docs/guide/directory-structure/nuxt-config) or [plugins](https://nuxt.com/docs/guide/directory-structure/plugins).

::prose-note
You can use the Nuxt 4 [new directory structure](https://nuxt.com/docs/getting-started/upgrade#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](https://github.com/nuxt-modules/plausible?utm_source=nuxt.com\&utm_medium=aside-module\&utm_campaign=nuxt.com) to your documentation:

::prose-steps
### Run the following command

```bash [Terminal]
npm install @nuxtjs/plausible
```

### Enable the module in `nuxt.config.ts`

```ts [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](/essentials/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"}
  ```vue [components/content/BrowserFrame.vue]
  <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"}
  ```mdc
  ::browser-frame{title="The Alps"}
  ![mountains landscape](/mountains.webp)
  ::
  ```
  :::

  :::tabs-item{icon="i-lucide-eye" label="Preview"}
    ::::browser-frame{title="The Alps"}
    ![mountains landscape](/documentation/mountains.webp){.rounded-lg}
    ::::
  :::
::

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