vitepress-api-document-theme

Vitepress API Document Theme

Developed by Logic Spark team

Video Demo - Built With - Getting Started - Usage - License - Acknowledgement

:sunglasses: Video Demo

DividePage Component Demo

https://github.com/logicspark/vitepress-api-document-theme/assets/135820109/57ec8e74-e9e1-406b-aeb2-d05475f7ea0e

Here is the link to the live demo. Have fun exploring!

:building_construction: Built With

• 
• 
• 
• 
• 

:rocket: Getting Started

Learn what is required before using Vitepress API Document theme and how to install it quickly. Let's get started!

Prerequisite

This library is created with Vite + Vue3 + TypeScript. To start using this library, please make sure to install the following external libraries first:

• Node.js
• Vitepress

Support Node.js 18.12.0 (LTS) and above

Installation

There are a few ways you can install Vitepress API Document theme, namely npm, yarn and pnpm. If you install via npm, here is a a single cmd to install this library

  npm install vitepress-api-document-theme

Other options

• yarn

  yarn add vitepress-api-document-theme

• pnpm

  pnpm add vitepress-api-document-theme

:fire: Usage

You will need to import component tags and css. Without the css import, the API Document theme will not display correctly.

Import Component from Theme

You will need to import DividePage component to divide the main content into left and right so that API document theme can be rendered.

<script setup>
  import { DividePage } from 'vitepress-api-document-theme';
</script>

Import CSS from Theme

Per Vitepress's Setup Wizard, there are three options

• Default Theme
• Default Theme + Customization
• Custom Theme

Option 1: Default Theme

You can import the file within <style> of each .md file that you plan to use the imported component.

<style>
  @import './node_module/vitepress-api-document-theme/dist/style.css';
</style>

Note: Do not add scoped in <style> because the css will not work.

(See example)

Option2: Default Theme + Customization

You must import style in the css file in the theme directory.

@import "../../node_module/vitepress-api-document-theme/theme/style.css";

(See example)

Option 3: Custom Theme

Please follow Option 2's instruction

(See example)

Implementation of Tags

There are two tags, namely:

• <template #left> - For the left side of the main content, you can write api descriptions like query parameters or return properties.
• <template #right> - For the right side of the main content, you can add sample codes like api request and response.

<DividePage>

<template #left>

 // Add content here. Both html and markdown are supported.

</template>

<template #right>

 // Add content here. Both html and markdown are supported.

</template>
</DividePage>

Note: When writing markdown, please leave a line so that it displays a markdown instead of text like the example above.

Component Attribute

Prop	Type	Required	Description
top	number	Optional	Set vertical position of <template #right> Default is 0

For the full sample .md file in accordance to the live demo, please see our example directory.

:books: License

Distributed under the MIT License. See LICENSE for more information.

Vitepress is licenses under MIT License. Click here for more information.

:pray: Acknowledgement

• Vitepress
• Img Shields