veather

Veather stands for Vue + Weather

Simple weather app based on OpenWeatherMap API

Table of Contents

• Introduction
• Features
• Project structure
• Project setup

Introduction

Basic app for viewing weather fast. More of a practice project.

Project uses:

• Vue.js v2 (Vue router, Vuex)
• Vuetify
• date-fns
• ESLint
• Prettier
• StyleLint
• Sass
• OpenWeatherMap API
• Axios
• TypeScript

Features

• Simple and clean interface
• Ability to save cities to localStorage
• Quick access to specific cities by URL
• Quick access to saved cities from home page

Project structure

• src
  • @types - Custom types for TypeScript
    • store.d.ts - Custom Vuex state types
    • weatherData.d.ts - OpenWeatherMap API responses types
  • assets
  • components - Custom components
  • modules
    • axios.ts - Global Axios instance with predefined defaults
  • plugins - Vue CLI plugins
    • vuetify.ts - Vuetify config
  • router - Vue router config and routes
    • index.ts - Router instance init
  • store - Vuex config
    • weather - Vuex module for managing weather data
    • index.ts - Vuex instance init
  • views - Vue pages
    • FullReport.vue - View of the weather full report page
    • Home.vue - Home page view. Contains saved cities data
  • App.vue - Main Vue layout
  • main.ts - Vue mount instance
  • shims-*.d.ts - Vue typescript shims

Project setup

1. Clone the repo.

2. Create .env.local file at the root and add your OpenWeatherMap API key:

VUE_APP_API_KEY=

3. Install dependencies:

yarn install

Compiles and hot-reloads for development

yarn serve

Compiles and minifies for production

yarn build

Lints and fixes files

yarn lint

Customize configuration

See Configuration Reference.