Weeknotes 2022/11 - Vue 2 to Vue 3 Migrations, Vite Starter Improvements

I started a major Vue 2 to 3 conversion for a major part of the Slipmat.io project. I’m already getting triggered by the numbering after a decade long Python 2 to 3 battle.

I have a script in the repo that counts some basic stats for me. The initial numbers after the first night:

• 12907 lines of code
• 56 Vue components
  • 10 JS
  • 46 TS
  • 5 Script setup

After a week of working 1-2 hours every night:

• 11376 lines of code
• 52 Vue components
  • 8 JS
  • 44 TS
  • 34 Script setup

More Upgrades For Vite + Vue Starter

Last week I swapped Vuex for Pinia, this week I made major improvements both for dev and prod experience in my Vite + Vue starter template.

After testing unplugin-auto-import in a project, I decided to add it to the starter template and will probably be adding it retroactively to most of my Vite-powered projects. I’m not a fan of having things just magically be available in any language (looking at you, PHP) but not needing to import things like ref, computed, and useStore in every single Vue 3 SFC component is just so big productivity boost that the magic is worth it. Also, the automatic imports are clearly documented in vite.config.ts so as long as you’re aware that the autoimport plugin is enabled, the magic kind of disappears. You can easily add your own components and functions to the autoimport config, and everything is fully tree-shaken so there’s really no downside of using it.

I also added cssnano for smaller production CSS builds and learned in the process that optimizing the Tailwind production build is not always as straightforward than just toggling cssnano on.