I needed to build a simple website for a book I am writing. The book is going to be published on the web (similar to Basecamp's Shape Up) and since it's mainly text content, I decided to go with VuePress 2.

After building the site quite easily in VuePress 2, I found out that VitePress existed. After some research, I thought it would be worth giving it a try also as it felt like VitePress was going to take more precedence over VuePress 2 in the future.

This post is in no way comprehensive but it is a quick overview of the comparison between VuePress 2 and VitePress based on my experience.

On the VitePress website, it alludes that VitePress is the new and improved version of what VuePress was. Although VuePress 2 is on its way, it's still having to be somewhat backwards compatible with the original version. They also mention that VitePress is future-oriented.

The way I read into it, VitePress is the future, and VuePress is the past. Even with active development on VuePress 2, it's pretty clear VitePress is going to be a better future-proofed option.

You can see where this post is going but I may as well keep on with the comparison for those who want to be more sure.

The first thing I looked at was the activity being achieved on GitHub. VitePress has had 11 releases this month vs 0 releases for VuePress 2. It is the end of January so maybe the engineers had the month off?

Another thing to note is that VitePress has far more forks, more than 2 times the watchers, 3 times more contributors and almost 6 times more stars than VuePress 2. Any stat you look at, VitePress is way more active.

Setting up the sidebar in VitePress is an absolute dream compared to VuePress. You can have multiple sidebars based on a subfolder.

Since it's a newer project, the authors were able to capitalize on improving the configuration and simplify it.

When developing in VuePress 2 I was able to swap out components in the config file. This was cool and a bit of a challenge when I switched to VitePress. 

I liked that I could leverage the default theme more in VuePress 2 where is you'll only get so far in VitePress before you have to create your own.

One thing VitePress does claim is it's less configurable and minimalist. At first look, it does feel this way but once I got stuck into VitePress and started understanding how it works, I found that I had a lot of ability to customize. It really will depend on how much you want to change the layout. A lot can be done via CSS and slots.

VitePress can be a little more challenging to customize as a lot of the styles are scoped within Vue components. So when you want to adjust styles, the use of !important was required several times which is a bit icky.

Hiding the Nav Bar seems like a weird thing to do in the first place but for my use case, it was a handy thing in VuePress 2. In VitePress, there is no such luxury.

One thing I loved in VitePress was how easy it was to access the frontmatter data within markdown files and use it. What required me to use a custom component in VuePress 2, I was able to do it within a single markdown file in VitePress.

This one is a pro or a con depending on what you require. VitePress does not support the prev and next links without using a sidebar. This is a massive pro if you use sidebars as it will automatically add the links for you.

I wasn't using the sidebar so I had to create a custom version of the prev and next links. I was able to do this by extending the default theme and using slots to add them in. I was doing this already as I was making use of other slots so this was not big deal and easy to maintain.

VitePress is my choice! It's more active, future-proofed and although claimed to be less configurable and minimalist, I found there was plenty of power given to me as the developer to customize most things.

-Ben