DEV Community

Ashraf Alam
Ashraf Alam

Posted on

Progressive Web Applications (PWA) Quick Start Sample Project with Vue.js

Progressive Web Applications (PWA) are re-defining web user experience just like native applications, with offline, notification support etc.

Vue.JS is being one of the primary frameworks driving web experience into next level with PWA.

Been experimenting with it recently, and built a simple weather application from scratch.

People who are interested about PWA can check the following github repo to see how easy to build PWA with VueJS.

PWA Weather Application Features

  • Ability to view hourly and daily weather forecast for given city
  • Ability to select city based on current location
  • Ability to save favourite city (with offline capability)
  • Offline ability to view UI and weather data
  • Ability to show offline status

Give a Star! ⭐

If you like or are using this project to learn or start your solution, please give it a star. Thanks!

Alt Text

Tools & APIs

Web Frameworks & Plug-ins

Web API's / SDK's

Recommended Tools

Storage

Getting Started

Clone the Repository

Clone the repository from the following location:

https://github.com/AshrafAlam/vue.pwa.weather.app.git
Enter fullscreen mode Exit fullscreen mode

Install

Open command prompt and navigate to the directory where the above source is cloned.

Run the following command to install required packages:

yarn install
Enter fullscreen mode Exit fullscreen mode

Check here to get started with yarn package management.

Run in Local Environment

Run the following command to run the application in local development server

yarn serve
Enter fullscreen mode Exit fullscreen mode

Open the application in browser: http://localhost:8080.

Build Production Output

Run the following command to build production output to be deployed in production server

yarn build
Enter fullscreen mode Exit fullscreen mode




References

Keep Connected!

Will be writing articles providing details of the technologies and architecture. You can watch or mark star the repo for future updates.

https://github.com/AshrafAlam/vue.pwa.weather.app

Enjoy!

Top comments (0)