Migration to Vite

I took some time to migrate and rework my website to Vite. It's really awesome!

Sep 07, 2023

Motivation

🧐 After reading a lot about Vite and its benefits, I decided to migrate my Vue 3 project - which is build ontop of the Vue CLI - to Vite. I was very curious about the speed and the development experience. There are a lot of articles out there, which are praising Vite, but I wanted to see it for myself. I was also curious about the migration process and how much work it would be. Because it sounded pretty straight forward - which was not the case at least for me!

Idea

💡 The most complex topic on the website is the blog section - basically what you are reading right now. I love to optimize the way my blog is built and I am always looking for ways to improve it with more dynamic features such as Slidershows which can be easily integrated with a few parameters. I researched a lot about Vite in combination with Blogging, which lead me to VitePress. VitePress is awesome and I would choose it if this website was a documentation and guideline like the Vue.js one. But I wanted the customization and flexibility I had with the Vue CLI and my website contains and will further contain more than “just” a blog section. The are some package dependencies which needed to be validated if they are compatible with Vite. All in all it was more like “create a feature branch and try it out”. This way I could easily switch back to the old version if something went wrong.

Implementation

⚙️ I had to do a lot of research and try and error to get it working. It depends on how complex your project is, obviously. Luckily, for me it was not that much because the most complex structure is the blog section. This required me to rework everything and think completely new of it. I got rid of libraries and solutions I was not satisfied with and concepted a new way of managing the content you read here. Vite itself was pretty easy initialized and the project ran fine after some minor configuration.

Caveats and Problems

⚠️ Routing and the build process in combination with Netlify 😒. This was my main concern at the beginning. I use unplugin-vue-router which dynamically takes care of the routing work in the back. For each page I create, it generates new routes. For example, this post here is a .md file, like every other post you read here. Creating this file generates a .d.ts and maps every route automatically. Othewise I use vite-plugin-md for the Markdown to be interpreted since I love .md syntax and writing every blog post in a Vue Component is not the elegant way of blogging. I did some reactive stuff for the title and meta descriptions and a bunch of other stuff which need to be reactive when navigating. This worked pretty well after understanding how the libraries and plugins I use function and how exactly they need to be configured with Vite.

Result

🏁 You just read it! 👆🏼 the blog is now running on Vite. 🎉 Next step is to work on code blocks in Markdown and to style them so I can create some code examples here! I am very happy with the result and the performance. The development experience is awesome and I am looking forward to further develop this website with Vite.