---
title: "Nuxt"
description: "Build interactive and reusable elements with Nuxt components"
canonical_url: "https://docus.dev/en/concepts/nuxt"
---
# Nuxt

> Build interactive and reusable elements with Nuxt components

## Nuxt App

Docus is built on top of **Nuxt 4**, 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).

::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](https://nuxt.com/modules) just like in any Nuxt app.

To add [Vercel Web Analytics](https://vercel.com/docs/analytics) to your documentation:

::steps
### Install `@vercel/analytics`

```bash [Terminal]
npm install @vercel/analytics
```

### Enable Web Analytics in `nuxt.config.ts`

For Nuxt, you can turn on Vercel Analytics without extra setup by using the inline module declaration:

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  modules: ['@vercel/analytics/nuxt/module'],
})
```
::

## 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](https://docus.dev/en/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{icon="i-lucide-code" label="Code" className="my-5"}
```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](https://docus.dev/documentation/mountains.webp)
::
::
::

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

## Vue Pages

In addition to Markdown pages, you can also create Vue pages in the `pages/` directory.

```vue [pages/hello.vue]
<template>
  <div>
    <h1>Hello</h1>
  </div>
</template>
```

You can also use the `definePageMeta` function to set the page meta, such as using the `default` or `docs` layout, but also to define if the page should display the header and the footer:

```vue [pages/hello.vue]
<script setup lang="ts">
definePageMeta({
  layout: 'default',
  // Remove the header
  header: false,
  // Remove the footer
  footer: false,
})
</script>
```

## Custom Layouts

Docus uses two layouts:

- `default` layout for the landing page and custom Vue pages
- `docs` layout for the documentation pages

If you want to use a different layout, you can create one in the `app/layouts/` directory.

```vue [app/layouts/custom.vue]
<template>
  <main class="custom-layout">
    <slot />
  </main>
</template>
```


## Sitemap

See the full [sitemap](https://docus.dev/sitemap.md) for all pages.