A weather forecast project for vuejs and nuxtjs showcase

• Project Setup
  • Initial step
  • Setting up dev environment
  • Deployment
• Openweathermap API
  • current weather data
  • 5 days forecast
• Libraries
• Credits
  • photo courtesy

1. before running this project, make sure you have openweathermap api key.
2. include the generated key in .env file located in your Root folder

example in your .env file

OPEN_WEATHER_MAP_API_KEY="your_api_key_goes_here"

npm run dev

ensure that you include OPEN_WEATHER_MAP_API_KEY as part of your deployment env

This app deployed using vercel, I find that by registering using github account yields a smooth deployment experience. To deploy in staging environment, create a PR to the main branch, vercel.bot trigger a preview build, in order to make it to production, you can either promote the preview build to production or merge PR into main branch.

this project implement server-middleware, this approach is to protect appid which is passed in the query in order to use the API provided by openweathermap.org, sequence diagram to the rescue!

🔗 link

this API returns current weather data based on

• city
• longitude and latitude

server-middleware route, /api/weather

🔗 link

this API returns 5 days weather forecast data based on

• city

server-middleware route, /api/forecast

• vue
• nuxtjs
• vue-wait
• vuex-persist
• vue-browser-geolocation
• axios
• dayjs
• openweathermap API

• ian dooley @sadswim - unsplash.com