first commit
This commit is contained in:
40
.starter/.gitignore
vendored
Normal file
40
.starter/.gitignore
vendored
Normal file
@ -0,0 +1,40 @@
|
||||
# Nuxt dev/build outputs
|
||||
.output
|
||||
.data
|
||||
.nuxt
|
||||
.nitro
|
||||
.cache
|
||||
dist
|
||||
|
||||
# Node dependencies
|
||||
node_modules
|
||||
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
|
||||
# Misc
|
||||
.DS_Store
|
||||
.fleet
|
||||
.idea
|
||||
.eslintcache
|
||||
|
||||
# Local env files
|
||||
.env
|
||||
.env.*
|
||||
!.env.example
|
||||
|
||||
# Template
|
||||
template/pnpm-lock.yaml
|
||||
|
||||
# npm pack
|
||||
*.tgz
|
||||
|
||||
# Temp files
|
||||
.tmp
|
||||
.profile
|
||||
*.0x
|
||||
|
||||
#VSC
|
||||
.history
|
||||
.wrangler
|
||||
2
.starter/content/1.getting-started/.navigation.yml
Normal file
2
.starter/content/1.getting-started/.navigation.yml
Normal file
@ -0,0 +1,2 @@
|
||||
title: Getting Started
|
||||
icon: false
|
||||
54
.starter/content/1.getting-started/2.introduction.md
Normal file
54
.starter/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
.starter/content/1.getting-started/3.installation.md
Normal file
65
.starter/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](https://docus.dev/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)
|
||||
|
||||
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
.starter/content/1.getting-started/4.project-structure.md
Normal file
52
.starter/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/.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](https://docus.dev/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](https://docus.dev/concepts/configuration) to fit your branding, handle SEO and adapt links and socials.
|
||||
|
||||
::prose-tip{to="https://docus.dev/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.
|
||||
::
|
||||
123
.starter/content/1.getting-started/5.studio.md
Normal file
123
.starter/content/1.getting-started/5.studio.md
Normal file
@ -0,0 +1,123 @@
|
||||
---
|
||||
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
.starter/content/1.getting-started/6.migration.md
Normal file
24
.starter/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](https://docus.dev/essentials/components) provided by Nuxt UI.
|
||||
|
||||
Once your content has been moved to the `content/` folder, you can go through the [configuration section](https://docus.dev/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
.starter/content/2.essentials/.navigation.yml
Normal file
1
.starter/content/2.essentials/.navigation.yml
Normal file
@ -0,0 +1 @@
|
||||
title: Essentials
|
||||
223
.starter/content/2.essentials/1.markdown-syntax.md
Normal file
223
.starter/content/2.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
.starter/content/2.essentials/2.code-blocks.md
Normal file
396
.starter/content/2.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
.starter/content/2.essentials/3.components.md
Normal file
424
.starter/content/2.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-eye" label="Preview"}
|
||||
```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
.starter/content/2.essentials/4.images-embeds.md
Normal file
53
.starter/content/2.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"}
|
||||
```
|
||||
::
|
||||
|
||||
###
|
||||
123
.starter/content/index.md
Normal file
123
.starter/content/index.md
Normal file
@ -0,0 +1,123 @@
|
||||
---
|
||||
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/nuxt-ui-pro/docus
|
||||
variant: outline
|
||||
---
|
||||
Star on GitHub
|
||||
:::
|
||||
::
|
||||
|
||||
::u-page-section
|
||||
#title
|
||||
Shipped with many features
|
||||
|
||||
#features
|
||||
:::u-page-feature
|
||||
---
|
||||
icon: i-simple-icons-nuxt
|
||||
target: _blank
|
||||
to: https://nuxt.com
|
||||
---
|
||||
#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-feature
|
||||
---
|
||||
icon: i-simple-icons-nuxt
|
||||
target: _blank
|
||||
to: https://ui.nuxt.com/
|
||||
---
|
||||
#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-feature
|
||||
---
|
||||
icon: i-simple-icons-nuxt
|
||||
target: _blank
|
||||
to: https://content.nuxt.com
|
||||
---
|
||||
#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-feature
|
||||
---
|
||||
icon: i-simple-icons-nuxt
|
||||
target: _blank
|
||||
to: https://nuxt.com/docs/guide/directory-structure/app-config
|
||||
---
|
||||
#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-feature
|
||||
---
|
||||
icon: i-simple-icons-nuxt
|
||||
target: _blank
|
||||
to: https://content.nuxt.com/studio
|
||||
---
|
||||
#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-feature
|
||||
---
|
||||
icon: i-simple-icons-nuxt
|
||||
target: _blank
|
||||
to: https://ui.nuxt.com/components/content-search
|
||||
---
|
||||
#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.
|
||||
:::
|
||||
::
|
||||
12
.starter/package.json
Normal file
12
.starter/package.json
Normal file
@ -0,0 +1,12 @@
|
||||
{
|
||||
"name": "docus-starter",
|
||||
"scripts": {
|
||||
"dev": "docus dev",
|
||||
"build": "docus build"
|
||||
},
|
||||
"dependencies": {
|
||||
"docus": "latest",
|
||||
"better-sqlite3": "^11.10.0",
|
||||
"nuxt": "^3.17.6"
|
||||
}
|
||||
}
|
||||
BIN
.starter/public/favicon.ico
Normal file
BIN
.starter/public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 364 KiB |
BIN
.starter/public/mountains.webp
Normal file
BIN
.starter/public/mountains.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 234 KiB |
Reference in New Issue
Block a user