91 lines
3.4 KiB
Markdown
91 lines
3.4 KiB
Markdown
---
|
||
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"}
|
||
|
||
::
|
||
```
|
||
:::
|
||
|
||
:::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.
|