loading...
Cover image for VitePress ๐Ÿ“๐Ÿ’จ VuePress clone built on top of Vite

VitePress ๐Ÿ“๐Ÿ’จ VuePress clone built on top of Vite

astagi profile image Andrea Stagi ใƒป2 min read

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

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 ๐Ÿ‘จ๐Ÿปโ€๐Ÿ’ป

Posted on May 1 by:

astagi profile

Andrea Stagi

@astagi

CTO @ Lotrรจk, ๐Ÿปhunter by day, FLOSS ๐Ÿ‘จ๐Ÿปโ€๐Ÿ’ป, ๐Ÿ“ธ and ๐ŸŽธby night, unable to repair your ๐Ÿ–จ. Ginger ๐Ÿตaddicted, ๐Ÿฑlover.

Discussion

markdown guide