first commit

2025-07-19 13:59:44 +00:00
commit 2540bc968f
113 changed files with 21736 additions and 0 deletions
--- a/docs/content/2.concepts/7.nuxt.md
+++ b/docs/content/2.concepts/7.nuxt.md
@ -0,0 +1,90 @@
+---
+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.