πŸ’š

Vue

Progressive framework that's incrementally adoptable with flexible architecture

Results Summary

Performance

99%
Lighthouse Score

Bundle Size

28.7KB
Gzipped

Build Time

1.8s
Average

Load Time

1.9s
LCP

Complexity

57
Cyclomatic

Performance Metrics

CLS
0.0001
FCP
1572ms
LCP
1932ms
TBT
3ms

Bundle Analysis

Compression
2.6x
File Count
1
JS %
100.0%
Total Size
74.8KB

Build Info

Build Time
1.8s
Output Size
2.2MB
HMR Time
105ms
Dev Startup
1.0s

About the Vue Weather Front App

Status

  • Lint
  • Build
  • Test

Usage Instructions

First, follow the repo setup instructions.
Then cd into ./apps/vue/ and and use the following commands:

  • Dev Command npm run dev
  • Test Command npm run test
  • Lint Command npm run lint
  • Build Command npm run build
  • Start npm start
For troubleshooting, use npm run verify from the root of the project.

App Requirements

The purpose of this project, was to build the same identical app in every frontend framework, in order to benchmark and compare their performance. As such, each app is built to meet identical requirements, which are then verified with the test suite.

Technical Requirements

  • Binding user input and validation
  • Fetching external data asynchronously
  • Basic state management of components
  • Handling fallback views (loading, errors)
  • Using browser features (location, storage, etc)
  • Logic blocks, for iterative content and conditionals
  • Lifecycle methods (mounting, updating, unmounting)

Feature Requirements

  • 🌦️ Live weather conditions
  • πŸ“… 7-day weather forecast
  • πŸ” City search functionality
  • πŸ“ Geolocation support
  • πŸ’Ύ Persistent location storage
  • πŸ“± Responsive design
  • β™Ώ Accessible interface
  • 🎨 Multi-theme support
  • πŸ§ͺ Fully unit tested
  • 🌐 Internationalized

Vue Implementation

Composition API

The App.vue uses Vue 3's Composition API with <script setup> syntax, providing a more flexible and reusable way to organize component logic compared to the Options API.

Single File Components

All components use Vue's SFC format, combining template, script, and style in a single .vue file with clear separation of concerns.

Reactive References

Uses Vue's ref() for reactive state management, with automatic reactivity tracking that eliminates the need for manual dependency management.

Template Directives

Leverages Vue's powerful template directives like v-if, v-for, and event binding with @ syntax for declarative and readable templates.

Lifecycle Hooks

The onMounted hook demonstrates Vue's composition API lifecycle management, providing a clean way to handle component initialization.

About Vue

Real-world App

Since the weather app is very simple, and doesn't show of the full features of a framework, it may be helpful to see a more practical implementation of a Vue app. So, checkout:
Dashy Logo

Dashy

Highly configurable self-hostable server dashboard

Intro to Vue

About Vue

Vue was created by Evan You after working on Angular at Google, and it became hugely popular thanks to its simplicity. It mixes the best ideas of Angular and React but with a gentler learning curve. Its ecosystem includes Vue Router and Vuex, and it’s used by Alibaba, Xiaomi and GitLab. Developers love its approachability and elegance.

My thoughts on Vue

Vue sits in the Goldilocks zone - not as minimal as Alpine, not as opinionated as Angular, just right for most projects. It feels like the framework that actually learned from React's mistakes while keeping the good parts. Single File Components are brilliant, the template syntax is intuitive, and reactivity just works without the mental gymnastics of useEffect.

For our weather app, Vue felt natural and productive. The v-if, v-for, and v-model directives handle conditional rendering, lists, and form inputs elegantly. No weird JSX quirks, no manual event handling - just HTML that does what you expect. The Composition API gives you React-style logic organization when you need it, but Options API is still there for simpler components.

The reactivity system using Proxies is genuinely impressive. Change a data property and everything dependent on it updates automatically. No useState, no memoization hell, no stale closures. Vue tracks dependencies behind the scenes and updates only what needs to change.

The Single File Component format is perfect - template, script, and styles all in one file with proper scoping. <style scoped> means your CSS only affects that component, no global pollution or CSS-in-JS complexity. It just works the way you'd expect.

Vue's ecosystem is mature without being overwhelming. I didn't need Vue Router or Pinia for this simple app, but they're there when you need them.

I chose Vue for Dashy, because it both has everything I needed, but also is incredbily easy, so contributors could add their own widgets and features, with out a steep learning curve.

Choosing a Framework

Stack Match Stack Match

Not sure if Vue is right for your project? Use Stack Match to select your preferences and get a tailored recommendation based on the benchmark data.

Stack Match Screenshot