first commit
This commit is contained in:
2
docs/content/1.getting-started/.navigation.yml
Normal file
2
docs/content/1.getting-started/.navigation.yml
Normal file
@ -0,0 +1,2 @@
|
||||
title: Getting Started
|
||||
icon: false
|
||||
54
docs/content/1.getting-started/2.introduction.md
Normal file
54
docs/content/1.getting-started/2.introduction.md
Normal file
@ -0,0 +1,54 @@
|
||||
---
|
||||
title: Introduction
|
||||
description: Welcome to Docus theme documentation.
|
||||
navigation:
|
||||
icon: i-lucide-house
|
||||
seo:
|
||||
title: Introduction
|
||||
description: Discover how to create, manage, and publish documentation
|
||||
effortlessly with Docus.
|
||||
---
|
||||
|
||||
Welcome to **Docus**, a fully integrated documentation solution built with [Nuxt UI Pro](https://ui.nuxt.com/pro).
|
||||
|
||||
## What is Docus?
|
||||
|
||||
Docus is a theme based on the [UI Pro documentation template](https://docs-template.nuxt.dev/). While the visual style comes ready out of the box, your focus should be on writing content using the Markdown and [MDC syntax](https://content.nuxt.com/docs/files/markdown#mdc-syntax) provided by [Nuxt Content](https://content.nuxt.com).
|
||||
|
||||
We use this theme across all our Nuxt module documentations, including:
|
||||
|
||||
::card-group
|
||||
:::card
|
||||
---
|
||||
icon: i-simple-icons-nuxtdotjs
|
||||
target: _blank
|
||||
title: Nuxt Image
|
||||
to: https://image.nuxt.com
|
||||
---
|
||||
The documentation of `@nuxt/image`
|
||||
:::
|
||||
|
||||
:::card
|
||||
---
|
||||
icon: i-simple-icons-nuxtdotjs
|
||||
target: _blank
|
||||
title: Nuxt Supabase
|
||||
to: https://supabase.nuxtjs.org
|
||||
---
|
||||
The documentation of `@nuxt/supabase`
|
||||
:::
|
||||
::
|
||||
|
||||
## Key Features
|
||||
|
||||
This theme includes a range of features designed to improve documentation management:
|
||||
|
||||
- **Powered by** [**Nuxt 3**](https://nuxt.com): Utilizes the latest Nuxt framework for optimal performance.
|
||||
- **Built with** [**Nuxt UI**](https://ui.nuxt.com) **and** [**Nuxt UI Pro**](https://ui.nuxt.com/pro): Integrates a comprehensive suite of UI components.
|
||||
- [**MDC Syntax**](https://content.nuxt.com/usage/markdown) **via** [**Nuxt Content**](https://content.nuxt.com): Supports Markdown with component integration for dynamic content.
|
||||
- [**Nuxt Studio**](https://content.nuxt.com/docs/studio) **Compatible**: Write and edit your content visually. No Markdown knowledge is required!
|
||||
- **Auto-generated Sidebar Navigation**: Automatically generates navigation from content structure.
|
||||
- **Full-Text Search**: Includes built-in search functionality for content discovery.
|
||||
- **Optimized Typography**: Features refined typography for enhanced readability.
|
||||
- **Dark Mode**: Offers dark mode support for user preference.
|
||||
- **Extensive Functionality**: Explore the theme to fully appreciate its capabilities.
|
||||
65
docs/content/1.getting-started/3.installation.md
Normal file
65
docs/content/1.getting-started/3.installation.md
Normal file
@ -0,0 +1,65 @@
|
||||
---
|
||||
title: Installation
|
||||
description: Get started with Docus.
|
||||
navigation:
|
||||
icon: i-lucide-download
|
||||
seo:
|
||||
description: Get started with Docus documentation theme.
|
||||
---
|
||||
|
||||
## Local development
|
||||
|
||||
::steps
|
||||
### Create your docs directory
|
||||
|
||||
Use the `docus` CLI to create a new Docus project in the `docs/` directory:
|
||||
|
||||
```bash [Terminal]
|
||||
npx docus init docs
|
||||
```
|
||||
|
||||
We recommend using the `npm` package manager.
|
||||
|
||||
### Start your docs server in development
|
||||
|
||||
Move to the `docs/` directory and start your docs server in development mode:
|
||||
|
||||
```bash [Terminal]
|
||||
npm run dev
|
||||
```
|
||||
|
||||
A local preview of your documentation will be available at <http://localhost:4000>
|
||||
|
||||
### Write your documentation
|
||||
|
||||
Head over the [Edition](/concepts/edition) section to learn how to write your documentation.
|
||||
::
|
||||
|
||||
## Online Edition with [Nuxt Studio](https://content.nuxt.com/studio)
|
||||
|
||||
::prose-steps
|
||||
### Create a new project on [Nuxt Studio](https://nuxt.studio)
|
||||
|
||||
From your user or team dashboard, click the `New project` button then choose `Start from a template` and select **Docus.** Clone it on your GitHub personal account or any organisation of your choice.
|
||||
|
||||
### Deploy in one click
|
||||
|
||||
Once your project has been created and you're in the project dashboard, navigate to the `Deploy` section, choose the `GitHub Pages` tab and set your [Nuxt UI Pro license](https://ui.nuxt.com/pro/pricing) (`NUXT_UI_PRO_LICENSE` ) in the environment variables then click on the **Deploy** button.
|
||||
|
||||
:::prose-note
|
||||
---
|
||||
to: https://content.nuxt.com/docs/studio/setup#enable-the-full-editing-experience
|
||||
---
|
||||
This is a one click static deployment available with [GitHub Pages](https://docs.github.com/en/pages/getting-started-with-github-pages/creating-a-github-pages-site) but you can also handle deployment yourself and use the `Selfhosted` tab.
|
||||
:::
|
||||
|
||||
### Write your documentation in the editor
|
||||
|
||||
Once the deployment is achieved, you'll be able to display the preview of your documentation. You can browse your content pages to edit them or create new ones.
|
||||
|
||||
:video{controls loop poster="https://res.cloudinary.com/nuxt/video/upload/v1747230893/studio/wzt9zfmdvk7hgmdx3cnt.jpg" src="https://res.cloudinary.com/nuxt/video/upload/v1747230893/studio/wzt9zfmdvk7hgmdx3cnt.mp4"}
|
||||
::
|
||||
|
||||
::prose-tip{to="https://content.nuxt.com/docs/studio/debug"}
|
||||
If you want to try Docus and Nuxt Studio in develoment mode without an UI Pro license, you can check the Nuxt Content documentation for local setup with Nuxt Studio.
|
||||
::
|
||||
52
docs/content/1.getting-started/4.project-structure.md
Normal file
52
docs/content/1.getting-started/4.project-structure.md
Normal file
@ -0,0 +1,52 @@
|
||||
---
|
||||
navigation:
|
||||
icon: i-lucide-folder-tree
|
||||
title: Project Structure
|
||||
---
|
||||
|
||||
Docus provides a ready-to-use [documentation website starter](https://github.com/nuxtlabs/docus/tree/main/.starter).
|
||||
|
||||
This is the minimal directory structure to get an up and running Docus website.
|
||||
|
||||
```bash
|
||||
content/
|
||||
index.md
|
||||
public/
|
||||
favicon.ico
|
||||
package.json
|
||||
```
|
||||
|
||||
### `content/` directory
|
||||
|
||||
This is where you [write pages](/concepts/edition) in Markdown.
|
||||
|
||||
### `public/` directory
|
||||
|
||||
Files contained within the `public/` directory are served at the root and are not modified by the build process of your documentation. This is where you can locate your medias.
|
||||
|
||||
### `package.json`
|
||||
|
||||
This file contains all the dependencies and scripts for your application. The `package.json` of a Docus application si really minimal and looks like:
|
||||
|
||||
```json [package.json]
|
||||
{
|
||||
"name": "docus-starter",
|
||||
"scripts": {
|
||||
"dev": "docus dev",
|
||||
"build": "docus build"
|
||||
},
|
||||
"devDependencies": {
|
||||
"docus": "latest"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### `app.config.ts`
|
||||
|
||||
*This file is not mandatory to start a Docus application.*
|
||||
|
||||
This is where you can [configure Docus](/concepts/configuration) to fit your branding, handle SEO and adapt links and socials.
|
||||
|
||||
::prose-tip{to="/concepts/nuxt"}
|
||||
Docus uses a layer system, you can go further and use any feature or file of a classical Nuxt project from `nuxt.config.ts` to `app/components` or `server/` directory.
|
||||
::
|
||||
129
docs/content/1.getting-started/5.studio.md
Normal file
129
docs/content/1.getting-started/5.studio.md
Normal file
@ -0,0 +1,129 @@
|
||||
---
|
||||
title: Web Editor
|
||||
description: Build your documentation using Nuxt Studio web editor
|
||||
navigation:
|
||||
icon: i-lucide-mouse-pointer-2
|
||||
---
|
||||
|
||||
## **Introduction**
|
||||
|
||||
The [Nuxt Studio](https://nuxt.studio) **web editor** is a browser-based visual interface for creating, editing, and reviewing your documentation. It provides a preview experience while keeping your work in sync with your Git repository.
|
||||
|
||||
:video{controls loop src="https://res.cloudinary.com/nuxt/video/upload/v1747230893/studio/wzt9zfmdvk7hgmdx3cnt.mp4"}
|
||||
|
||||
::prose-tip{to="https://content.nuxt.com/studio"}
|
||||
Learn more about Nuxt Studio in the Nuxt Content documentation.
|
||||
::
|
||||
|
||||
## **Web Editor vs. CLI**
|
||||
|
||||
The **web editor** of [Nuxt Studio](https://nuxt.studio) allows you to manage your documentation entirely from your browser. There is no need for local development tools or terminal commands. It’s ideal for maintaining your docs in one centralised place, with an easy tool without any Markdown skills required.
|
||||
|
||||
The **CLI (Command Line Interface)**, on the other hand, is a local tool designed for developers who prefer working in their own IDE.
|
||||
|
||||
::prose-note
|
||||
Both tools are fully integrated with Git, so you can switch between them as needed. Team members can choose whichever method suits their workflow best.
|
||||
::
|
||||
|
||||
## **Two distinct editors**
|
||||
|
||||
Nuxt Studio offers a versatile workspace for both developers and content writers, giving them the freedom to choose between two distinct editors for content creation and management: the **Markdown editor** and the **Visual editor**.
|
||||
|
||||
You can select your favorite editor from the settings page of your project.
|
||||
|
||||
::prose-note
|
||||
Each editor serves its own purpose, some users are used to Markdown edition, while others prefer a non-technical, visual approach. At the end, **Markdown syntax is the final output** for both editors.
|
||||
::
|
||||
|
||||
## **Markdown editor**
|
||||
|
||||
|
||||
|
||||
The Markdown editor in Nuxt Studio provides full control over your content, allowing you to write directly you documentation in **Markdown** and integrate Vue components with the [MDC syntax](https://content.nuxt.com/docs/files/markdown#mdc-syntax).
|
||||
|
||||
When your file is saved with the Markdown editor, the content is stored exactly as you've written it, preserving all specific syntax and formatting. This editor is ideal for users comfortable with Markdown who want precise control over the layout and structure of their content.
|
||||
|
||||
## **Visual editor**
|
||||
|
||||
|
||||
|
||||
The Nuxt Studio editor is heavily inspired by Notion, well known for its intuitive design and flexibility. Much like a standard text editor, the Studio editor is designed to be familiar and easy to use.
|
||||
|
||||
However, it stands out with its additional features that improve the writing experience:
|
||||
|
||||
### **Toolbar**
|
||||
|
||||
Highlight your text to reveal the toolbar, giving you access to all the standard text editing features provided by the [Markdown syntax](/essentials/markdown-syntax):
|
||||
|
||||
- Title formatting
|
||||
- Bold
|
||||
- Italic
|
||||
- Strike-through
|
||||
- Code
|
||||
- Link
|
||||
- Class
|
||||
- Bullet list
|
||||
- Numerated list
|
||||
|
||||
### **The** `/` **shortcut**
|
||||
|
||||
Simply type `/` anywhere in the editor to access all Studio features.
|
||||
|
||||
#### **Formatting features**
|
||||
|
||||
- Title formatting
|
||||
- Line break
|
||||
- Horizontal rule
|
||||
- Code-block
|
||||
- Paragraph
|
||||
- Bold & italic
|
||||
|
||||
#### **Components**
|
||||
|
||||
One of Studio's standout features is its ability to integrate and customize any complex component directly within the editor.
|
||||
|
||||
In other terms, all [Nuxt UI components](/essentials/components) are usable and can be integrated directly from the editor. An editor can also tweak the component properties, slots and styles.
|
||||
|
||||
::prose-note
|
||||
You can also create custom components and let the user integrate them from the visual editor.
|
||||
::
|
||||
|
||||
Just type `/` to access the list of all the components available.
|
||||
|
||||
#### **Images**
|
||||
|
||||
Using the `/`shortcut, you can quickly insert an image by selecting the `Image` option. A modal will open to let you choose the media you want to insert.
|
||||
|
||||
From the media modal, you can set the **alt attribute** for SEO and accessibility purpose.
|
||||
|
||||
#### **Videos**
|
||||
|
||||
Using the `/` shortcut, you can quickly insert a video by selecting the `Video` choice and filling up the Video URL.
|
||||
|
||||
As soon as a video is added, a tab will automatically open with all the props field **available by default**, for you to fill out the URL and customize your media.
|
||||
|
||||
## **Live Preview**
|
||||
|
||||
|
||||
|
||||
Once your documentation is deployed, it provides a live preview feature that lets you instantly see updates to your project.
|
||||
|
||||
We're using your production website to override contents and display the new visual. This is why we need the URL to be set in the **deploy** section.
|
||||
|
||||
When you are editing your website with Studio, the live preview can be displayed on the right part of your screen. You get an instant feedback when typing. It syncs the preview based on your draft updates.
|
||||
|
||||
## **Making Changes**
|
||||
|
||||
To edit your documentation:
|
||||
|
||||
1. **Browse files** using the file explorer.
|
||||
2. **Open a file** by clicking on it.
|
||||
3. **Edit content** in either visual or Markdown mode. All edits are automatically saved as drafts.
|
||||
4. **Preview your changes** to see how they’ll appear when published.
|
||||
|
||||
## **Publishing Changes**
|
||||
|
||||
When you’re ready to publish:
|
||||
|
||||
- Click the **Publish** button in the top-right corner of the editor.
|
||||
- Your changes will be pushed directly to your deployment branch and go live immediately.
|
||||
24
docs/content/1.getting-started/6.migration.md
Normal file
24
docs/content/1.getting-started/6.migration.md
Normal file
@ -0,0 +1,24 @@
|
||||
---
|
||||
title: Migration
|
||||
description: " How to migrate your documentation from an existing Markdown
|
||||
solution to Docus"
|
||||
navigation:
|
||||
icon: i-lucide-replace
|
||||
---
|
||||
|
||||
## **Migrating to Docus**
|
||||
|
||||
Already using a Markdown-based solution for your documentation? Whether it’s **Docus v1**, the **Nuxt UI Pro docs template**, or another static site setup, migrating to Docus is simple and straightforward.
|
||||
|
||||
Docus offers a clean and maintainable solution with a single dependency: the Docus library itself. There’s no need to manage multiple .dependencies With everything built-in and maintained together, keeping your documentation up to date is easier than ever.
|
||||
|
||||
To migrate, just move your existing Markdown files into the `content/` directory of the Docus starter.
|
||||
|
||||
From there, you have two scenarios:
|
||||
|
||||
- **If your current docs already use Nuxt Content and the MDC syntax**, make sure the components used in your content exist in Nuxt UI. If any components are missing, you can easily create your own custom ones.
|
||||
- **If you’re using standard Markdown**, you can copy your files as is. Then, enhance your documentation progressively using the [built-in components](/essentials/components) provided by Nuxt UI.
|
||||
|
||||
Once your content has been moved to the `content/` folder, you can go through the [configuration section](/concepts/configuration) to easily customize your app.
|
||||
|
||||
Docus is designed to focus on writing content, so if you're already using Markdown, you can easily switch to it.
|
||||
1
docs/content/2.concepts/.navigation.yml
Normal file
1
docs/content/2.concepts/.navigation.yml
Normal file
@ -0,0 +1 @@
|
||||
title: Core Concepts
|
||||
123
docs/content/2.concepts/2.edition.md
Normal file
123
docs/content/2.concepts/2.edition.md
Normal file
@ -0,0 +1,123 @@
|
||||
---
|
||||
title: Edition
|
||||
description: Learn how to write your documentation.
|
||||
navigation:
|
||||
icon: i-lucide-pencil
|
||||
seo:
|
||||
description: Learn how to write your documentation with Docus and Nuxt Content.
|
||||
---
|
||||
|
||||
Docus lets you write all your content in **Markdown** but also provide the ability to integrate **components** with the [MDC syntax](https://content.nuxt.com/docs/files/markdown#mdc-syntax) provided by **Nuxt Content**.
|
||||
|
||||
## Landing page
|
||||
|
||||
The landing corresponds to the `index.md` file. `MDC` syntax supercharges Markdown with the ability to use Vue components including slots and props inside your `.md` files.
|
||||
|
||||
::prose-tip{to="/essentials/components"}
|
||||
Check the list of Nuxt UI prose components you can integrate in your Markdown.
|
||||
::
|
||||
|
||||
### Components
|
||||
|
||||
MDC provides a dedicated syntax to easily use Vue components in your content:
|
||||
|
||||
```mdc [content/index.md]
|
||||
:::u-page-feature
|
||||
:::
|
||||
```
|
||||
|
||||
### Slots
|
||||
|
||||
Slots can receive text content or other components.
|
||||
|
||||
- **Default slot** is rendered directly inside the component or with `#default`.
|
||||
- **Named slots** are defined using the `#` symbol followed by the slot name.
|
||||
|
||||
```mdc [index.md]
|
||||
:::u-page-feature
|
||||
#title
|
||||
Nuxt 3
|
||||
|
||||
#description
|
||||
Powered by Nuxt 3 for optimal performances and SEO.
|
||||
:::
|
||||
```
|
||||
|
||||
### Props
|
||||
|
||||
Props are passed using inline syntax or YAML frontmatter within the component block:
|
||||
|
||||
::prose-tabs
|
||||
:::prose-tabs-item{icon="i-lucide-braces" label="Inline"}
|
||||
```mdc [index.md]
|
||||
:::u-page-feature{icon="i-simple-icons-nuxt" to="https://nuxt.com"}
|
||||
#title
|
||||
Nuxt 3
|
||||
|
||||
#description
|
||||
Powered by Nuxt 3 for optimal performances and SEO.
|
||||
:::
|
||||
```
|
||||
:::
|
||||
|
||||
:::prose-tabs-item{icon="i-lucide-code" label="YAML"}
|
||||
```mdc [index.md]
|
||||
:::u-page-feature
|
||||
---
|
||||
icon: i-simple-icons-nuxt
|
||||
to: https://nuxt.com
|
||||
---
|
||||
#title
|
||||
Nuxt 3
|
||||
|
||||
#description
|
||||
Powered by Nuxt 3 for optimal performances and SEO.
|
||||
:::
|
||||
```
|
||||
:::
|
||||
::
|
||||
|
||||
::prose-note{to="https://content.nuxt.com"}
|
||||
Check the Nuxt Content documentation for more details about the MDC syntax
|
||||
::
|
||||
|
||||
## Documentation pages
|
||||
|
||||
::prose-tip
|
||||
There is a one to one relationship between content files and pages on your site. Each Markdown page in the `content/` folder maps directly to a page route.
|
||||
::
|
||||
|
||||
To get started, simply edit or add a `.md` files in the [`content/`](https://content.nuxt.com/usage/content-directory) directory to have your pages updated. Docus will handle routing, navigation, and full-text search automatically.
|
||||
|
||||
### Frontmatter
|
||||
|
||||
Every file of the `content/` folder starts with the `---` syntax on top of the page. It corresponds to the frontmatter of your file which is a convention of Markdown-based CMS to provide meta-data to pages.
|
||||
|
||||
::prose-tabs
|
||||
:::prose-tabs-item{icon="i-lucide-code" label="Code"}
|
||||
```md [content/getting-started/edition.md]
|
||||
---
|
||||
title: 'Edition'
|
||||
description: 'Learn how to write your documentation.'
|
||||
---
|
||||
|
||||
<!-- Content of the page in pure Markdown -->
|
||||
```
|
||||
:::
|
||||
|
||||
:::prose-tabs-item{icon="i-lucide-eye" label="Preview"}
|
||||
{.rounded-lg}
|
||||
:::
|
||||
::
|
||||
|
||||
### Parameters
|
||||
|
||||
Pages in the `/content` directory are defined as [page](https://content.nuxt.com/docs/collections/types#page-type) type in Nuxt Content. They all follow the same structure with existing frontmatter keys:
|
||||
|
||||
| | | | |
|
||||
| ------------- | ---------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- | - |
|
||||
| Key | Type | Description | |
|
||||
| `title` | `string` | Title of the page. Displayed on top of the page. Used as SEO title if `seo` key is not provided. | |
|
||||
| `description` | `string` | Description of the page. Displayed bellow the title on top of the page. Used as SEO description if `seo` key is not provided. | |
|
||||
| `navigation` | `boolean` | Define if the page is included in left aside navigation. | |
|
||||
| `seo` | `{ title: string, description: string }` | SEO metas of your page. | |
|
||||
191
docs/content/2.concepts/3.configuration.md
Normal file
191
docs/content/2.concepts/3.configuration.md
Normal file
@ -0,0 +1,191 @@
|
||||
---
|
||||
title: Configuration
|
||||
navigation:
|
||||
icon: i-lucide-settings
|
||||
description: "Customize your Docus documentation from the Nuxt application
|
||||
configuration file. "
|
||||
seo:
|
||||
description: Customize your Docus documentation from Nuxt application configuration file.
|
||||
---
|
||||
|
||||
Docus allows you to configure your documentation through the [app.config.ts](https://nuxt.com/docs/guide/directory-structure/app-config) file provided by Nuxt.
|
||||
|
||||
## SEO
|
||||
|
||||
Technical SEO is tricky and boring. Docus offers a solid, opt-in default setup that works out of the box, while giving you full control to customize your SEO metadata, from page titles to social sharing images.
|
||||
|
||||
### Metadata
|
||||
|
||||
Docus offers flexible `SEO` metadata configuration, allowing you to easily override values globally or on a per-page basis.
|
||||
|
||||
#### Global configuration
|
||||
|
||||
Define default `SEO` metas for your entire documentation in `app.config.ts`. These values will be used as fallbacks across pages that don’t specify their own in the front-matter as described in next section.
|
||||
|
||||
You can also configure your `site.name` value from your `nuxt.config.ts` file, default is based on your `package.json` name.
|
||||
|
||||
::prose-code-group
|
||||
```ts [app.config.ts]
|
||||
export default defineAppConfig({
|
||||
seo: {
|
||||
// Default to `%s - ${site.name}`
|
||||
titleTemplate: ''
|
||||
// Default to package.json name
|
||||
title: '',
|
||||
// Default to package.json description
|
||||
description: ''
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
```ts [nuxt.config.ts]
|
||||
export default defineNuxtConfig({
|
||||
site: {
|
||||
name: 'Docus',
|
||||
},
|
||||
})
|
||||
```
|
||||
::
|
||||
|
||||
#### Per-page configuration
|
||||
|
||||
Each Markdown file in the `content/` directory starts with a frontmatter block (`---`). You can define `SEO` metadata per page by using the `seo` key:
|
||||
|
||||
```md [content/concepts/configuration.md]
|
||||
---
|
||||
seo:
|
||||
title: 'Configuration'
|
||||
description: 'Customize your Docus documentation from the Nuxt application configuration file.'
|
||||
---
|
||||
|
||||
<!-- Page content -->
|
||||
```
|
||||
|
||||
::prose-tip{to="/concepts/edition#frontmatter"}
|
||||
For more details on front-matter, see the edition guide.
|
||||
::
|
||||
|
||||
### **Social sharing (OG) image**
|
||||
|
||||
When you share a link of your documentation on social media or some chat platforms, the link will be **unfurled**, in other terms it gives a glimpse of what someone linked (displaying a title, description, and an image). All of these are powered by the **Open Graph Protocol**.
|
||||
|
||||
#### Documentation pages
|
||||
|
||||
We're using [Nuxt OG Image](https://nuxtseo.com/docs/og-image/getting-started/introduction) under the hood to generate OG image for each documentation page based on the provided title and description. For example, the OG image for the current page is:
|
||||
|
||||
{.rounded-lg}
|
||||
|
||||
#### Landing page
|
||||
|
||||
Same as the documentation pages, the landing page uses the same OG image generator based on the provided title and description.
|
||||
|
||||
{.rounded-lg}
|
||||
|
||||
However, if you want to customize the OG image for your landing page, you can do so by adding a **absolute** path to an image in the the `seo.ogImage` key of your frontmatter.
|
||||
|
||||
```md [content/index.md]
|
||||
---
|
||||
seo:
|
||||
ogImage: '/social-card.png'
|
||||
---
|
||||
```
|
||||
|
||||
We recommend using a **1280×640** image for optimal display on social platforms.
|
||||
|
||||
::prose-tip
|
||||
OG images must be served with absolute URLs. By default, the site URL is inferred from your deployment platform, but you can override it by setting the `NUXT_SITE_URL` environment variable.
|
||||
::
|
||||
|
||||
## Header
|
||||
|
||||
Configure your documentation site’s `title` or `logo` :
|
||||
|
||||
```ts [app.config.ts]
|
||||
export default defineAppConfig({
|
||||
header: {
|
||||
// Title to display if no logo
|
||||
title: '',
|
||||
// Logo configuration
|
||||
logo: {
|
||||
alt: '',
|
||||
// Light mode
|
||||
light: '',
|
||||
// Dark mode
|
||||
dark: ''
|
||||
},
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
## Socials Links
|
||||
|
||||
Add your social media links in the footer using a `Record<string, string>` where the key matches an icon from [Simple Icons](https://simpleicons.org/) library.
|
||||
|
||||
```ts [app.config.ts]
|
||||
export default defineAppConfig({
|
||||
socials: {
|
||||
x: 'https://x.com/nuxt_js',
|
||||
discord: 'https://discord.com/invite/ps2h6QT',
|
||||
nuxt: 'https://nuxt.com',
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## Table of Contents
|
||||
|
||||
You can customize the table of content on the right sidebar of each page.
|
||||
|
||||
```ts [app.config.ts]
|
||||
export default defineAppConfig({
|
||||
toc: {
|
||||
// Rename the title of the table of contents
|
||||
title: 'On this page',
|
||||
// Add a bottom section to the table of contents
|
||||
bottom: {
|
||||
title: 'Community',
|
||||
links: [{
|
||||
icon: 'i-lucide-book-open',
|
||||
label: 'Nuxt UI Pro docs',
|
||||
to: 'https://ui.nuxt.com/getting-started/installation/pro/nuxt',
|
||||
target: '_blank'
|
||||
}, {
|
||||
icon: 'i-simple-icons-nuxtdotjs',
|
||||
label: 'Purchase a license',
|
||||
to: 'https://ui.nuxt.com/pro/purchase',
|
||||
target: '_blank'
|
||||
}]
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## GitHub Integration
|
||||
|
||||
Docus reads your `.git/` folder to get the `url` and `branch` of your repository to add:
|
||||
|
||||
- GitHub icon in the header and footer
|
||||
- `Edit this page` and `Report an issue` links in the footer of each page.
|
||||
|
||||
You can customize the `url`, `branch` and `rootDir` of your docs application by adding the following configuration to your `app.config.ts` file:
|
||||
|
||||
```ts [app.config.ts]
|
||||
export default defineAppConfig({
|
||||
github: {
|
||||
url: 'https://github.com/nuxt-ui-pro/docus',
|
||||
branch: 'main',
|
||||
rootDir: 'docs'
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
If you don't want to use GitHub, you can set the `github` key to `false` to disable the GitHub integration.
|
||||
|
||||
```ts [app.config.ts]
|
||||
export default defineAppConfig({
|
||||
github: false
|
||||
})
|
||||
```
|
||||
|
||||
::prose-tip{to="/getting-started/studio"}
|
||||
Those configurations can also be handled in Studio editor, give it a try!
|
||||
::
|
||||
123
docs/content/2.concepts/4.theme.md
Normal file
123
docs/content/2.concepts/4.theme.md
Normal file
@ -0,0 +1,123 @@
|
||||
---
|
||||
navigation:
|
||||
icon: i-lucide-paint-roller
|
||||
title: Theme
|
||||
description: Custom the appearance of your Docus documentation thanks to Nuxt UI
|
||||
flexible theming.
|
||||
---
|
||||
|
||||
Docus is built on top of Nuxt UI and takes full advantage of Tailwind CSS v4, CSS variables. The Tailwind Variants API offers a flexible and scalable theming system.
|
||||
|
||||
::prose-tip{to="https://ui.nuxt.com/getting-started/theme"}
|
||||
For a full overview of Nuxt UI theming, check out the Nuxt UI documentation.
|
||||
::
|
||||
|
||||
## Override with `@theme`
|
||||
|
||||
You can customize your theme with CSS variables inside a [`@theme`](https://tailwindcss.com/docs/functions-and-directives#theme-directive) directive to define your project's custom design tokens, like fonts, colors, and breakpoints
|
||||
|
||||
You can override this theme by creating your own `main.css` file in your application.
|
||||
|
||||
::warning
|
||||
To ensure a good behaviour with Docus, you must always start by importing `tailwindcss` and `ui-pro` but also source `content/` files and `app.config.ts` :
|
||||
|
||||
```css [app/assets/css/main.css]
|
||||
@import "tailwindcss";
|
||||
@import "@nuxt/ui-pro";
|
||||
|
||||
@source "../../../content/**/*";
|
||||
@source "../../../node_modules/docus/app/**/*";
|
||||
```
|
||||
::
|
||||
|
||||
This way you can override your theme:
|
||||
|
||||
::code-group
|
||||
```css [assets/css/main.css]
|
||||
@import "tailwindcss";
|
||||
@import "@nuxt/ui-pro";
|
||||
|
||||
@source "../../../content/**/*";
|
||||
@source "../../../node_modules/docus/app/**/*";
|
||||
|
||||
@theme static {
|
||||
--font-sans: 'Public Sans', sans-serif;
|
||||
|
||||
--breakpoint-3xl: 1920px;
|
||||
|
||||
--color-green-50: #EFFDF5;
|
||||
--color-green-100: #D9FBE8;
|
||||
--color-green-200: #B3F5D1;
|
||||
--color-green-300: #75EDAE;
|
||||
--color-green-400: #00DC82;
|
||||
--color-green-500: #00C16A;
|
||||
--color-green-600: #00A155;
|
||||
--color-green-700: #007F45;
|
||||
--color-green-800: #016538;
|
||||
--color-green-900: #0A5331;
|
||||
--color-green-950: #052E16;
|
||||
}
|
||||
```
|
||||
|
||||
```ts [nuxt.config.ts]
|
||||
export default defineNuxtConfig({
|
||||
modules: ['@nuxt/ui-pro'],
|
||||
css: ['~/assets/css/main.css']
|
||||
})
|
||||
```
|
||||
::
|
||||
|
||||
## Colors
|
||||
|
||||
Docus uses pre-configured color aliases that are used to style components and power the `color` props across the UI.
|
||||
|
||||
Each badge below represents a default alias:
|
||||
|
||||
- :u-badge{label="primary" variant="outline"} → Main brand color, used as the default color for components :br [(default: green)]{.text-xs.text-muted}
|
||||
- :u-badge{color="secondary" label="secondary" variant="outline"} → Secondary color to complement the primary color :br [(default: blue)]{.text-xs.text-muted}
|
||||
- :u-badge{color="success" label="success" variant="outline"} → Used for success states :br [(default: green)]{.text-xs.text-muted}
|
||||
- :u-badge{color="info" label="info" variant="outline"} → Used for informational states :br [(default: blue)]{.text-xs.text-muted}
|
||||
- :u-badge{color="warning" label="warning" variant="outline"} → Used for warning states :br [(default: yellow)]{.text-xs.text-muted}
|
||||
- :u-badge{color="error" label="error" variant="outline"} → Used for form error validation states :br [(default: red)]{.text-xs.text-muted}
|
||||
- :u-badge{color="neutral" label="neutral" variant="outline"} → Neutral color for backgrounds, text, etc. :br [(default: slate)]{.text-xs.text-muted}
|
||||
|
||||
You can customize these colors globally by updating the `app.config.ts` file under the `ui.colors` key:
|
||||
|
||||
```ts [app.config.ts]
|
||||
export default defineAppConfig({
|
||||
ui: {
|
||||
colors: {
|
||||
primary: 'blue',
|
||||
neutral: 'zinc'
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## Components
|
||||
|
||||
Beyond colors, all [Nuxt UI components](https://ui.nuxt.com/components) can be themed globally via `app.config.ts`.
|
||||
|
||||
You can override any component’s appearance by using the same structure as the component’s internal theme object (displayed at [the end of each component page](https://ui.nuxt.com/components/card#theme)).
|
||||
|
||||
For example, to change the font weight of all buttons:
|
||||
|
||||
```ts [app.config.ts]
|
||||
export default defineAppConfig({
|
||||
ui: {
|
||||
button: {
|
||||
slots: {
|
||||
base: 'font-bold'
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
In this example, the `font-bold` class will override the default `font-medium` class on all buttons.
|
||||
|
||||
::prose-note{to="https://ui.nuxt.com/components/button#theme"}
|
||||
To explore the available theme options for each component, refer to the **Theme** section in their respective Nuxt UI documentation page.
|
||||
::
|
||||
|
||||
##
|
||||
131
docs/content/2.concepts/5.customization.md
Normal file
131
docs/content/2.concepts/5.customization.md
Normal file
@ -0,0 +1,131 @@
|
||||
---
|
||||
navigation:
|
||||
icon: i-lucide-pen-tool
|
||||
title: Customization
|
||||
description: Learn how to override built-in components in Docus to customize
|
||||
your documentation.
|
||||
---
|
||||
|
||||
Docus is built on top of Nuxt 3 which offers a flexible component layer system that allows you to override some part of the UI by redefining specific components in your own app. This makes it easy to fully customize the visual appearance and behavior of your documentation without touching the core theme.
|
||||
|
||||
To override a component, simply create a Vue file with the same name in the `components/` directory. Docus will automatically use your version instead of the default one.
|
||||
|
||||
## App Header
|
||||
|
||||
You can customize different parts of the header by overriding the following components:
|
||||
|
||||
### `AppHeaderLogo`
|
||||
|
||||
To replace the default logo in the header, create the `components/AppHeaderLogo.vue` file. Your component will replace the default one provided by Docus theme.
|
||||
|
||||
{.rounded-lg.border.border-accented}
|
||||
|
||||
::u-button
|
||||
---
|
||||
color: neutral
|
||||
icon: i-lucide-code-xml
|
||||
to: https://github.com/nuxtlabs/docus/blob/app/components/app/AppHeaderLogo.vue
|
||||
variant: link
|
||||
---
|
||||
Default component code
|
||||
::
|
||||
|
||||
### `AppHeaderCTA`
|
||||
|
||||
To customize the call-to-action area in the header (for example, adding a “Get Started” button or external link), override the `components/AppHeaderCTA.vue` component.
|
||||
|
||||
{.rounded-lg.border.border-accented}
|
||||
|
||||
::prose-note
|
||||
---
|
||||
to: https://github.com/nuxtlabs/docus/blob/docs/components/AppHeaderCTA.vue
|
||||
---
|
||||
By default this components is empty but you can have a look at how we're overriding it on Docus documentation itself.
|
||||
::
|
||||
|
||||
### `AppHeaderCenter`
|
||||
|
||||
To customize the center area in the header, override the `components/AppHeaderCenter.vue` component. Your component will replace the search bar provided by Docus theme.
|
||||
|
||||
{.rounded-lg.border.border-accented}
|
||||
|
||||
::u-button
|
||||
---
|
||||
color: neutral
|
||||
icon: i-lucide-code-xml
|
||||
to: https://github.com/nuxtlabs/docus/blob/app/components/app/AppHeaderCenter.vue
|
||||
variant: link
|
||||
---
|
||||
Default component code
|
||||
::
|
||||
|
||||
### `AppHeaderBody`
|
||||
|
||||
By default, when you open the menu on mobile view, Docus is displaying your `content/` folder tree as a menu with the [ContentNavigation](https://ui.nuxt.com/components/content-navigation) component. You can override this menu with the `components/AppHeaderBody.vue` component and fill the menu body (under the header) in mobile.
|
||||
|
||||
{.rounded-lg.border.border-accented}
|
||||
|
||||
::u-button
|
||||
---
|
||||
color: neutral
|
||||
icon: i-lucide-code-xml
|
||||
to: https://github.com/nuxtlabs/docus/blob/app/components/app/AppHeaderBody.vue
|
||||
variant: link
|
||||
---
|
||||
Default component code
|
||||
::
|
||||
|
||||
## Docs
|
||||
|
||||
You can also customize header and both asides of the documentation pages.
|
||||
|
||||
### `DocsPageHeaderLinks`
|
||||
|
||||
In the header right side of your documentation page, Docus default behaviour is displaying a dropdown with quick actions related to the current page’s Markdown source. It allows the reader of the documentation to:
|
||||
|
||||
- **Copy a direct link** to the raw `.md` file to the clipboard.
|
||||
- **View the Markdown source** in a new browser tab.
|
||||
- **Open the page’s content in ChatGPT or Claude**, pre-filled with a prompt to analyze the Markdown file.
|
||||
|
||||
These actions are especially useful for contributors, readers, or AI-assisted workflows but you can create your own `components/DocsPageHeaderLinks.vue` component to override it.
|
||||
|
||||
{.rounded-lg.border.border-accented}
|
||||
|
||||
::u-button
|
||||
---
|
||||
color: neutral
|
||||
icon: i-lucide-code-xml
|
||||
to: https://github.com/nuxtlabs/docus/blob/app/components/docs/DocsHeaderRight.vue
|
||||
variant: link
|
||||
---
|
||||
Default component code
|
||||
::
|
||||
|
||||
### `DocsAsideRightBottom`
|
||||
|
||||
To customize bottom part of the right aside of the documentation pages. You can create the`components/DocsAsideRightBottom.vue` component. Your component will replace the default bottom table of content provided by Docus theme.
|
||||
|
||||
{.rounded-lg.border.border-accented}
|
||||
|
||||
::u-button
|
||||
---
|
||||
color: neutral
|
||||
icon: i-lucide-code-xml
|
||||
to: https://github.com/nuxtlabs/docus/blob/app/components/docs/DocsAsideRightBottom.vue
|
||||
variant: link
|
||||
---
|
||||
Default component code
|
||||
::
|
||||
|
||||
### `DocsAsideLeftTop`
|
||||
|
||||
To customize top part of the left aside of the documentation pages. You can create the`components/DocsAsideLeftTop.vue` component.
|
||||
|
||||
{.rounded-lg.border.border-accented}
|
||||
|
||||
::prose-note
|
||||
---
|
||||
to: https://github.com/nuxt/image/blob/docs/docus/docus/app/components/DocsAsideLeftTop.vue
|
||||
---
|
||||
By default this components is empty but you can have a look at how we're overriding it on Nuxt Image documentation itself.
|
||||
::
|
||||
44
docs/content/2.concepts/6.llms.md
Normal file
44
docs/content/2.concepts/6.llms.md
Normal file
@ -0,0 +1,44 @@
|
||||
---
|
||||
title: LLMs Integration
|
||||
description: Docus generate AI-ready content files using Nuxt LLMs module
|
||||
navigation:
|
||||
icon: i-lucide-message-circle-code
|
||||
---
|
||||
|
||||
Docus integrates `nuxt-llms` by default to prepare your content for Large Language Models (LLMs). All your documentation pages are injected and `/llms.txt` and `/llms-full.txt` files are automatically generated and pre-rendered.
|
||||
|
||||
::prose-note{to="/llms.txt"}
|
||||
Have a check at the `/llms.txt` file generated for Docus documentation itself.
|
||||
::
|
||||
|
||||
## Defaults
|
||||
|
||||
Here are the default values use to generate the `/llms.txt` file:
|
||||
|
||||
- `domain` → computed based on your deployment platform (or by using `NUXT_SITE_URL` env variable)
|
||||
- `title` → extracted from your `package.json`
|
||||
- `description` → extracted from your `package.json`
|
||||
- `full.title` → extracted from your `package.json`
|
||||
- `full.description` → extracted from your `package.json`
|
||||
|
||||
## Customize
|
||||
|
||||
You can override your LLMs data from the `nuxt.config.ts` :
|
||||
|
||||
```ts [nuxt.config.ts]
|
||||
export default defineNuxtConfig({
|
||||
llms: {
|
||||
domain: 'https://your-site.com',
|
||||
title: 'Your Site Name',
|
||||
description: 'A brief description of your site',
|
||||
full: {
|
||||
title: 'Your Site Name',
|
||||
description: 'A brief description of your site',
|
||||
},
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
::tip{to="https://github.com/nuxtlabs/nuxt-llms"}
|
||||
Checkout the nuxt-llms documentation for more information about the module.
|
||||
::
|
||||
90
docs/content/2.concepts/7.nuxt.md
Normal file
90
docs/content/2.concepts/7.nuxt.md
Normal file
@ -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"}
|
||||
|
||||
::
|
||||
```
|
||||
:::
|
||||
|
||||
:::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.
|
||||
1
docs/content/3.essentials/.navigation.yml
Normal file
1
docs/content/3.essentials/.navigation.yml
Normal file
@ -0,0 +1 @@
|
||||
title: Essentials
|
||||
223
docs/content/3.essentials/1.markdown-syntax.md
Normal file
223
docs/content/3.essentials/1.markdown-syntax.md
Normal file
@ -0,0 +1,223 @@
|
||||
---
|
||||
title: Markdown Syntax
|
||||
description: Text, title, and styling in standard markdown.
|
||||
navigation:
|
||||
icon: i-lucide-heading-1
|
||||
---
|
||||
|
||||
## Titles
|
||||
|
||||
Use titles to introduce main sections. They structure your documentation and help users navigate content.
|
||||
|
||||
::code-preview
|
||||
---
|
||||
class: "[&>div]:*:my-0"
|
||||
---
|
||||
## Titles
|
||||
|
||||
#code
|
||||
```mdc
|
||||
## Titles
|
||||
```
|
||||
::
|
||||
|
||||
### Subtitles
|
||||
|
||||
Use subtitles to divide sections further. They create a more detailed content hierarchy for better readability.
|
||||
|
||||
::code-preview
|
||||
---
|
||||
class: "[&>div]:*:my-0"
|
||||
---
|
||||
### Subtitles
|
||||
|
||||
#code
|
||||
```mdc
|
||||
### Subtitles
|
||||
```
|
||||
::
|
||||
|
||||
::tip
|
||||
Each title and subtitle creates an anchor and shows up automatically in the table of contents.
|
||||
::
|
||||
|
||||
## Text Formatting
|
||||
|
||||
Docus supports most Markdown formatting options.
|
||||
|
||||
| Style | How to use | Result |
|
||||
| ------ | ------------ | ---------- |
|
||||
| Bold | `**bold**` | **Bold** |
|
||||
| Italic | `*italic*` | *Italic* |
|
||||
| Strike | `~~strike~~` | ~~Strike~~ |
|
||||
|
||||
Combine formatting for richer text styles and visual emphasis.
|
||||
|
||||
| Style | How to use | Result |
|
||||
| ------------- | ------------------- | ----------------- |
|
||||
| Bold Italic | `**_bold italic_**` | ***Bold Italic*** |
|
||||
| Bold Strike | `~~**bold**~~` | ~~**Bold**~~ |
|
||||
| Italic Strike | `~~*italic*~~` | ~~*Italic*~~ |
|
||||
|
||||
## Links
|
||||
|
||||
Links connect different parts of your documentation and external resources, essential for user navigation and providing references.
|
||||
To create a link, wrap the link text in brackets `[]()`.
|
||||
|
||||
::code-preview
|
||||
---
|
||||
class: "[&>div]:*:my-0"
|
||||
---
|
||||
[Nuxt UI Pro](https://ui.nuxt.com/getting-started/installation/pro/nuxt)
|
||||
|
||||
#code
|
||||
```mdc
|
||||
[Nuxt UI Pro](https://ui.nuxt.com/getting-started/installation/pro/nuxt)
|
||||
```
|
||||
::
|
||||
|
||||
### Internal links
|
||||
|
||||
For linking within your documentation, use root-relative paths like `/getting-started/installation`.
|
||||
|
||||
::code-preview
|
||||
---
|
||||
class: "[&>div]:*:my-0"
|
||||
---
|
||||
[Installation](/getting-started/installation)
|
||||
|
||||
#code
|
||||
```mdc
|
||||
[Installation](/getting-started/installation)
|
||||
```
|
||||
::
|
||||
|
||||
## Lists
|
||||
|
||||
Organize related items in a structured, readable format. Markdown supports unordered, ordered, and nested lists for various content needs.
|
||||
|
||||
### Unordered
|
||||
|
||||
Use unordered lists for items without a specific sequence. Start each item with a `-` symbol.
|
||||
|
||||
::code-preview
|
||||
---
|
||||
class: "[&>div]:*:my-0"
|
||||
---
|
||||
- I'm a list item.
|
||||
- I'm another list item.
|
||||
- I'm the last list item.
|
||||
|
||||
#code
|
||||
```mdc
|
||||
- I'm a list item.
|
||||
- I'm another list item.
|
||||
- I'm the last list item.
|
||||
```
|
||||
::
|
||||
|
||||
### Ordered
|
||||
|
||||
Use ordered lists when item order matters, like steps in a process. Start each item with a number.
|
||||
|
||||
::code-preview
|
||||
---
|
||||
class: "[&>div]:*:my-0"
|
||||
---
|
||||
1. I'm a list item.
|
||||
2. I'm another list item.
|
||||
3. I'm the last list item.
|
||||
|
||||
#code
|
||||
```mdc
|
||||
1. I'm a list item.
|
||||
2. I'm another list item.
|
||||
3. I'm the last list item.
|
||||
```
|
||||
::
|
||||
|
||||
### Nested
|
||||
|
||||
Create hierarchical lists with sub-items for complex structures. Indent sub-items by four spaces for nesting.
|
||||
|
||||
::code-preview
|
||||
---
|
||||
class: "[&>div]:*:my-0"
|
||||
---
|
||||
- I'm a list item.
|
||||
- I'm a nested list item.
|
||||
- I'm another nested list item.
|
||||
- I'm another list item.
|
||||
|
||||
#code
|
||||
```mdc
|
||||
- I'm a list item.
|
||||
- I'm a nested list item.
|
||||
- I'm another nested list item.
|
||||
- I'm another list item.
|
||||
```
|
||||
::
|
||||
|
||||
## Tables
|
||||
|
||||
Present structured data in rows and columns clearly. Tables are ideal for comparing data or listing properties.
|
||||
|
||||
::code-preview
|
||||
---
|
||||
class: "[&>div]:*:my-0 [&>div]:*:w-full"
|
||||
---
|
||||
| Prop | Default | Type |
|
||||
| ------- | --------- | -------- |
|
||||
| `name` | | `string` |
|
||||
| `size` | `md` | `string` |
|
||||
| `color` | `neutral` | `string` |
|
||||
|
||||
#code
|
||||
```mdc
|
||||
| Prop | Default | Type |
|
||||
|---------|-----------|--------------------------|
|
||||
| `name` | | `string`{lang="ts-type"} |
|
||||
| `size` | `md` | `string`{lang="ts-type"} |
|
||||
| `color` | `neutral` | `string`{lang="ts-type"} |
|
||||
```
|
||||
::
|
||||
|
||||
## Blockquotes
|
||||
|
||||
Highlight important quotations, citations, or emphasized text. Blockquotes visually distinguish quoted content.
|
||||
|
||||
### Singleline
|
||||
|
||||
Single-line blockquotes are best for short, impactful quotes or citations that fit within a single line. To create a single-line blockquote, add a `>` in front of a paragraph. Ideal for short and impactful quotes.
|
||||
|
||||
::code-preview
|
||||
---
|
||||
class: "[&>div]:*:my-0"
|
||||
---
|
||||
> Nuxt UI Pro is a collection of Vue components, composables and utils built on top of Nuxt UI, oriented on structure and layout and designed to be used as building blocks for your app.
|
||||
|
||||
#code
|
||||
```mdc
|
||||
> Nuxt UI Pro is a collection of Vue components, composables and utils built on top of Nuxt UI, oriented on structure and layout and designed to be used as building blocks for your app.
|
||||
```
|
||||
::
|
||||
|
||||
### Multiline
|
||||
|
||||
Multi-line blockquotes are suitable for longer quotes or when you need to include multiple paragraphs within a single quotation.
|
||||
|
||||
::code-preview
|
||||
---
|
||||
class: "[&>div]:*:my-0"
|
||||
---
|
||||
> Nuxt UI Pro is a collection of Vue components, composables and utils built on top of Nuxt UI, oriented on structure and layout and designed to be used as building blocks for your app.
|
||||
>
|
||||
> Create beautiful, responsive, and accessible Vue applications with Nuxt UI Pro.
|
||||
|
||||
#code
|
||||
```mdc
|
||||
> Nuxt UI Pro is a collection of Vue components, composables and utils built on top of Nuxt UI, oriented on structure and layout and designed to be used as building blocks for your app.
|
||||
>
|
||||
> Create beautiful, responsive, and accessible Vue applications with Nuxt UI Pro.
|
||||
```
|
||||
::
|
||||
396
docs/content/3.essentials/2.code-blocks.md
Normal file
396
docs/content/3.essentials/2.code-blocks.md
Normal file
@ -0,0 +1,396 @@
|
||||
---
|
||||
title: Code Blocks
|
||||
description: Display inline code and code blocks in your documentation.
|
||||
navigation:
|
||||
icon: i-lucide-code-xml
|
||||
---
|
||||
|
||||
## Basic
|
||||
|
||||
### Inline Code
|
||||
|
||||
Use inline code to display code snippets within text paragraphs. It's ideal for referencing code elements directly in sentences.
|
||||
|
||||
::code-preview
|
||||
---
|
||||
class: "[&>div]:*:my-0"
|
||||
---
|
||||
`inline code`
|
||||
|
||||
#code
|
||||
```mdc
|
||||
`inline code`
|
||||
```
|
||||
::
|
||||
|
||||
### Code Blocks
|
||||
|
||||
Use code blocks to display multi-line code snippets with syntax highlighting. Code blocks are essential for presenting code examples clearly.
|
||||
|
||||
::code-preview
|
||||
---
|
||||
class: "[&>div]:*:my-0 [&>div]:*:w-full"
|
||||
---
|
||||
```ts
|
||||
export default defineNuxtConfig({
|
||||
modules: ['@nuxt/ui-pro']
|
||||
})
|
||||
```
|
||||
|
||||
#code
|
||||
````mdc
|
||||
```ts
|
||||
export default defineNuxtConfig({
|
||||
modules: ['@nuxt/ui-pro']
|
||||
})
|
||||
```
|
||||
````
|
||||
::
|
||||
|
||||
When writing a code-block, you can specify a filename that will be displayed on top of the code block. An icon will be automatically displayed based on the extension or the name.
|
||||
Filenames help users understand the code's location and purpose within a project.
|
||||
|
||||
::code-preview
|
||||
---
|
||||
class: "[&>div]:*:my-0 [&>div]:*:w-full"
|
||||
---
|
||||
```ts [nuxt.config.ts]
|
||||
export default defineNuxtConfig({
|
||||
modules: ['@nuxt/ui-pro']
|
||||
})
|
||||
```
|
||||
|
||||
#code
|
||||
````mdc
|
||||
```ts [nuxt.config.ts]
|
||||
export default defineNuxtConfig({
|
||||
modules: ['@nuxt/ui-pro']
|
||||
})
|
||||
```
|
||||
````
|
||||
::
|
||||
|
||||
Every code-block has a built-in copy button that will copy the code to your clipboard.
|
||||
|
||||
::tip{to="https://ui.nuxt.com/getting-started/icons/nuxt#theme"}
|
||||
Icons are already defined by default, but you can customize them in your `app.config.ts`:
|
||||
|
||||
```ts [app.config.ts]
|
||||
export default defineAppConfig({
|
||||
uiPro: {
|
||||
prose: {
|
||||
codeIcon: {
|
||||
terminal: 'i-ph-terminal-window-duotone'
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
::
|
||||
|
||||
## Advanced
|
||||
|
||||
### CodeGroup
|
||||
|
||||
Group code blocks in tabs using `code-group`. `code-group` is perfect for showing code examples in multiple languages or package managers.
|
||||
|
||||
::code-preview
|
||||
---
|
||||
class: "[&>div]:*:my-0 [&>div]:*:w-full"
|
||||
---
|
||||
:::code-group{.w-full}
|
||||
```bash [pnpm]
|
||||
pnpm add @nuxt/ui-pro@next
|
||||
```
|
||||
|
||||
```bash [yarn]
|
||||
yarn add @nuxt/ui-pro@next
|
||||
```
|
||||
|
||||
```bash [npm]
|
||||
npm install @nuxt/ui-pro@next
|
||||
```
|
||||
|
||||
```bash [bun]
|
||||
bun add @nuxt/ui-pro@next
|
||||
```
|
||||
:::
|
||||
|
||||
#code
|
||||
````mdc
|
||||
:::code-group
|
||||
|
||||
```bash [pnpm]
|
||||
pnpm add @nuxt/ui-pro@next
|
||||
```
|
||||
|
||||
```bash [yarn]
|
||||
yarn add @nuxt/ui-pro@next
|
||||
```
|
||||
|
||||
```bash [npm]
|
||||
npm install @nuxt/ui-pro@next
|
||||
```
|
||||
|
||||
```bash [bun]
|
||||
bun add @nuxt/ui-pro@next
|
||||
```
|
||||
|
||||
::
|
||||
````
|
||||
::
|
||||
|
||||
### CodeTree
|
||||
|
||||
Display code blocks in a file tree view using `code-tree`. `code-tree` is excellent for showcasing project structures and file relationships.
|
||||
|
||||
::code-preview{class="[&>div]:*:my-0 [&>div]:*:w-full"}
|
||||
:::code-tree{default-value="app/app.config.ts"}
|
||||
```ts [nuxt.config.ts]
|
||||
export default defineNuxtConfig({
|
||||
modules: ['@nuxt/ui-pro'],
|
||||
|
||||
future: {
|
||||
compatibilityVersion: 4
|
||||
},
|
||||
|
||||
css: ['~/assets/css/main.css']
|
||||
})
|
||||
|
||||
```
|
||||
|
||||
```css [app/assets/css/main.css]
|
||||
@import "tailwindcss";
|
||||
@import "@nuxt/ui-pro";
|
||||
```
|
||||
|
||||
```ts [app/app.config.ts]
|
||||
export default defineAppConfig({
|
||||
ui: {
|
||||
colors: {
|
||||
primary: 'sky',
|
||||
colors: 'slate'
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
```vue [app/app.vue]
|
||||
<template>
|
||||
<UApp>
|
||||
<NuxtPage />
|
||||
</UApp>
|
||||
</template>
|
||||
```
|
||||
|
||||
```json [package.json]
|
||||
{
|
||||
"name": "nuxt-app",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"build": "nuxt build",
|
||||
"dev": "nuxt dev",
|
||||
"generate": "nuxt generate",
|
||||
"preview": "nuxt preview",
|
||||
"postinstall": "nuxt prepare",
|
||||
"lint": "eslint .",
|
||||
"lint:fix": "eslint --fix ."
|
||||
},
|
||||
"dependencies": {
|
||||
"@iconify-json/lucide": "^1.2.18",
|
||||
"@nuxt/ui-pro": "3.0.0-alpha.10",
|
||||
"nuxt": "^3.15.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"eslint": "9.20.1",
|
||||
"typescript": "^5.7.2",
|
||||
"vue-tsc": "^2.2.0"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```json [tsconfig.json]
|
||||
{
|
||||
"extends": "./.nuxt/tsconfig.json"
|
||||
}
|
||||
```
|
||||
|
||||
````md [README.md]
|
||||
# Nuxt 3 Minimal Starter
|
||||
|
||||
Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
|
||||
|
||||
## Setup
|
||||
|
||||
Make sure to install the dependencies:
|
||||
|
||||
```bash
|
||||
# npm
|
||||
npm install
|
||||
|
||||
# pnpm
|
||||
pnpm install
|
||||
|
||||
# yarn
|
||||
yarn install
|
||||
|
||||
# bun
|
||||
bun install
|
||||
```
|
||||
|
||||
## Development Server
|
||||
|
||||
Start the development server on `http://localhost:3000`:
|
||||
|
||||
```bash
|
||||
# npm
|
||||
npm run dev
|
||||
|
||||
# pnpm
|
||||
pnpm run dev
|
||||
|
||||
# yarn
|
||||
yarn dev
|
||||
|
||||
# bun
|
||||
bun run dev
|
||||
```
|
||||
|
||||
## Production
|
||||
|
||||
Build the application for production:
|
||||
|
||||
```bash
|
||||
# npm
|
||||
npm run build
|
||||
|
||||
# pnpm
|
||||
pnpm run build
|
||||
|
||||
# yarn
|
||||
yarn build
|
||||
|
||||
# bun
|
||||
bun run build
|
||||
```
|
||||
|
||||
Locally preview production build:
|
||||
|
||||
```bash
|
||||
# npm
|
||||
npm run preview
|
||||
|
||||
# pnpm
|
||||
pnpm run preview
|
||||
|
||||
# yarn
|
||||
yarn preview
|
||||
|
||||
# bun
|
||||
bun run preview
|
||||
```
|
||||
|
||||
Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
|
||||
````
|
||||
:::
|
||||
::
|
||||
|
||||
### `CodePreview`
|
||||
|
||||
Use `code-preview` to show code output alongside the code. `code-preview` is ideal for interactive examples and demonstrating code results.
|
||||
Write the code to be previewed in a the `default` slot and the actual code in the `code` slot.
|
||||
|
||||
::code-preview
|
||||
---
|
||||
class: "[&>div]:*:my-0 [&>div]:*:w-full"
|
||||
label: Preview
|
||||
---
|
||||
:::code-preview
|
||||
---
|
||||
class: "[&>div]:*:my-0"
|
||||
---
|
||||
`inline code`
|
||||
|
||||
#code
|
||||
```mdc
|
||||
`inline code`
|
||||
```
|
||||
:::
|
||||
|
||||
#code
|
||||
````mdc
|
||||
::code-preview
|
||||
`inline code`
|
||||
|
||||
#code
|
||||
```mdc
|
||||
`inline code`
|
||||
```
|
||||
::
|
||||
````
|
||||
::
|
||||
|
||||
### `CodeCollapse`
|
||||
|
||||
Use `code-collapse` for long code blocks to keep pages clean. `code-collapse` allows users to expand code blocks only when needed, improving readability.
|
||||
|
||||
::code-preview
|
||||
---
|
||||
class: "[&>div]:*:my-0 [&>div]:*:w-full"
|
||||
---
|
||||
:::code-collapse{class="[&>div]:my-0"}
|
||||
```css [main.css]
|
||||
@import "tailwindcss";
|
||||
@import "@nuxt/ui-pro";
|
||||
|
||||
@theme {
|
||||
--font-sans: 'Public Sans', sans-serif;
|
||||
|
||||
--breakpoint-3xl: 1920px;
|
||||
|
||||
--color-green-50: #EFFDF5;
|
||||
--color-green-100: #D9FBE8;
|
||||
--color-green-200: #B3F5D1;
|
||||
--color-green-300: #75EDAE;
|
||||
--color-green-400: #00DC82;
|
||||
--color-green-500: #00C16A;
|
||||
--color-green-600: #00A155;
|
||||
--color-green-700: #007F45;
|
||||
--color-green-800: #016538;
|
||||
--color-green-900: #0A5331;
|
||||
--color-green-950: #052E16;
|
||||
}
|
||||
```
|
||||
:::
|
||||
|
||||
#code
|
||||
````mdc
|
||||
::code-collapse
|
||||
|
||||
```css [main.css]
|
||||
@import "tailwindcss";
|
||||
@import "@nuxt/ui-pro";
|
||||
|
||||
@theme {
|
||||
--font-sans: 'Public Sans', sans-serif;
|
||||
|
||||
--breakpoint-3xl: 1920px;
|
||||
|
||||
--color-green-50: #EFFDF5;
|
||||
--color-green-100: #D9FBE8;
|
||||
--color-green-200: #B3F5D1;
|
||||
--color-green-300: #75EDAE;
|
||||
--color-green-400: #00DC82;
|
||||
--color-green-500: #00C16A;
|
||||
--color-green-600: #00A155;
|
||||
--color-green-700: #007F45;
|
||||
--color-green-800: #016538;
|
||||
--color-green-900: #0A5331;
|
||||
--color-green-950: #052E16;
|
||||
}
|
||||
```
|
||||
|
||||
::
|
||||
````
|
||||
::
|
||||
424
docs/content/3.essentials/3.components.md
Normal file
424
docs/content/3.essentials/3.components.md
Normal file
@ -0,0 +1,424 @@
|
||||
---
|
||||
title: Markdown Components
|
||||
description: Use Markdown components to help you structure your content, with
|
||||
the help of Nuxt UI Pro.
|
||||
navigation:
|
||||
icon: i-lucide-component
|
||||
title: Components
|
||||
---
|
||||
|
||||
Prose components are replacements for HTML typography tags. They provide a simple way to customize your UI when using Markdown.
|
||||
|
||||
**Docus and Nuxt UI Pro** provides a set of styled and beautiful prose components to help you write your documentation using the [MDC syntax](https://content.nuxt.com/docs/files/markdown#mdc-syntax).
|
||||
|
||||
::prose-note{to="https://ui.nuxt.com/getting-started"}
|
||||
This page highlights only the prose components best suited for writing documentation. However, you can use **any Nuxt UI or Nuxt UI Pro component** in your Markdown. For the full list of available components, visit the Nuxt UI documentation.
|
||||
::
|
||||
|
||||
### `Accordion`
|
||||
|
||||
Use the `accordion` and `accordion-item` components to display an [Accordion](https://ui.nuxt.com/components/accordion) in your content.
|
||||
|
||||
::tabs
|
||||
:::tabs-item{icon="i-lucide-eye" label="Preview"}
|
||||
::::accordion
|
||||
:::::accordion-item
|
||||
---
|
||||
icon: i-lucide-circle-help
|
||||
label: What is Docus and what are its key features??
|
||||
---
|
||||
Docus is a fully integrated documentation solution built with Nuxt UI Pro. It's a theme based on the UI Pro documentation template that provides a ready-to-use visual. User can focus on content using Markdown and MDC syntax.
|
||||
:::::
|
||||
|
||||
:::::accordion-item
|
||||
---
|
||||
icon: i-lucide-circle-help
|
||||
label: How do I get started with Docus?
|
||||
---
|
||||
The only thing you need to start a Docus project is a `content/` folder. You can have a check at the starter for a quick start.
|
||||
:::::
|
||||
|
||||
:::::accordion-item{icon="i-lucide-circle-help" label="What is Nuxt UI Pro?"}
|
||||
Nuxt UI Pro is a collection of premium Vue components, composables and utils built on top of [Nuxt UI](https://ui.nuxt.com/). Nuxt UI Pro is free in development, but you need a license to use it in production.
|
||||
:::::
|
||||
::::
|
||||
:::
|
||||
|
||||
:::tabs-item{icon="i-lucide-code" label="Code"}
|
||||
```mdc
|
||||
::accordion
|
||||
|
||||
:::accordion-item{label="What is Docus and what are its key features??" icon="i-lucide-circle-help"}
|
||||
Docus is a fully integrated documentation solution built with Nuxt UI Pro. It's a theme based on the UI Pro documentation template that provides a ready-to-use visual. User can focus on content using Markdown and MDC syntax.
|
||||
:::
|
||||
|
||||
:::accordion-item{label="How do I get started with Docus?" icon="i-lucide-circle-help"}
|
||||
The only thing you need to start a Docus project is a `content/` folder. You can have a check at the starter for a quick start.
|
||||
:::
|
||||
|
||||
:::accordion-item{label="What is Nuxt UI Pro?" icon="i-lucide-circle-help"}
|
||||
Nuxt UI Pro is a collection of premium Vue components, composables and utils built on top of [Nuxt UI](https://ui.nuxt.com/). Nuxt UI Pro is free in development, but you need a license to use it in production.
|
||||
:::
|
||||
::
|
||||
```
|
||||
:::
|
||||
::
|
||||
|
||||
### `Badge`
|
||||
|
||||
Use markdown in the default slot of the `badge` component to display a [Badge](https://ui.nuxt.com/components/badge) in your content.
|
||||
|
||||
::tabs
|
||||
:::tabs-item{.my-5 icon="i-lucide-eye" label="Preview"}
|
||||
::::badge
|
||||
**v3.0.0**
|
||||
::::
|
||||
:::
|
||||
|
||||
:::tabs-item{icon="i-lucide-code" label="Code"}
|
||||
```mdc
|
||||
::badge
|
||||
**v3.0.0**
|
||||
::
|
||||
```
|
||||
:::
|
||||
::
|
||||
|
||||
### `Callout`
|
||||
|
||||
Use markdown in the default slot of the `callout` component to add eye-catching context to your content.
|
||||
|
||||
Use the `icon` and `color` props to customize it. You can also pass any property from the [`<NuxtLink>`](https://nuxt.com/docs/api/components/nuxt-link) component.
|
||||
|
||||
You can also use the `note`, `tip`, `warning` and `caution` shortcuts with pre-defined icons and colors.
|
||||
|
||||
::tabs
|
||||
:::tabs-item{.my-5 icon="i-lucide-eye" label="Preview"}
|
||||
::::div{.flex.flex-col.gap-4.w-full}
|
||||
:::::note{.w-full.my-0}
|
||||
Here's some additional information for you.
|
||||
:::::
|
||||
|
||||
:::::tip{.w-full.my-0}
|
||||
Here's a helpful suggestion.
|
||||
:::::
|
||||
|
||||
:::::warning{.w-full.my-0}
|
||||
Be careful with this action as it might have unexpected results.
|
||||
:::::
|
||||
|
||||
:::::caution{.w-full.my-0}
|
||||
This action cannot be undone.
|
||||
:::::
|
||||
::::
|
||||
:::
|
||||
|
||||
:::tabs-item{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.
|
||||
::
|
||||
```
|
||||
:::
|
||||
::
|
||||
|
||||
### `Card` and `CardGroup`
|
||||
|
||||
Use markdown in the default slot of the `card` component to highlight your content.
|
||||
|
||||
Use the `title`, `icon` and `color` props to customize it. You can also pass any property from the [`<NuxtLink>`](https://nuxt.com/docs/api/components/nuxt-link).
|
||||
|
||||
Wrap your `card` components with the `card-group` component to group them together in a grid layout.
|
||||
|
||||
::tabs
|
||||
:::tabs-item{.my-5 icon="i-lucide-eye" label="Preview"}
|
||||
::::card-group{.w-full.my-0}
|
||||
:::::card
|
||||
---
|
||||
icon: i-simple-icons-github
|
||||
target: _blank
|
||||
title: Dashboard
|
||||
to: https://github.com/nuxt-ui-pro/dashboard
|
||||
---
|
||||
A dashboard with multi-column layout.
|
||||
:::::
|
||||
|
||||
:::::card
|
||||
---
|
||||
icon: i-simple-icons-github
|
||||
target: _blank
|
||||
title: SaaS
|
||||
to: https://github.com/nuxt-ui-pro/saas
|
||||
---
|
||||
A template with landing, pricing, docs and blog.
|
||||
:::::
|
||||
|
||||
:::::card
|
||||
---
|
||||
icon: i-simple-icons-github
|
||||
target: _blank
|
||||
title: Docs
|
||||
to: https://github.com/nuxt-ui-pro/docs
|
||||
---
|
||||
A documentation with `@nuxt/content`.
|
||||
:::::
|
||||
|
||||
:::::card
|
||||
---
|
||||
icon: i-simple-icons-github
|
||||
target: _blank
|
||||
title: Landing
|
||||
to: https://github.com/nuxt-ui-pro/landing
|
||||
---
|
||||
A landing page you can use as starting point.
|
||||
:::::
|
||||
::::
|
||||
:::
|
||||
|
||||
:::tabs-item{.my-5 icon="i-lucide-code" label="Code"}
|
||||
```mdc
|
||||
:::card-group
|
||||
|
||||
::card
|
||||
---
|
||||
title: Dashboard
|
||||
icon: i-simple-icons-github
|
||||
to: https://github.com/nuxt-ui-pro/dashboard
|
||||
target: _blank
|
||||
---
|
||||
A dashboard with multi-column layout.
|
||||
::
|
||||
|
||||
::card
|
||||
---
|
||||
title: SaaS
|
||||
icon: i-simple-icons-github
|
||||
to: https://github.com/nuxt-ui-pro/saas
|
||||
target: _blank
|
||||
---
|
||||
A template with landing, pricing, docs and blog.
|
||||
::
|
||||
|
||||
::card
|
||||
---
|
||||
title: Docs
|
||||
icon: i-simple-icons-github
|
||||
to: https://github.com/nuxt-ui-pro/docs
|
||||
target: _blank
|
||||
---
|
||||
A documentation with `@nuxt/content`.
|
||||
::
|
||||
|
||||
::card
|
||||
---
|
||||
title: Landing
|
||||
icon: i-simple-icons-github
|
||||
to: https://github.com/nuxt-ui-pro/landing
|
||||
target: _blank
|
||||
---
|
||||
A landing page you can use as starting point.
|
||||
::
|
||||
|
||||
:::
|
||||
```
|
||||
:::
|
||||
::
|
||||
|
||||
### `Collapsible`
|
||||
|
||||
Wrap your content with the `collapsible` component to display a [Collapsible](https://ui.nuxt.com/components/collapsible) in your content.
|
||||
|
||||
::tabs
|
||||
:::tabs-item{.my-5 icon="i-lucide-eye" label="Preview"}
|
||||
::::collapsible
|
||||
| Prop | Default | Type |
|
||||
| ------- | --------- | -------- |
|
||||
| `name` | | `string` |
|
||||
| `size` | `md` | `string` |
|
||||
| `color` | `neutral` | `string` |
|
||||
::::
|
||||
:::
|
||||
|
||||
:::tabs-item{icon="i-lucide-code" label="Code"}
|
||||
```mdc
|
||||
::collapsible
|
||||
|
||||
| Prop | Default | Type |
|
||||
|---------|-----------|--------------------------|
|
||||
| `name` | | `string`{lang="ts-type"} |
|
||||
| `size` | `md` | `string`{lang="ts-type"} |
|
||||
| `color` | `neutral` | `string`{lang="ts-type"} |
|
||||
|
||||
::
|
||||
```
|
||||
:::
|
||||
::
|
||||
|
||||
### `Field` and `FieldGroup`
|
||||
|
||||
A `field`is a prop or parameter to display in your content. You can group them by `field-group` in a list.
|
||||
|
||||
::tabs
|
||||
:::tabs-item{.my-5 icon="i-lucide-eye" label="Preview"}
|
||||
::::field-group{.my-0}
|
||||
:::::field{name="analytics" type="boolean"}
|
||||
Default to `false` - Enables analytics for your project (coming soon).
|
||||
:::::
|
||||
|
||||
:::::field{name="blob" type="boolean"}
|
||||
Default to `false` - Enables blob storage to store static assets, such as images, videos and more.
|
||||
:::::
|
||||
|
||||
:::::field{name="cache" type="boolean"}
|
||||
Default to `false` - Enables cache storage to cache your server route responses or functions using Nitro's `cachedEventHandler` and `cachedFunction`
|
||||
:::::
|
||||
|
||||
:::::field{name="database" type="boolean"}
|
||||
Default to `false` - Enables SQL database to store your application's data.
|
||||
:::::
|
||||
::::
|
||||
:::
|
||||
|
||||
:::tabs-item{icon="i-lucide-code" label="Code"}
|
||||
```mdc
|
||||
::field-group
|
||||
::field{name="analytics" type="boolean"}
|
||||
Default to `false` - Enables analytics for your project (coming soon).
|
||||
::
|
||||
|
||||
::field{name="blob" type="boolean"}
|
||||
Default to `false` - Enables blob storage to store static assets, such as images, videos and more.
|
||||
::
|
||||
|
||||
::field{name="cache" type="boolean"}
|
||||
Default to `false` - Enables cache storage to cache your server route responses or functions using Nitro's `cachedEventHandler` and `cachedFunction`
|
||||
::
|
||||
|
||||
::field{name="database" type="boolean"}
|
||||
Default to `false` - Enables SQL database to store your application's data.
|
||||
::
|
||||
::
|
||||
```
|
||||
:::
|
||||
::
|
||||
|
||||
### `Icon`
|
||||
|
||||
Use the `icon` component to display an [Icon](https://ui.nuxt.com/components/icon) in your content.
|
||||
|
||||
::code-preview
|
||||
:icon{name="i-simple-icons-nuxtdotjs"}
|
||||
|
||||
|
||||
|
||||
#code
|
||||
```mdc
|
||||
:icon{name="i-simple-icons-nuxtdotjs"}
|
||||
```
|
||||
::
|
||||
|
||||
### `Kbd`
|
||||
|
||||
Use the `kbd` component to display a [Kbd](https://ui.nuxt.com/components/kbd) in your content.
|
||||
|
||||
::code-preview
|
||||
#code
|
||||
```mdc
|
||||
:kbd{value="meta"} :kbd{value="K"}
|
||||
```
|
||||
::
|
||||
|
||||
### `Tabs`
|
||||
|
||||
Use the `tabs` and `tabs-item` components to display [Tabs](https://ui.nuxt.com/components/tabs) in your content.
|
||||
|
||||
::code-preview
|
||||
:::tabs{.w-full}
|
||||
::::tabs-item{icon="i-lucide-code" label="Code"}
|
||||
```mdc
|
||||
::callout
|
||||
Lorem velit voluptate ex reprehenderit ullamco et culpa.
|
||||
::
|
||||
```
|
||||
::::
|
||||
|
||||
::::tabs-item{icon="i-lucide-eye" label="Preview"}
|
||||
:::::callout
|
||||
Lorem velit voluptate ex reprehenderit ullamco et culpa.
|
||||
:::::
|
||||
::::
|
||||
:::
|
||||
|
||||
#code
|
||||
````mdc
|
||||
::tabs{.w-full}
|
||||
:::tabs-item{icon="i-lucide-code" label="Code"}
|
||||
```mdc
|
||||
::::callout
|
||||
Lorem velit voluptate ex reprehenderit ullamco et culpa.
|
||||
::::
|
||||
```
|
||||
::::
|
||||
|
||||
:::tabs-item{icon="i-lucide-eye" label="Preview"}
|
||||
:::::callout
|
||||
Lorem velit voluptate ex reprehenderit ullamco et culpa.
|
||||
:::::
|
||||
:::
|
||||
::
|
||||
````
|
||||
::
|
||||
|
||||
### `Steps`
|
||||
|
||||
Wrap your headings with the Steps component to display a list of steps.
|
||||
|
||||
Use the `level` prop to define which heading will be used for the steps.
|
||||
|
||||
::tabs
|
||||
:::tabs-item{.my-5 icon="i-lucide-eye" label="Preview"}
|
||||
::::steps{level="4"}
|
||||
#### Start a fresh new project
|
||||
|
||||
```bash [Terminal]
|
||||
npx nuxi init -t github:nuxt-ui-pro/docus
|
||||
```
|
||||
|
||||
#### Run docus CLI to run your dev server
|
||||
|
||||
```bash [Terminal]
|
||||
docus dev
|
||||
```
|
||||
::::
|
||||
:::
|
||||
|
||||
:::tabs-item{icon="i-lucide-code" label="Code"}
|
||||
````mdc
|
||||
::steps{level="4"}
|
||||
#### Start a fresh new project
|
||||
|
||||
```bash [Terminal]
|
||||
npx nuxi init -t github:nuxt-ui-pro/docus
|
||||
```
|
||||
|
||||
#### Run docus CLI to run your dev server
|
||||
|
||||
```bash [Terminal]
|
||||
docus dev
|
||||
```
|
||||
::
|
||||
````
|
||||
:::
|
||||
::
|
||||
53
docs/content/3.essentials/4.images-embeds.md
Normal file
53
docs/content/3.essentials/4.images-embeds.md
Normal file
@ -0,0 +1,53 @@
|
||||
---
|
||||
title: Images and Embeds
|
||||
description: Add image, video, and other HTML elements
|
||||
navigation:
|
||||
icon: i-lucide-image
|
||||
seo:
|
||||
description: Add image, video, and other HTML elements using Docus theme
|
||||
---
|
||||
|
||||
## Markdown
|
||||
|
||||
Display images or videos using standard Markdown syntax.
|
||||
|
||||
### Images
|
||||
|
||||
::code-preview
|
||||
|
||||
|
||||
#code
|
||||
```mdc
|
||||
|
||||
```
|
||||
::
|
||||
|
||||
Or with your local images
|
||||
|
||||
::code-preview
|
||||
|
||||
|
||||
#code
|
||||
```mdc
|
||||
|
||||
```
|
||||
::
|
||||
|
||||
::note{to="https://image.nuxt.com/"}
|
||||
Docus will use `<NuxtImg>` component under the hood instead of the native `img` tag.
|
||||
::
|
||||
|
||||
### Videos
|
||||
|
||||
::prose-code-preview
|
||||
:video{autoplay controls loop src="https://res.cloudinary.com/dcrl8q2g3/video/upload/v1745404403/landing_od8epr.mp4"}
|
||||
|
||||
|
||||
|
||||
#code
|
||||
```mdc
|
||||
:video{autoplay controls loop src="https://res.cloudinary.com/dcrl8q2g3/video/upload/v1745404403/landing_od8epr.mp4"}
|
||||
```
|
||||
::
|
||||
|
||||
###
|
||||
269
docs/content/index.md
Normal file
269
docs/content/index.md
Normal file
@ -0,0 +1,269 @@
|
||||
---
|
||||
seo:
|
||||
title: Write beautiful docs with Markdown
|
||||
description: Ship fast, flexible, and SEO-optimized documentation with beautiful
|
||||
design out of the box. Docus brings together the best of the Nuxt ecosystem.
|
||||
Powered by Nuxt UI Pro.
|
||||
---
|
||||
|
||||
::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>` .
|
||||
::::
|
||||
:::
|
||||
::
|
||||
Reference in New Issue
Block a user