Fixed for Options API

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)
+[MIT License](https://opensource.org/licenses/MIT)

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",

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);
 }