6.4 KiB
6.4 KiB
seo
| seo | ||||
|---|---|---|---|---|
|
::u-page-hero #title Write beautiful docs with Markdown
#description Ship fast, flexible, and SEO-optimized documentation with beautiful design out of the box.
Docus brings the best of the Nuxt ecosystem into one CLI.
#links :::u-button
color: neutral size: xl to: /getting-started/installation trailing-icon: i-lucide-arrow-right
Get started :::
:::u-button
color: neutral icon: simple-icons-github size: xl to: https://github.com/nuxtlabs/docus variant: outline
Star on GitHub :::
#headline :::u-button
size: sm to: https://content.nuxt.com/blog/docus-v3 variant: outline
Docus, the comeback → ::: ::
::u-page-section :::u-page-grid ::::u-page-card --- spotlight: true class: group col-span-2 lg:col-span-1 target: _blank to: https://nuxt.com --- :::::floating-nuxt :::::
#title
Built with [Nuxt 3]{.text-primary}
#description
Optimized by the most famous Vue framework. Docus gives you everything you need to build fast, performant, and SEO-friendly websites.
::::
::::u-page-card
---
spotlight: true
class: col-span-2
target: _blank
to: https://ui.nuxt.com/pro
---
:::::u-color-mode-image
---
height: 320
width: 859
alt: Beautiful visual powered by UI Pro
class: w-full h-80 object-cover rounded-lg
dark: /landing/dark/templates-ui-pro.webp
light: /landing/light/templates-ui-pro.webp
---
:::::
#title
Powered by [Nuxt UI Pro]{.text-primary}
#description
Beautiful out of the box, minimal by design but highly customizable. Docus leverages Nuxt UI Pro to give you the best docs writing experience with zero boilerplate, just focus on your content.
::::
::::u-page-card
---
spotlight: true
class: col-span-2
target: _blank
---
:::::tabs
::::::tabs-item{.mt-5 icon="i-lucide-eye" label="Preview"}
:::::::div{.flex.flex-col.gap-4}
::::::::note{.my-0}
Here's some additional information for you.
::::::::
::::::::tip{.my-0}
Here's a helpful suggestion.
::::::::
::::::::warning{.my-0}
Be careful with this action as it might have unexpected results.
::::::::
::::::::caution{.my-0}
This action cannot be undone.
::::::::
:::::::
::::::
::::::tabs-item
---
class: mt-5 mb-2 text-xs overflow-x-auto
icon: i-lucide-code
label: Code
---
```mdc
::note
Here's some additional information.
::
::tip
Here's a helpful suggestion.
::
::warning
Be careful with this action as it might have unexpected results.
::
::caution
This action cannot be undone.
::
```
::::::
:::::
#title
Enhanced Markdown syntax by [Nuxt Content]{.text-primary}
#description
The only thing you need to take care about is writing your content. Write your pages in Markdown and extend with MDC syntax to embed Nuxt UI or custom Vue components. Structure, routing, and rendering are handled for you.
::::
::::u-page-card
---
spotlight: true
class: col-span-2 md:col-span-1
target: _blank
---
:::::div{.bg-elevated.rounded-lg.p-3.overflow-x-auto}
```ts [app.config.ts]
export default defineAppConfig({
ui: {
colors: {
primary: 'green',
secondary: 'sky',
},
},
socials: {
x: 'https://x.com/nuxt_js',
nuxt: 'https://nuxt.com'
}
})
```
:::::
#title
Customize with [Nuxt App Config]{.text-primary}
#description
Update colors, social links, header logos and component styles globally using the `app.config.ts`, no direct code modifications required.
::::
::::u-page-card
---
spotlight: true
class: col-span-2 md:col-span-1 min-h-[450px]
target: _blank
---
:::::color-mode-switch
:::::
#title
[Nuxt Color]{.text-primary} mode
#description
Built-in dark mode provided, no configuration required.
::::
::::u-page-card
---
spotlight: true
class: col-span-2
target: _blank
---
:::::u-color-mode-image
---
height: 554
width: 859
alt: Built-in navigation and full-text search
class: rounded-lg
dark: /landing/dark/command-menu.png
format: webp
light: /landing/light/command-menu.png
loading: lazy
---
:::::
#title
Built-in navigation and [full-text search]{.text-primary}
#description
Only focus on ordering your content, Docus handles the search modal and auto-generates the side navigation for you.
::::
::::u-page-card
---
spotlight: true
class: col-span-2
target: _blank
---
:::::browser-frame
:video{.rounded-md controls loop playsinline src="https://res.cloudinary.com/nuxt/video/upload/v1747230893/studio/wzt9zfmdvk7hgmdx3cnt.mp4"}
:::::
#title
Collaborate on [Nuxt Studio]{.text-primary}
#description
Write and manage your content visually, with zero Markdown knowledge required. Let your non technical colleagues collaborate on the documentation and integrate Vue components without code skills.
::::
::::u-page-card
---
spotlight: true
class: col-span-2 lg:col-span-1
target: _blank
to: https://image.nuxt.com/
---
:::::div{.flex-1.flex.items-center.justify-center}
::::::u-color-mode-image
---
alt: Nuxt Image visual
class: w-[30%] lg:w-[70%] my-12 lg:my-0
dark: /landing/dark/nuxt-image.svg
light: /landing/light/nuxt-image.svg
---
::::::
:::::
#title
[Nuxt Image]{.text-primary} optimization
#description
Docus automatically converts Markdown images to use `<NuxtImg>` .
::::
::: ::