13 hours ago Evan You announced VitePress, "the VuePress' little brother, built on top of vite".
— 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 👨🏻💻
Top comments (0)