Vitepress examples md and . A template repository including vitepress and simple auth0 authentication. Examples These are the example projects based on the current usage notes. Getting Started Installation First, install VitePress in your project: Learn how to use VitePress, a Vue-powered static site generator, to create documentation for your Vue app. Example usage: Jan 30, 2024 · VitePress Default Theme Plus extends the VitePress default theme with some extra power and features. - leafletEx/leafletjsExample Home Page VitePress default theme provides a homepage layout, which you can also see used on the homepage of this site. Consult the Default Theme Config Overview for a comprehensive list of options. vite-plugin-vitepress-auto-nav - Automatically generates sidebar and nav configurations by scanning directories, based on VitePress. Feb 27, 2025 · There's a great selection of Vitepress themes available that can transform the design aesthetic of your site. VitePress also comes with a few built-in components that can be used globally. All your static asset paths are automatically processed to adjust for different base config values. The `. vue files: For full documentation, visit vitepress-twoslash. This means you can use any Vue features inside the Markdown, including dynamic templating, using Vue components, or arbitrary in-page Vue component logic by adding a <script> tag. Using this plug-in, Vue SFC For example, index. VitePress also provides the ability to generate clean URLs, rewrite paths, and dynamically generate pages. x Example Vue 3. vue files: May 1, 2020 · VitePress is a static site generator powered by Vite and Vue, offering efficient and flexible site creation for developers. Definition VitePress is a simple and performant static site generator built on top of Vite for creating docs in a matter of minutes. Syntax Highlighting VitePress provides Syntax Highlighting powered by Shiki, with additional features like line-highlighting: Input Markdown Extension Examples This page demonstrates some of the built-in markdown extensions provided by VitePress. Rendering of anchors can be configured using the markdown. readthedocs. For example, index. Thanks to the great design of VitePress's APIs, the adaptation process was surprisingly easy. Methods How it works VitePress Sidebar scans your folders and markdown files hierarchically based on the folder path (documentRootPath) you specify in your project's folders. Markdown Extensions Header Anchors Headers automatically get anchor links applied. Contribute to makinacorpus/readthedocs-vitepress-example development by creating an account on GitHub. It's worth noting that VitePress leverages Vue's compiler to automatically detect and Runtime API Examples This page demonstrates usage of some of the runtime APIs provided by VitePress. title appearing in VitePress search results instead of the actual content. dev website. This means all custom code in theme components are subject to SSR Compatibility. For advanced customization or understanding the underlying configuration, manual setup options are also available. Sponsored by This Dot Labs: thisdotlabs. You can place these files in the public directory under the source directory. Powered by VitePress Leverage the power of VitePress to create fast and efficient documentation sites. SSR Compatibility VitePress pre-renders the app in Node. In the end, VitePress will output the options as intended. VitePress is a Vite and Vue Powered Static Site Generator. Theoretically all the options supported in the default theme should also be available in this one. md will be compiled into Generate VitePress API Documentation from OpenAPI specs. For example, index. VitePressのサンプルページ🟩 機能説明 詳細 🟦 機能説明 詳細 🟧 機能説明 詳細 💻 機能説明 詳細 🛠 機能説明 詳細 📍 You can also configure the behavior of the theme via the themeConfig option. js. As a result Vitepress Versioning Example This is an example of how to use vitepress to create a versioned documentation site. (See readme. app api docs openapi3 vitepress vitepress-theme vitepress-doc openapi31 vitepress-plugin Readme MIT license Activity Zero-config PWA Plugin for VitePress. md └─ package. Non-markdown files are ignored. For example, you can register your component globally in . The @content technique also places entries in the Sidebar which is something I was also struggling with beforehand, so very glad to have found it. Keep readers updated on new blog posts easily. Apr 28, 2025 · 本篇为vitepress系列教程，在开始前，若还不了解vitepress的小伙伴可以看一下以往文章： 不敲一行代码！ 助你快速搭建属于自己的官网博客！ -VitePress保姆级教程-01 打造你的专属主题-VitePress保姆级教程-02 前言 Frontmatter Config Frontmatter enables page based configuration. Sep 7, 2023 · Is your feature request related to a problem? Please describe. For example, if your project root is . Links Internal Links Internal links are converted to router link for SPA navigation. To use it, specify home: true plus some other metadata in your root index. github. It uses Vue components and transforms Markdown files into HTML pages. It's worth noting that VitePress leverages Vue's compiler to automatically detect and Contribute to HuanHQ99/vitepress-doc development by creating an account on GitHub. So, for example, if you want to configure footer text to have some links, you can adjust the configuration as follows: Markdown Extensions VitePress comes with built in Markdown Extensions. md 和 . ::: tip CloudRay You can deploy your VitePress project with CloudRay by following these instructions. I hope you guys love genji-theme-vitepress and thanks again for the great work that VitePress tem has done. Sidebar Examples This is a collection of examples that demonstrate how to use the useSidebar function to generate custom sidebars. code-preview-example🎉 简介 本插件基于 vitepress 、 markdown-it 和 unified 实现，它可以帮助你在编写文档的时候，对嵌入的 Vue 示例代码增加演示功能，支持的 Vue 组件形式有 SFC, JSX, TSX 🏄♂️ 插件包 Contribute to rolldown/vitepress-rolldown-vite-repro development by creating an account on GitHub. js during the production build, using Vue's Server-Side Rendering (SSR) capabilities. Please note this is just an example directory structure. You can get one using the GET Get an artist endpoint. It works in both . The most important thing for any … Jun 30, 2022 · As mentioned in #253, we probably should add a community examples page. Use this online vitepress playground to view and fork vitepress example apps and templates on CodeSandbox. /docs/public. vitepress-jsdoc is the definitive bridge between Vitepress and JSDoc-style commented codebases. Note that this is the Slack community for Lando but we are more than happy to help with this module as well! If you'd like to report a bug or submit a feature request then please use the issue queue in vitepress-jsdoc Code More, Document Faster: The Ultimate Vitepress Integration. app VitePress is a static site generator with a focus on performance and simplicity. Vitepress power comes from its low learning curve, powerful configuration settings, and the ability to easily customize it. Syntax Highlighting VitePress provides Syntax Highlighting powered by Shiki, with additional features like line-highlighting: Input Jan 18, 2021 · Write Beautiful Documentation Quickly with Vitepress Any project that is going to be used by fellow developers is going to need some amazing documentation. Site Config Site config is where you can define the global settings of the site. Mar 2, 2024 · And those pages load and generate as expected, and appear in navigation. Header Anchors Headers automatically get anchor links applied. Oct 1, 2024 · Multiversion Build The default vitepress build is great but sometimes you want your build to generate multiple versions of your docs to keep track of stable releases, edge releases and the last commit dev release. Vitepress Sidebar Builder A very simple sidebar builder that lets the end user specify which folders to pull data from, and automatically constructs and orders pages based on front-matter (grey-matter) inside of the page itself. It is powered by Vuejs, and Vite with built in customizable components. VitePress supports YAML frontmatter in all Markdown files, parsing them with gray-matter. - Com-X/vitepress-auth-template Use this online minisearch playground to view and fork minisearch example apps and templates on CodeSandbox. Also, there are config options which you can only define in frontmatter. In this tutorial, you'll learn Dec 21, 2023 · What is Vitepress Vitepress is a powerful Static Site Generator powered by Vite mainly used for Documentation and Blogs with the default theme, and open to customization to be used for anything you may need it to with custom themes and theme overrides. " Learn more The ultimate AIvitpress 🛠️ VitePress is a Static Site Generator (SSG) designed for building fast, content-centric websites. VitePress is installed as a local dependency in your project, and you have set up the following scripts in your package. md, and api-examples. md, markdown-examples. For example, the files Dec 3, 2023 · Plugin Project Link: vite-plugin-vitepress-auto-sidebar Example Code: example code May 7, 2023 The plugin has been updated to version 1. Markdown Extensions VitePress comes with built in Markdown Extensions. vue files: For example, as shown on this site, you might want to create a separate sections of content in your documentation like "Guide" page and "Config" page. md contained in each sub-directory will automatically be converted to index. Overview Try moving your cursor into the code block below: Oct 1, 2024 · Setting up multiversion build Here are some steps to: Build multiple versions of your docs Get a nice index page listing them Get some versioning docs in the sidebar Speed up builds with caching There are what we do to set up the multiversion build for this site eg this is an example and YMMV. Here are the things that we can add: Markdown Extensions Code Groups Footnotes Task Lists Maths, Diagrams, Charts SEO Improve Vitepress Background Vitepress is a Vue -powered static site generator built on Vite, created by Evan You. Extending the Default Theme VitePress' default theme is optimized for documentation, and can be customized. The frontmatter must be at the top of the Markdown file (before any elements including <script> tags), and must take the form of valid YAML set between triple-dashed lines. md │ └─ index. You can customize: Which languages to display (langs) Available languages for selection (availableLangs) How code is generated for each language (generator) Custom Languages For example We can see their component display and code example display from some excellent UI component libraries such as element-plus and Ant Design Vue This project is based on vitepress and markdown-it implementation to display components and code examples in documents. You can, however, extend the default theme to perform advanced customizations on top of it. Make sure to add items in the right section or subsection! To be fair to people before you, please add your items at the end. For example, if you have an absolute reference to an asset under public in your markdown: Dec 9, 2024 · 本文介绍了 VitePress 的常用运行时 API，包括 useData、useRouter 和 withBase。这些 API 允许访问站点数据、编程导航和路径处理。示例代码展示了如何在 . js with Markdown. You can also use this quick start template on Kinsta’s Application Hosting without any additional configuration. This will look for a component named foo registered in context. App config options define settings that apply to every VitePress site, regardless of what theme it is using. VitePress Powered Static Blog SiteRuntime API Examples This page demonstrates usage of some of the runtime APIs provided by VitePress. . Just want to try it out? Skip to the Quickstart. Prerequisites Before you begin, make sure you have the following installed: Node. Aug 15, 2024 · This is an example of how to set up a static site with VitePress on Kinsta’s Static Site Hosting services from a GitHub repository. vite-plugin-pretty-module-classnames - Adds the filename without the -module suffix to the class names of CSS modules. If you already have an existing project and would like to keep documentation inside the project, start from Step 2. VitePress Visual Configuration Tool. vitepress/dist). Examples of such files include robots. In every markdown file, you can use frontmatter config to override site-level or theme-level config options. A VitePress plugin to display both a preview and code example for a component. All kinds of contributions are valuable to making Vitepress more popular! We ask that you kindly follow this simple guideline. The helper methods are globally importable from vitepress and are typically used in custom theme Vue components. Build-Time Data Loading VitePress provides a feature called data loaders that allows you to load arbitrary data and import it from pages or components. Minimal configuration is required to build an existing VitePress project on Read the Docs. Example 1 Example 2 Example 3 Example 4 Example 5 Example 6 Vitepress and ReadTheDocs example. vue trtc-ar vite-react vite-vue3 vitepress-template vue-template wordpress-gatsby wordpress-hexo-template Setting up markdown indexing can be automated through the Crawler UI for most use cases. Contribute to logicspark/vitepress-theme-api development by creating an account on GitHub. Note: For more integration examples (Docusaurus, VitePress, Astro/Starlight, and generic setups), see the section at the bottom of this page. Custom anchors To specify a custom anchor tag for a heading instead of using the auto-generated one, add a suffix to the heading: Simple Vitepress Theme for API Documentation. vite-plugin-serve-static - Allows serving arbitrary static files not in the public/ directory. md 's YAML frontmatter. For example: You need to tweak the CSS styling; You need to modify the Vue app instance, for example to register global 个人知识库. In a nutshell, VitePress takes your source content written in Markdown, applies a theme to it, and generates static HTML pages that can be easily deployed anywhere. vue files: VitePress export PDF. Vitepress is more suite for simple sites/documentation. But it also can be used to easily create a blog. For example, you can use The above configuration also supports HTML strings. This is easily implemented in vitepress-sidebar with a few simple settings. For those that don't know, Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects, so it might make sense to pair it with a static site generator such as VitePress. A VitePress site速度真的很快！ 采用静态 HTML 实现快速的页面初次加载，使用客户端路由实现快速的页面切换导航。 WARNING You should place your image files in the public folder! In case you set an base you should prefix images with it. Add this topic to your repo To associate your repository with the vitepress-theme topic, visit your repo's landing page and select "manage topics. md. vue 文件中使用： Runtime API Examples This page demonstrates usage of some of the runtime APIs provided by VitePress. Boasting an array of impressive features, it offers built-in text A starter template for VitePressRuntime API Examples This page demonstrates usage of some of the runtime APIs provided by VitePress. Can be used for private vitepress pages. Prerequisites To follow along with this tutorial, you need to have a basic understanding of Routing File-Based Routing VitePress uses file-based routing, which means the generated HTML pages are mapped from the directory structure of the source Markdown files. The data loading is executed only at build time: the resulting data will be serialized as JSON in the final JavaScript bundle. md for details) Special thanks to @ 酱路油过 for contributing code to the plugin! If you encounter any issues or have suggestions during use, feel free to raise an issue or pull Apr 15, 2024 · Vitepress version 1. But developers often neglect it because it can be a hassle to maintain. You can see the frontmatter config being used to create "layouts" inside the VPContent component of the default VitePress theme but this theme has just one Layout. Contribute to vuejs/vitepress development by creating an account on GitHub. Also, every index. md files using VitePress, deployed using Netlify, and including Decap CMS - CUAHSI/vitepress-example Step-by-step VitePress theme customization: guide to building a unique theme layout, adding Markdown content, and removing defaults. js and Markdown, with features such as live-reload, theming, and customizable layout components. This feature helps API consumers understand how to integrate with your API using their preferred language. Vitepress is a Vue-powered static site generator built on top of Vite. Simple Diagram VitePress is a Vue-powered static site generator and a spiritual successor to VuePress, built on top of Vite. vitepress` directory is a reserved location for VitePress' config file, dev server cache, build output, and optional theme customization code. Alert Type: Object || Boolean Default: false Example: Markdown Extension Examples This page demonstrates some of the built-in markdown extensions provided by VitePress. For example, the base directory or the title of the site. 🥳 Where I am now struggling, is I noticed that createContentLoader is failing to collect the Routing generated pages data and supply them in the posts object. GitHub is where people build software. Links Both internal and external links gets special treatments. May 24, 2023 · Vitepress is generally used for writing documentation. It will then exclude, sort, and format certain files based on your settings to read the titles of the sidebar menus, and finally output the settings data according to the sidebar specs required by VitePress. However, they are also usable inside . Jan 2, 2024 · Vitepress exposes a method called createContentLoader that can take a directory full of markdown files and return an array of ContentData objects. What is VitePress? VitePress is a Static Site Generator (SSG) designed for building fast, content-centric websites. The rule of Apr 6, 2023 · Learn how to generate an RSS feed with VitePress using build hooks and the feed npm module. Generate VitePress API Documentation from OpenAPI specs. md file serves as your homepage, while the other two demonstrate using common VitePress features. Using Vue in Markdown In VitePress, each Markdown file is compiled into HTML and then processed as a Vue Single-File Component. Contribute to dicoder-cn/vitepress-simple development by creating an account on GitHub. anchor option. Crafted for developers seeking a hassle-free documentation experience, it excels in swiftly generating comprehensive docs from your annotations. To learn more about Multiple sidebars first, we recommend taking a look at VitePress' official documentation below: https Lightbox Examples This page demonstrates using the VitePress Lightbox plugin to view images. json: Runtime API VitePress offers several built-in APIs to let you access app data. You can access the template from: GitHub: https VitePress is a static site generator designed for creating documentation websites. vitepress/theme/index. The SSR section in official Vue docs provides more context on what SSR is, the relationship between SSR / SSG, and common notes on writing SSR-friendly code. I would like to create a vitepress site and store it on a cdn, but it will be served from a different location. vue files: Find Vitepress Plugin Google Analytics Examples and Templates Use this online vitepress-plugin-google-analytics playground to view and fork vitepress-plugin-google-analytics example apps and templates on CodeSandbox. json ``` The `docs` directory is considered the **project root** of the VitePress site. md file is compiled into a corresponding . html file with the same path. The main useData () API can be used to access site, theme, and page data for the current page. If you use Application In this tutorial, you will learn how to setup Vitepress and understand its code structure and configuration. Consult the Config Reference for full details on all config options. VitePress powers some popular documentation sites like Vuejs, Vitest, faker. Oct 6, 2024 · Runtime API Examples This page demonstrates usage of some of the runtime APIs provided by VitePress. This is an example of how it works: Dec 2, 2020 · I think the answer is: VitePress has a single Layout component, which can (as the default one does) implement many "layouts" via a frontmatter config setting. vue 文件中使用这些 API A starter template for VitePressRuntime API Examples This page demonstrates usage of some of the runtime APIs provided by VitePress. The main useData() API can be used to access site, theme, and page data for the current page. This template includes a basic VitePress setup with vitepress-openapi and a sample OpenAPI specification. You would most likely want to organise your VitePress project into a separate website directory on a real project. To do so, first organize your pages into directories for each desired section: Using Vue in Markdown In VitePress, each Markdown file is compiled into HTML and then processed as a Vue Single-File Component. html, with Multiple Sidebars How-to Multiple sidebars is a feature that allows you to display different sidebar menus based on a specific URI path. 运行时 API 示例 此页面展示了一些 VitePress 提供的运行时 API 的用法。 主要的 useData() API 可用于访问当前页面的站点、主题和页面数据。 它可以在 . Markdown Extension Examples This page demonstrates some of the built-in markdown extensions provided by VitePress. Jan 18, 2023 · Is there a place where I can see websites made with VitePress? Would be interested just in seeing different use cases, specifically if people also have used it for like a simple landing page or som Oct 6, 2024 · Carbon embraces GitHub's monochromatic ethos, offering a theme for VitePress documentation that is sleek, modern, and effortlessly stylish. VitePress will always use the custom theme instead of the default theme when it detects presence of a theme entry file. vue files: Markdown Extensions VitePress comes with built in Markdown Extensions. You can customize the content of the Markdown files to begin writing your docs and add additional ones. However, there are a number of cases where configuration alone won't be enough. More than 150 million people use GitHub to discover, fork, and contribute to over 420 million projects. Vite & Vue powered static site generator. Get a list of all legendary Argentine Rock artists and explore their contributions to the music scene. Internal Links Internal links are converted to router link for SPA navigation. - basmilius/vitepress-plugin-example Apr 3, 2023 · Learn how to generate a dynamic sitemap XML file with VitePress, using the transformHtml and buildEnd build hooks. It can easily convert your markdown files into a full website with routing! In this tutorial, learn how to make your first Vite & Vue powered static site generator. Example: Generate VitePress API Documentation from OpenAPI specs. Oct 26, 2023 · The scaffolded VitePress project will contain two types of files: a single configuration file and three Markdown files: index. This plugin is built using the medium-zoom package. You may use it on any of your pages by specifying layout: home in the frontmatter. You are using the default build output location (. Contribute to zhangmaolongmain/docs-vitepress development by creating an account on GitHub. This is why it's important to use tools that help simplify this process. Follow the steps to create a VitePress project, customize the theme, add navigation, and use built-in elements. You can use In this comprehensive guide, you‘ll learn how to leverage VitePress to build a fast, customizable documentation site for your projects. Jun 22, 2023 · VitePress 快速入门 vitepress 快速入门 vitepress 深入学习 vitepress 部署上线 vitepress 入门教程 vitepress 入门到精通 vitepress 从0到1开始 vitepress 实战教程 快速搭建一个漂亮、简单、SEO 友好的个人独立博客网站，你甚至不需要会代码，只需要会编写 markdown 文档即可，对前端开发、后端以及互联网从业人员十分 For example, if you plan to deploy your site to https://foo. Theme Config: Homepage VitePress provides a homepage layout. This setup includes gzip compression for common text-based assets, rules for serving your VitePress site's static files with proper caching headers as well as handling cleanUrls: true. Type Declaration of VitePress Router: vitepress-openapi. Syntax Highlighting VitePress provides Syntax Highlighting powered by Shiki, with additional features like line-highlighting: Input This page demonstrates usage of some of the runtime APIs provided by VitePress. VitePress Twoslash Static code examples for VitePress using Shiki Twoslash — powered by the syntax engine of Visual Studio Code and the TypeScript compiler. More information is available on the vitepress. Nginx Here is a example of an Nginx server block configuration. Vue 2. comHosted If you have a question or would like some community support we recommend you join us on Slack. Custom anchors To specify a custom anchor tag for a heading instead of using the auto-generated one, add a suffix to the heading: Examples Examples Two of use Relative path Size The following sizes are large, middle, small, 24px Getting Started This section will help you build a basic VitePress documentation site from ground up. What is VitePress? VitePress is an extremely fast static site generator powered by Vite. D2 Diagram Examples This page demonstrates using the VitePress D2 diagram plugin to create and configure both simple and complex diagrams. vue files: How to fix the issue of frontmatter. js, and Vite itself. Contribute to condorheroblog/vitepress-export-pdf development by creating an account on GitHub. txt, favicons, and PWA icons. 0, now supporting prefix deletion and sidebar collapsing. /docs and using default source directory location, then your public directory will be . Once you have you should be able to use all the things below. js VitePress OpenAPI Specification (Version 3) Starter Template To get started quickly with vitepress-openapi, you can use the provided starter template. You want to be looking at Nuxt. md will be compiled into index. vercel. 1. 4. Interestingly This repository contains an example setup of using Typedoc with the typedoc-vitepress-theme. 0 has just been released, marking a significant milestone in the realm of static documentation generation. We'll be exploring lots of examples in this list, including those that would be useful for API documentation, blogs, documentation and more. io/bar/, then base should be set to '/bar/' (it should always start and end with a slash). md │ ├─ markdown-examples. Source Files Markdown files outside the . x Example VitePress Projects For the VitePress projects, since the program does not use Vue Router, but develops a routing system independently, its router APIs and usage are different. Some key features of VitePress: Blazing fast – leverages Vite‘s super-fast dev server and Nov 11, 2022 · This article aims to familiarize you with Vitepress by building a blog using Vitepress and Vue. md contained in each sub Contribute to ohno/vitepress-example development by creating an account on GitHub. Contribute to vite-pwa/vitepress development by creating an account on GitHub. For example, given the following directory structure: Dec 8, 2024 · 本文详细介绍了 VitePress 提供的 Markdown 扩展功能，包括代码块行号显示、图片懒加载、标题锚点、网页链接、表格语法、Emoji 表情、折叠语法、容器使用、代码高亮、代码导入、代码嵌套等配置和使用方法，提供了丰富的代码示例和效果展示。关键词：VitePress Markdown 扩展，VitePress 代码高亮，VitePress Some examples of vue3 integrating leaflet js to implement map functions, displayed using vitePress. Data loaders can be used to fetch remote data, or generate metadata based on local files. A VitePress custom theme is simply an object containing three properties and is defined as follows: Oct 6, 2024 · Runtime API Examples This page demonstrates usage of some of the runtime APIs provided by VitePress. Click any example below to run it instantly or find templates that can be used as a pre-built solution! Quick Start This page demonstrates how to get started with VitePress and includes examples of nested navigation structure. Oct 31, 2024 · Configuration This theme extends the VitePress Default Theme but sets slightly different defaults. Nov 10, 2022 · VitePress is VuePress'little brother, and it is powered by Viteand Vue. For example Code Samples Code Samples allow you to showcase API request examples in multiple programming languages. Some of the below examples are copied from the official documentation, which you checkout to see the full capabilities of D2 diagrams. It is still in early stages, but it is already highly capable and fun to work with. Click any example below to run it instantly or find templates that can be used as a pre-built solution! Apr 25, 2024 · Genji is suitable to writing some interactive API documentation, data reports and tutorials. VitePress uses file-based routing: each . It offers a lightweight and fast development experience using Vue. ts: Example static docs site built from . Before you get started its HEAVILY RECOMMENDED that you use our parent config wrapper. vitepress directory are considered source files. The index. Theme Interface A VitePress custom theme is defined as an object with the following interface: Nov 16, 2022 · By Victor Eke Documentation is a crucial aspect of software development. yaml, Getting started: If you have an existing VitePress project you want to host on Read the Docs, check out our VitePress export PDF. Configuration Start by setting up mvb in your themeConfig. html, and can be visited at the root path / of the resulting VitePress site. md pages because markdown files are compiled into Vue Single-File Components. Overview Config Resolution │ ├─ api-examples. lka fjeslh rqhbmb riw liavr ugorps jqrc gepz kek flup ytgt adc nxgwij aodlz ktgvfqw