/vue-svelte-comparison-finance-tracker

A finance tracker app wrapped with Astro to compare Vue 3 and Svelte 4 DX

Primary LanguageVue

Svelte 4 and Vue 3 comparison with Astro

This project aims to make a comparison between Svelte 4 and Vue 3 (Single File Components).

Project Structure

It's a simple and unfinished personal finance tracker app where there are a few client components:

  • Sidebar
  • Expense Tracker
  • Income Tracker
  • Total Balance Tracker
  • Input field

Remaining parts of the app are Astro components:

  • Document
  • Header
  • Main Content Wrapper
  • Footer

The styling has been done with TailwindCSS with minimal extension from its default configuration.

Usage

Package manager used is pnpm so, to run the project locally, type the following:

pnpm dev

You can also lint the entire project using Eslint and its plugins to match our used technologies:

pnpm lint

Same thing goes with formatting, using Prettier and its plugins:

pnpm format

More Info

Warning

It's an unfinished project and it needs optimization and I didn't use every API those two frameworks have to offer. It was a learning experience for Vue 3, which I came to reconsider after trying it out on its Vue 2 version. If you have any critique or feedback please open an Issue, I would love to learn more about it.

Conclusion

Thanks for stepping by! I think Vue approach is pretty unique and works very well with Typescript, inferring return types from generics and making the script setup tag less bloated with objects and stuff. I still find Svelte much more straightforward when it comes to APIs and DX in general, but I also understand that Svelte compiler makes you write a JS-like language and not pure Javascript. I'm excited to see if Vue Vapor Mode will enhance its DX and I'm also excited for Svelte 5 release!