Results Summary
Performance
Bundle Size
Build Time
Load Time
Complexity
Performance Metrics
Bundle Analysis
Build Info
About the Vue Weather Front App
Status
-
Lint
-
Build
-
Test
Links
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
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: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
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.
