A tiny weather app
🚀 Demo ● 📊 Results

This is a simple weather app, built in Vue 3 (as well as also 10 other frontend frameworks) in order to review, compare and benchmark frontend web frameworks.

• 🌦️ 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

Task	Status
Test - Executes all e2e and unit tests
Lint - Verifies code style and quality
Build - Builds and deploys the app

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

npm run dev    # Start dev server (vite --port 3000)
npm test       # Run tests
npm run lint   # Run lint checks
npm build      # Build for production (vite build)
npm start      # Serve built prod app (from ./dist)

For troubleshooting, use npm run verify from the root of the project.

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.

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

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

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

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

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.

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.

Since the weather app is very simple, it may be helpful to see a more practical implementation of a Vue 3 app. So, checkout:

Dashy - Highly configurable self-hostable server dashboard
🐙 Get it on GitHub at github.com/Lissy93/dashy
🌐 View the website at dashy.to

Weather-Front is licensed under MIT © Alicia Sykes 2025.
View Attributions for credits, thanks and contributors.