feat(docs): update README.md

Dongkyuuuu · Sep 5, 2021 · a54b125 · a54b125
1 parent 792f906
commit a54b125
Showing 1 changed file with 10 additions and 59 deletions.
diff --git a/README.md b/README.md
@@ -6,6 +6,8 @@
 
 `reCAPTCHA v2` for `Vue3` : CompositionAPI, Types
 
+If you use [`v0.x`](https://github.com/DongKyuuuu/vue3-recaptcha-v2/tree/v0.3.1), recommend using `v1.x` or higher.
+
 # Installation
 
 #### Yarn
@@ -22,12 +24,10 @@ $ npm install vue3-recaptcha-v2 --save
 
 # Example
 
-`vue-recaptcha` is registered(global) component.
-
 ### Setup
 
 ```js
-// main.ts or main.js
+// main.js
 import { createApp } from "vue";
 import App from "./App.vue";
 import VueRecaptcha from "vue3-recaptcha-v2";
@@ -37,21 +37,19 @@ const app = createApp(App);
 app
   .use(VueRecaptcha, {
     siteKey: "your recaptcha sitekey",
-    componentName: "your custom componet name", // default: 'vue-recaptcha'
     alterDomain: false, // default: false
   })
   .mount("#app");
 ```
 
 ### \*install options
 
-| Option          | Type      | Description                                                                           |
-| --------------- | --------- | ------------------------------------------------------------------------------------- |
-| `siteKey`       | `string`  | (required) recaptcha siteKey                                                          |
-| `componentName` | `string`  | If you want to use custom component name, use this option. (default: `vue-recaptcha`) |
-| `alterDomain`   | `boolean` | `true`: domain replace `www.google.com` with `www.recaptcha.net`                      |
+| Option        | Type      | Description                                                      |
+| ------------- | --------- | ---------------------------------------------------------------- |
+| `siteKey`     | `string`  | (required) recaptcha siteKey                                     |
+| `alterDomain` | `boolean` | `true`: domain replace `www.google.com` with `www.recaptcha.net` |
 
-### Composition API
+### Usage
 
 ```html
 <template>
@@ -70,10 +68,11 @@ app
 
 <script>
   import { ref } from "vue";
-  import { useRecaptcha } from "vue3-recaptcha-v2";
+  import { VueRecaptcha, useRecaptcha } from "vue3-recaptcha-v2";
 
   export default {
     name: "recaptcha",
+    components: { VueRecaptcha },
     setup: () => {
       // Reset Recaptcha
       const { resetRecaptcha } = useRecaptcha();
@@ -104,54 +103,6 @@ app
 </script>
 ```
 
-### Options API
-
-```html
-<template>
-  <vue-recaptcha
-    theme="light"
-    size="normal"
-    :tabindex="0"
-    @widgetId="recaptchaWidget = $event"
-    @verify="callbackVerify"
-    @expired="callbackExpired"
-    @fail="callbackFail"
-  />
-
-  <button @click="actionReset">reset!</button>
-</template>
-
-<script>
-  import { ref } from "vue";
-  import { useRecaptcha } from "vue3-recaptcha-v2";
-
-  export default {
-    name: "recaptcha",
-    data() {
-      return {
-        recaptchaWidget: null,
-      };
-    },
-    methods: {
-      callbackVerify(response) {
-        console.log(response);
-      },
-      callbackExpired() {
-        console.log("expired!");
-      },
-      callbackFail() {
-        console.log("fail");
-      },
-      // Reset Recaptcha action
-      actionReset() {
-        const { resetRecaptcha } = useRecaptcha();
-        resetRecaptcha(this.recaptchaWidget);
-      },
-    },
-  };
-</script>
-```
-
 # API
 
 ## Props