doc: update initialization guide

README.md

@@ -34,12 +34,21 @@ Install the library via npm:
 ```
 npm i vue-ellipse-progress
 ```
-The component is provided as a Vue.js plugin. So just initialize it in your ``main.js``:
+You can initialize the component globally as a plugin or import it a specific component of your app.
+
+#### Initialize as Plugin 
+Import and initialize the component in your `main.js`. After initialization, the component is available under `<ve-progress/>`.
+You can also assign a custom name to the component:
 ```js
 import { createApp } from "vue";
-import VueEllipseProgress from 'vue-ellipse-progress';
-createApp(App).use(VueEllipseProgress);
-// createApp(App).use(VueEllipseProgress, "vep"); you can define a name and use the plugin like <vep/>
+import veProgress from 'vue-ellipse-progress';
+createApp(App).use(veProgress);
+// createApp(App).use(veProgress, "vep"); define custom name
+```
+
+#### Import component
+```js
+import { VeProgress } from 'vue-ellipse-progress';
 ```
 
 ### CDN
@@ -54,7 +63,7 @@ Just add the following line to your HTML and start using the component, nothing
 ## Usage
 After you have initialized the component, use it everywhere you want in your application:
 ```html
-<vue-ellipse-progress 
+<ve-progress 
   :data="circles"                    
   :progress="progress"
   :angle="-90"
@@ -85,12 +94,12 @@ After you have initialized the component, use it everywhere you want in your app
   <span slot="legend-value">/200</span>
   <p slot="legend-caption">GOOD JOB</p>
 
-</vue-ellipse-progress>
+</ve-progress>
 ``` 
 ## Options
 You are ready to go with just following line:
 ```html
-<vue-ellipse-progress :progress="progress"/>
+<ve-progress :progress="progress"/>
 ```
 The **[`progress`](#progress)** is the only required property. However, in order to create unique circles that match your design needs, you can use all the properties explained below.
 

package.json

@@ -3,10 +3,10 @@
   "version": "2.0.0-alpha.5",
   "private": false,
   "description": "A Vue.js component to create beautiful animated circular progress bars",
-  "main": "./dist/vep.umd.min.js",
+  "main": "./dist/ve-progress.umd.min.js",
   "scripts": {
     "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build --target lib --formats umd-min --name vep ./src/plugin.js",
+    "build": "vue-cli-service build --target lib --formats umd-min --name ve-progress ./src/plugin.js",
     "lint": "vue-cli-service lint --fix",
     "test": "vue-cli-service test:unit --colors",
     "publish-beta": "npm run lint && npm run build && npm publish --tag beta"

src/App.vue

@@ -38,7 +38,7 @@
         <input type="checkbox" v-model="circles[3].loading" />
       </div>-->
       <div style="border: 1px solid red; display: inline-block">
-        <vue-ellipse-progress
+        <ve-progress
           :size="200"
           :progress="progress"
           :legendValue="1315.56"
@@ -62,9 +62,9 @@
               {{ formattedPrice(counterTick.currentValue) }}
             </span>
           </template>
-        </vue-ellipse-progress>
+        </ve-progress>
       </div>
-      <vue-ellipse-progress
+      <ve-progress
         dot="20 green"
         :loading="loading"
         :size="200"
@@ -79,16 +79,16 @@
         <template v-slot:legend-caption>
           <p slot="legend-caption">TASKS DONE</p>
         </template>
-      </vue-ellipse-progress>
+      </ve-progress>
     </div>
   </div>
 </template>
 <script>
-import VueEllipseProgress from "./components/VueEllipseProgress.vue";
+// import { VeProgress } from "@/plugin";
 
 export default {
   name: "app",
-  components: { VueEllipseProgress },
+  // components: { VeProgress },
   data: () => ({
     line: "round",
     price: "",

src/main.js

@@ -1,9 +1,9 @@
 import { createApp } from "vue";
-import VueEllipseProgress from "@/plugin";
+import veProgress from "@/plugin";
 import App from "./App.vue";
 
 const app = createApp(App);
 
-app.use(VueEllipseProgress);
+app.use(veProgress);
 
 app.mount("#app");