DEV Community

Cover image for VitePress 📝💨 VuePress clone built on top of Vite
Andrea Stagi
Andrea Stagi

Posted on

VitePress 📝💨 VuePress clone built on top of Vite

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

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
Enter fullscreen mode Exit fullscreen mode

And create a simple markdown file

echo '# Hello VitePress' > index.md
Enter fullscreen mode Exit fullscreen mode

To run the dev server

npx vitepress
Enter fullscreen mode Exit fullscreen mode

To run a complete build

npx vitepress build
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

And index.js

import Layout from './Layout.vue'

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

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

Happy coding 👨🏻‍💻

Top comments (0)