From 1a1c6fda7818effb348ca0ee7fbbad1be2944520 Mon Sep 17 00:00:00 2001
From: eeprojectsee <eeprojectsee@gmail.com>
Date: Tue, 6 Sep 2022 10:09:10 +0530
Subject: [PATCH] Fixed for Options API

---
 README.md    | 48 +++++++++++++++++++++++++++++++++++++++++++++---
 package.json |  6 ++++--
 src/index.js |  1 +
 3 files changed, 50 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index 81a89bb..a4ab9c6 100644
--- a/README.md
+++ b/README.md
@@ -1,9 +1,19 @@
 # Vue3 Progress Bar
 
-A infinite progress bar for vue 3
+![npm license](https://img.shields.io/npm/l/@ctechhindi/vue3-progress-bar.svg)
+![npm download](https://img.shields.io/npm/dm/@ctechhindi/vue3-progress-bar.svg)
+![GitHub top language](https://img.shields.io/github/languages/top/ctechhindi/vue3-progress-bar.svg)
+![GitHub issues](https://img.shields.io/github/issues/ctechhindi/vue3-progress-bar.svg)
+[![npm package](https://img.shields.io/npm/v/@ctechhindi/vue3-progress-bar.svg)](https://www.npmjs.com/package/@ctechhindi/vue3-progress-bar)
+
+> A infinite progress bar for vue 3
 
 - [GitHub](https://github.com/ctechhindi/Vue3-Progress-Bar)
 
+## Requirements
+
+- Vue.js `^3.0.0`
+
 ## Installation
 
 ### npm
@@ -28,12 +38,14 @@ app.use(Vue3ProgressBar, {
   //   background: "linear-gradient(45deg, #da7748, #d11111)",
   //   left: "0 %",
   // },
-})
+});
 ```
 
 **`App.vue`**
 
 ```vue
+<!-- Composition API -->
+
 <script setup>
 import { onMounted, inject } from "vue";
 import { useRouter } from "vue-router";
@@ -61,6 +73,36 @@ onMounted(async () => {
 </template>
 ```
 
+```vue
+<!-- Options API -->
+<template>
+  <div id="app">
+    <Vue3ProgressBar></Vue3ProgressBar>
+    <RouterView />
+  </div>
+</template>
+
+<script>
+export default {
+  mounted() {
+    this.$progress.finish();
+  },
+  created() {
+    this.$progress.start();
+
+    this.$router.beforeEach((to, from, next) => {
+      this.$progress.start();
+      next();
+    });
+
+    this.$router.afterEach((to, from) => {
+      this.$progress.finish();
+    });
+  },
+};
+</script>
+```
+
 # License
 
-[MIT License](https://opensource.org/licenses/MIT)
\ No newline at end of file
+[MIT License](https://opensource.org/licenses/MIT)
diff --git a/package.json b/package.json
index 1a1ba0d..4e2d4d7 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ctechhindi/vue3-progress-bar",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "A infinite progress bar for vue 3",
   "homepage": "https://github.com/ctechhindi/Vue3-Progress-Bar",
   "bugs": "https://github.com/ctechhindi/Vue3-Progress-Bar/issues",
@@ -19,7 +19,9 @@
   },
   "keywords": [
     "vue3",
-    "progress-bar"
+    "progress-bar",
+    "progress bar",
+    "vue"
   ],
   "author": "Jeevan Lal",
   "license": "MIT",
diff --git a/src/index.js b/src/index.js
index 5355b1d..243df9d 100644
--- a/src/index.js
+++ b/src/index.js
@@ -29,6 +29,7 @@ function install(app, options = {}) {
   // Vue Component
   app.provide('VUE3_PROGRESS_BAR_DATA', VUE3_PROGRESS_BAR_DATA);
   app.provide('progress', progress)
+  app.config.globalProperties.$progress = progress;
   app.component("Vue3ProgressBar", Vue3ProgressBar);
 }