docs: mention <DevOnly> component in api section

docs/3.api/1.components/1.dev-only.md

@@ -0,0 +1,42 @@
+---
+title: '<DevOnly>'
+description: Render components only during development with the <DevOnly> component.
+links:
+  - label: Source
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/app/components/dev-only.ts
+    size: xs
+---
+
+The `<DevOnly>` component renders its slot only during development. The content will not be included in production builds and tree-shaken.
+
+```vue
+<template>
+  <div>
+    <Sidebar />
+    <DevOnly>
+      <LazyDebugBar />
+    </DevOnly>
+  </div>
+</template>
+```
+
+## Slots
+
+- `#fallback`: if you ever require to have a replacement during production.
+
+```vue
+<template>
+  <div>
+    <Sidebar />
+    <DevOnly>
+      <!-- this component will only be rendered during development -->
+      <LazyDebugBar />
+      <!-- be sure to test these using `nuxt preview` -->
+      <template #fallback>
+        <div><!-- empty div for flex.justify-between --></div>
+      </template>
+    </DevOnly>
+  </div>
+</template>
+```