惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
V
V2EX
WordPress大学
WordPress大学
U
Unit 42
I
InfoQ
A
About on SuperTechFans
宝玉的分享
宝玉的分享
J
Java Code Geeks
博客园 - 司徒正美
爱范儿
爱范儿
Engineering at Meta
Engineering at Meta
G
Google Developers Blog
人人都是产品经理
人人都是产品经理
小众软件
小众软件
Microsoft Security Blog
Microsoft Security Blog
L
LangChain Blog
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
Hugging Face - Blog
Hugging Face - Blog
H
Hackread – Cybersecurity News, Data Breaches, AI and More
aimingoo的专栏
aimingoo的专栏
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
Last Week in AI
Last Week in AI
腾讯CDC
Recent Announcements
Recent Announcements

The Vue Point

Announcing Vue 3.5 | The Vue Point Announcing Vue 3.4 | The Vue Point Vue 2 is Approaching End Of Life Announcing Vue 3.3 | The Vue Point Volar: a New Beginning | The Vue Point 2022 Year In Review | The Vue Point On Escape's Vue 2 to Svelte Migration Volar 1.0 "Nika" Released! | The Vue Point Vue 2.7 "Naruto" Released | The Vue Point Vue 2.7 is Now in Beta Vue 3 as the New Default Vue 3.2 Released! | The Vue Point Reflections for 2020-2021 | The Vue Point Announcing Vue 3.0 "One Piece"
Announcing VitePress 1.0 | The Vue Point
2024-03-21 · via The Vue Point

vitepress logo

Today we are happy to announce the (long overdue) 1.0 release of VitePress!

VitePress is a Static Site Generator (SSG) designed for building fast, content-centric websites. 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.

VitePress is built on top of Vite and Vue, and is the spiritual successor and modern replacement of VuePress.


What can I use VitePress for? ​

  • Documentation

    VitePress ships with a default theme designed for technical documentation. It powers the documentation for Vite, Rollup, Pinia, VueUse, Vitest, D3, UnoCSS, Iconify and many more.

    The official Vue.js documentation is also based on VitePress, but uses a custom theme shared between multiple translations.

  • Blogs, Portfolios, and Marketing Sites

    VitePress supports fully customized themes, with the developer experience of a standard Vite + Vue application. Being built on Vite also means you can directly leverage Vite plugins from its rich ecosystem. In addition, VitePress provides flexible APIs to load data (local or remote) and dynamically generate routes at build time. You can use it to build almost anything as long as the data can be determined at build time.

    This very blog is built with VitePress' custom theme and data loading API.

Developer experience ​

VitePress aims to provide a great Developer Experience (DX) when working with Markdown content.

  • Vite-Powered: instant server start, with edits always instantly reflected (<100ms) without page reload.

  • Built-in Markdown Extensions: Frontmatter, tables, syntax highlighting... you name it. Specifically, VitePress provides many advanced features for working with code blocks, making it ideal for highly technical documentation.

  • Vue-Enhanced Markdown: each Markdown page is also a Vue Single-File Component, thanks to Vue template's 100% syntax compatibility with HTML. You can embed interactivity in your static content using Vue templating features or imported Vue components.

Performance ​

Unlike many traditional SSGs where each navigation results in a full page reload, a website generated by VitePress serves static HTML on the initial visit, but becomes a Single Page Application (SPA) for subsequent navigation within the site. This model, in our opinion, provides an optimal balance for performance:

  • Fast Initial Load

    The initial visit to any page will be served the static, pre-rendered HTML for fast loading speed and optimal SEO. The page then loads a JavaScript bundle that turns the page into a Vue SPA ("hydration"). Contrary to common assumptions of SPA hydration being slow, this process is actually extremely fast thanks to Vue 3's raw performance and compiler optimizations. On PageSpeed Insights, typical VitePress sites achieve near-perfect performance scores even on low-end mobile devices with a slow network.

  • Fast Post-load Navigation

    More importantly, the SPA model leads to better user experience after the initial load. Subsequent navigation within the site will no longer cause a full page reload. Instead, the incoming page's content will be fetched and dynamically updated. VitePress also automatically pre-fetches page chunks for links that are within viewport. In most cases, post-load navigation will feel instant.

  • Interactivity Without Penalty

    To be able to hydrate the dynamic Vue parts embedded inside static Markdown, each Markdown page is processed as a Vue component and compiled into JavaScript. This may sound inefficient, but the Vue compiler is smart enough to separate the static and dynamic parts, minimizing both the hydration cost and payload size. For the initial page load, the static parts are automatically eliminated from the JavaScript payload and skipped during hydration.


The path to VitePress 1.0 wouldn't have been possible without the hard work of our contributors. In particular, shout out to Kia King Ishii (@kiaking) for creating the beautiful design for the default theme, and Divyansh Singh (@brc-dd) for tirelessly leading the maintenance and pushing new features.