Vue Weather UI

A beautiful weather components library for Vue 3, integrated with QWeather API and icons.

Features

• 🌡️ Weather Card - Current weather display with detailed information
• 🕐 24 Hour Forecast - Hourly weather prediction with scrollable interface
• 📅 7 Day Forecast - Weekly weather prediction with temperature trends
• 📊 Historical Timeline - Interactive historical weather timeline with auto-play
• 🎨 Flat Design - Clean, modern, and responsive design
• 🌙 Dark Theme - Light and dark theme support
• 🌍 QWeather Integration - Professional weather icons and data
• 📱 Responsive - Mobile-friendly design
• 🎯 TypeScript - Full TypeScript support
• 📦 Easy to Use - Simple installation and API

Installation

npm install vue-weather-ui

Usage

Global Installation

import { createApp } from 'vue'
import VueWeatherUI from 'vue-weather-ui'
import 'vue-weather-ui/dist/style.css'

const app = createApp(App)
app.use(VueWeatherUI)
app.mount('#app')

Local Component Import

<template>
  <WeatherCard :data="weatherData" />
  <HourlyForecast :data="weatherData" />
  <DailyForecast :data="weatherData" />
  <HistoricalTimeline :data="weatherData" @day-select="onDaySelect" />
</template>

<script setup>
import { WeatherCard, HourlyForecast, DailyForecast, HistoricalTimeline } from 'vue-weather-ui'
import 'vue-weather-ui/dist/style.css'

const weatherData = ref(/* your weather data */)
</script>

Components

WeatherCard

Display current weather information.

<WeatherCard 
  :data="weatherData" 
  :show-details="true"
  theme="light"
  locale="zh"
/>

Props:

• data: WeatherData - Weather data object
• showDetails: boolean - Show detailed weather information
• theme: 'light' | 'dark' - Theme mode
• locale: 'zh' | 'en' - Language locale

HourlyForecast

24-hour weather forecast with horizontal scrolling.

<HourlyForecast 
  :data="weatherData" 
  :hours="24"
  theme="light"
  locale="zh"
/>

Props:

• data: WeatherData - Weather data object
• hours: number - Number of hours to display
• theme: 'light' | 'dark' - Theme mode
• locale: 'zh' | 'en' - Language locale

DailyForecast

7-day weather forecast with temperature trends.

<DailyForecast 
  :data="weatherData" 
  :days="7"
  theme="light"
  locale="zh"
/>

Props:

• data: WeatherData - Weather data object
• days: number - Number of days to display
• theme: 'light' | 'dark' - Theme mode
• locale: 'zh' | 'en' - Language locale

HistoricalTimeline

Interactive historical weather timeline with month filtering and auto-play.

<HistoricalTimeline 
  :data="weatherData" 
  :auto-play="false"
  :auto-play-interval="2000"
  theme="light"
  locale="zh"
  @day-select="onDaySelect"
  @day-change="onDayChange"
/>

Props:

• data: WeatherData - Weather data object
• autoPlay: boolean - Enable auto-play
• autoPlayInterval: number - Auto-play interval in milliseconds
• style: TimelineStyle - Custom timeline styles
• theme: 'light' | 'dark' - Theme mode
• locale: 'zh' | 'en' - Language locale

Events:

• day-select: Emitted when a day is selected
• day-change: Emitted when the displayed day changes

Data Structure

WeatherData

interface WeatherData {
  location: Location
  now: WeatherNow
  hourly: WeatherHourly[]
  daily: WeatherDaily[]
  historical: HistoricalWeather[]
}

Location

interface Location {
  name: string
  country: string
  adm1: string
  adm2: string
  lat: string
  lon: string
  tz: string
}

WeatherNow

interface WeatherNow {
  fxTime: string
  temp: string
  icon: string
  text: string
  wind360: string
  windDir: string
  windScale: string
  windSpeed: string
  humidity: string
  precip: string
  pressure: string
  vis: string
  cloud: string
  dew: string
}

Development

# Install dependencies
npm install

# Start development server
npm run dev

# Build library
npm run build:lib

# Build demo
npm run build

# Type check
npm run typecheck

QWeather Integration

This library uses QWeather icons and follows their API data structure. You can get your own API key from QWeather.

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.