Documentation has been createds

Author: mustafadalga

README.md

@@ -1,35 +1,93 @@
-# heybooster-loader
+# Heybooster Loader
 
-This template should help get you started developing with Vue 3 in Vite.
+**A plugin developed with Vue 3 and vite.js.**
 
-## Recommended IDE Setup
+<p align="center">
 
-[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
+[![vue version](https://img.shields.io/npm/v/heybooster-loader.svg)](https://www.npmjs.com/package/heybooster-loader)
+[![vue version](https://img.shields.io/badge/vue-3.2-brightgreen.svg)](https://www.npmjs.com/package/heybooster-loader)
 
-## Customize configuration
+</p>
 
-See [Vite Configuration Reference](https://vitejs.dev/config/).
 
-## Project Setup
+## Installing
 
-```sh
-npm install
+### Package manager
+
+Using npm:
+
+```bash
+npm install heybooster-loader
+```
+
+Then, import and register the component:
+
+
+## Global Registration
+
+main.js
+```
+import Loader from "heybooster-loader";
+import "heybooster-loader/style.css"
+
+app.use(Loader);
+```
+
+## Local Registration
+
+* Composition Api
+
+```
+<script setup>
+import { Loader } from "heybooster-loader";
+import "heybooster-loader/style.css";
+</script>
 ```
 
-### Compile and Hot-Reload for Development
+* Options Api
+```
+import { Loader } from "heybooster-loader";
+import "heybooster-loader/style.css";
 
-```sh
-npm run dev
+export default {
+  components: {
+    Loader
+  },
+}
 ```
 
-### Compile and Minify for Production
 
-```sh
-npm run build
+## Usage
+
+
+* Example 1
 ```
+<template>
+  <main>
+    <Loader>
+      <template #description>
+        <span>Please Wait...</span>
+      </template>
+    </Loader>
+  </main>
+</template>
+```
+* Example 2
 
-### Lint with [ESLint](https://eslint.org/)
+```
+<template>
+  <main>
+    <Loader/> 
+  </main>
+</template>
+```
 
-```sh
-npm run lint
+* Example 3
+
+```
+<template>
+  <main>
+    <Loader icon="my-icon.svg"/> 
+  </main>
+</template>
 ```