fixed docs in Nuxt registeration

Author: hunterliu1003

README.md

@@ -103,7 +103,12 @@ Vue.use(VueFinalModal)
 ```js
 // nuxt.config.js
 export default {
-  plugins: ['~plugins/vue-final-modal.js']
+  plugins: [
+    { src: '~plugins/vue-final-modal.js' }
+  ],
+  build: {
+    transpile: ['vue-final-modal']
+  }
 }
 ```
 

docs/content/en/examples/recommended-use.md

@@ -21,15 +21,11 @@ You can create a `higher-order component` easily and can customize `template`, `
 ```vue
 <template>
   <vue-final-modal
-    :value="value"
     v-bind="$attrs"
     classes="modal-container"
     content-class="modal-content"
     v-on="$listeners"
   >
-    <button class="modal__close" @click="$emit('input', false)">
-      <mdi-close></mdi-close>
-    </button>
     <span class="modal__title">
       <slot name="title"></slot>
     </span>
@@ -40,15 +36,15 @@ You can create a `higher-order component` easily and can customize `template`, `
       <button class="vfm-btn" @click="$emit('confirm')">confirm</button>
       <button class="vfm-btn" @click="$emit('cancel')">cancel</button>
     </div>
+    <button class="modal__close" @click="$emit('input', false)">
+      <mdi-close></mdi-close>
+    </button>
   </vue-final-modal>
 </template>
 
 <script>
 export default {
-  name: 'VModal',
-  props: {
-    value: { type: Boolean, default: false }
-  }
+  name: 'VModal'
 }
 </script>
 

docs/content/en/index.md

@@ -120,6 +120,9 @@ export default {
   plugins: [
     '~plugins/vue-final-modal.js'
   ],
+  build: {
+    transpile: ['vue-final-modal'],
+  }
 }
 ```
 

docs/nuxt.config.js

@@ -22,7 +22,8 @@ export default theme({
     ]
   ],
   build: {
-    extractCSS: true
+    extractCSS: true,
+    transpile: ['vue-final-modal']
   },
   css: ['../example/src/assets/css/button.css'],
   modules: ['@nuxtjs/sitemap'],

docs/package.json

@@ -10,7 +10,8 @@
   },
   "dependencies": {
     "@nuxt/content-theme-docs": "^0.6.1",
-    "nuxt": "^2.14.1"
+    "nuxt": "^2.14.1",
+    "vue-final-modal": "^0.16.0"
   },
   "devDependencies": {
     "@nuxtjs/google-analytics": "^2.4.0",

docs/plugins/global.js

@@ -1,6 +1,6 @@
 import Vue from 'vue'
 
-import VueFinalModal from '../../lib'
+import VueFinalModal from 'vue-final-modal/lib'
 
 Vue.use(VueFinalModal)
 

docs/yarn.lock

@@ -9899,6 +9899,11 @@ vue-client-only@^2.0.0:
   resolved "https://registry.yarnpkg.com/vue-client-only/-/vue-client-only-2.0.0.tgz#ddad8d675ee02c761a14229f0e440e219de1da1c"
   integrity sha512-arhk1wtWAfLsJyxGMoEYhoBowM87/i6HLSG2LH/03Yog6i2d9JEN1peMP0Ceis+/n9DxdenGYZZTxbPPJyHciA==
 
+vue-final-modal@^0.16.0:
+  version "0.16.0"
+  resolved "https://registry.yarnpkg.com/vue-final-modal/-/vue-final-modal-0.16.0.tgz#9dc0a9246a8da25f6bceff6e5f78ff2a292d9a88"
+  integrity sha512-JJQQxo2b5xnqX5cqN239cUZZ+83AFrp1eM+rpw+DfmWX1UvxcIu83n8TK3//N8mGHNQiXVvWHSv4JeW9716EDA==
+
 vue-hot-reload-api@^2.3.0:
   version "2.3.4"
   resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz#532955cc1eb208a3d990b3a9f9a70574657e08f2"

example/src/components/hoc/VModal.vue

@@ -1,14 +1,10 @@
 <template>
   <vue-final-modal
-    :value="value"
     v-bind="$attrs"
     classes="modal-container"
     content-class="modal-content"
     v-on="$listeners"
   >
-    <button class="modal__close" @click="$emit('input', false)">
-      <mdi-close></mdi-close>
-    </button>
     <span class="modal__title">
       <slot name="title"></slot>
     </span>
@@ -19,15 +15,15 @@
       <button class="vfm-btn" @click="$emit('confirm')">confirm</button>
       <button class="vfm-btn" @click="$emit('cancel')">cancel</button>
     </div>
+    <button class="modal__close" @click="$emit('input', false)">
+      <mdi-close></mdi-close>
+    </button>
   </vue-final-modal>
 </template>
 
 <script>
 export default {
-  name: 'VModal',
-  props: {
-    value: { type: Boolean, default: false }
-  }
+  name: 'VModal'
 }
 </script>