rename configuration, add docs

Author: hunterliu1003

README.md

@@ -84,7 +84,7 @@ yarn add vue-final-modal
 ```js
 import VueFinalModal from 'vue-final-modal'
 
-Vue.use(VueFinalModal)
+Vue.use(VueFinalModal())
 ```
 
 ### Nuxt
@@ -95,7 +95,7 @@ Vue.use(VueFinalModal)
 // plugins/vue-final-modal.js
 import VueFinalModal from 'vue-final-modal/lib'
 
-Vue.use(VueFinalModal)
+Vue.use(VueFinalModal())
 ```
 
 - **Add plugin into `nuxt.config.js`**
@@ -152,6 +152,33 @@ export default {
 this.$vfm.show('example')
 ```
 
+## **Configuration**
+
+> Only work in v0.18+
+
+Configuration options can be passed as a second argument to `Vue.use`.
+
+```js
+import VueFinalModal from 'vue-final-modal'
+
+Vue.use(VueFinalModal(), { ... })
+```
+
+### `componentName`
+
+- Type: `String`
+- default: `'VueFinalModal'`
+
+Changes component name from "VueFinalModal" to any other string value. It is useful when there is already a global "modal" component.
+
+### `key`
+
+- Type: `String`
+- default: `'$vfm'`
+
+Changes API name from "$vfm" to any other string value. It is useful when you use `vue-final-modal` as spinner, toast, notify, etc.
+
+
 ## **API**
 
 Plugin API can be called within any component through `this.$vfm`.

dist/VueFinalModal.esm.js

@@ -3,7 +3,7 @@ title: Introduction
 description: 'Vue Final Modal is a renderless, stackable, detachable and lightweight modal component.'
 position: 0
 category: Getting Start
-version: 0.17
+version: 0.18
 features:
   - Support Vue 3 and Vue 2
   - Tailwind CSS friendly
@@ -100,7 +100,7 @@ npm install vue-final-modal
 ```js[main.js]
 import VueFinalModal from 'vue-final-modal'
 
-Vue.use(VueFinalModal)
+Vue.use(VueFinalModal())
 ```
 
 ### Nuxt
@@ -110,7 +110,7 @@ Vue.use(VueFinalModal)
 ```js[plugins/vue-final-modal.js]
 import VueFinalModal from 'vue-final-modal/lib'
 
-Vue.use(VueFinalModal)
+Vue.use(VueFinalModal())
 ```
 
 - **Add plugin into `nuxt.config.js`**
@@ -166,6 +166,32 @@ export default {
 this.$vfm.show('example')
 ```
 
+## **Configuration**
+
+<badge>v0.18+</badge>
+
+Configuration options can be passed as a second argument to `Vue.use`.
+
+```js
+import VueFinalModal from 'vue-final-modal'
+
+Vue.use(VueFinalModal(), { ... })
+```
+
+### `componentName`
+
+- Type: `String`
+- default: `'VueFinalModal'`
+
+Changes component name from "VueFinalModal" to any other string value. It is useful when there is already a global "modal" component.
+
+### `key`
+
+- Type: `String`
+- default: `'$vfm'`
+
+Changes API name from "$vfm" to any other string value. It is useful when you use `vue-final-modal` as spinner, toast, notify, etc.
+
 ## **API**
 
 <badge>v0.15+</badge>

dist/VueFinalModal.esm.js.map

@@ -2,15 +2,15 @@ import { bindPrototype, registComponent } from './PluginCore'
 import { DUPLICATE_PLUGIN_COMPONENT, DUPLICATE_COMPONENT } from './utils/errors'
 
 const defaultOptions = {
-  name: 'VueFinalModal',
-  cmd: '$vfm'
+  componentName: 'VueFinalModal',
+  key: '$vfm'
 }
 
 const Plugin = () => ({
   install(Vue, options) {
     const _options = Object.assign({}, defaultOptions, options)
-    const isDuplicateCmd = Vue.prototype[_options.cmd]
-    const isDuplicateComponent = Vue.options.components[_options.name]
+    const isDuplicateCmd = Vue.prototype[_options.key]
+    const isDuplicateComponent = Vue.options.components[_options.componentName]
 
     if (isDuplicateComponent) {
       console.warn(isDuplicateCmd ? DUPLICATE_PLUGIN_COMPONENT : DUPLICATE_COMPONENT)

dist/VueFinalModal.umd.js

@@ -29,18 +29,18 @@ function createVfm() {
   }
 }
 
-export function bindPrototype(Vue, { cmd }) {
+export function bindPrototype(Vue, { key }) {
   const vfm = createVfm()()
-  Object.defineProperty(Vue.prototype, cmd, {
+  Object.defineProperty(Vue.prototype, key, {
     get() {
       return vfm
     }
   })
 }
 
-export function registComponent(Vue, { name, cmd }) {
-  Vue.component(name, {
+export function registComponent(Vue, { componentName, key }) {
+  Vue.component(componentName, {
     ...VueFinalModal,
-    props: { ...VueFinalModal.props, cmd: { type: String, default: cmd } }
+    props: { ...VueFinalModal.props, $_key: { type: String, default: key } }
   })
 }

dist/VueFinalModal.umd.js.map

@@ -111,7 +111,7 @@ export default {
   }),
   computed: {
     api() {
-      return this[this.cmd]
+      return this[this.$_key]
     },
     isComponentReadyToBeDestroyed() {
       return (

docs/content/en/index.md

@@ -1,4 +1,4 @@
 export const DUPLICATE_PLUGIN_COMPONENT =
-  '[vue-final-modal] Duplicate registration plugin and component of VueFinalModal.'
+  '[vue-final-modal] Duplicate registration API key and componentName of VueFinalModal.'
 
-export const DUPLICATE_COMPONENT = '[vue-final-modal] Duplicate registration component of VueFinalModal.'
+export const DUPLICATE_COMPONENT = '[vue-final-modal] Duplicate registration componentName of VueFinalModal.'