VitePress 📝💨 VuePress clone built on top of Vite

13 hours ago Evan You announced VitePress, "the VuePress' little brother, built on top of vite".

https://t.co/6X2EPXfCml

— Evan You (@youyuxi) April 30, 2020

VitePress has a lot improvements over VuePress, as you can deduce from the name it uses vite under the hood which involves really faster hot updates and a blazing fast dev server because it doesn't require any compilation with Webpack as in VuePress (that's possible because vite intercepts requests to .vue files and compiles them on the fly, and it's instantly fast). VitePress uses Rollup internally reducing the time of static site building and generates lighter pages thanks to Vue 3 tree-shaking and Rollup code splitting. Here you can find the complete list of all the improvements made by VitePress.

Try it!

VitePress is in early WIP and requires Nodejs >= 12 (I use 12.16.3 LTS). Install VitePress in your project

npm install -D vitepress

And create a simple markdown file

echo '# Hello VitePress' > index.md

To run the dev server

npx vitepress

To run a complete build

npx vitepress build

The generated static site is in .vitepress/dist.

You can easily override the main theme creating theme folder inside .vitepress with two files, Layout.vue

<template>
  <div class="theme-container">
    <h1>{{ $site.title }}</h1>
    <p>{{ $site.description }}</p>
    <Content/>
  </div>
  <Debug/>
</template>

<style>
.theme-container {
  font-family: Arial, Helvetica, sans-serif;
  color: #2f495e;
}
a {
  color: #00c58e;
}
</style>

And index.js

import Layout from './Layout.vue'

export default {
  Layout,
  NotFound: () => 'custom 404',
  enhanceApp({ app, router, siteData }) {}
}

I made a repository to try VitePress and its upcoming features!

Happy coding 👨🏻‍💻