Updated SSR

Author: Yev

docs/.vuepress/config.js

@@ -9,10 +9,6 @@ module.exports = {
 
     sidebar,
     nav: [
-      {
-        text: 'Sponsorship',
-        link: 'https://github.com/sponsors/euvl'
-      },
       { text: 'Github', link: 'https://github.com/euvl/vue-js-modal' },
       { text: 'Examples', link: '/examples/' }
     ]

docs/.vuepress/sidebar.js

@@ -6,11 +6,11 @@ module.exports = [
       '/Installation',
       '/Usage',
       '/API',
-      '/Configuration',
-      '/Properties',
       '/Events',
+      // '/Configuration',
+      '/Properties',
       '/Slots',
-      '/FAQ'
+      '/Other'
     ]
   }
 ]

docs/Installation.md

@@ -1,13 +1,15 @@
----
-sidebarDepth: 0
----
-
-## Installation
+# Installation
 
 ```bash
 npm install vue-js-modal --save
 ```
 
+```bash
+yarn add vue-js-modal
+```
+
+## Client
+
 Import plugin in your main file:
 
 ```js
@@ -16,19 +18,35 @@ import VModal from 'vue-js-modal'
 Vue.use(VModal)
 ```
 
-Or as a Nuxt.js plugin:
+## SSR
+
+To use this plugin with Nuxt.js you need to create a plugin file and reference it in the `nuxt.config.js` file.
+
+```js 
+// nuxt.config.js 
+export default {
+  ...
+  /*
+  ** Plugins to load before mounting the App
+  */
+  plugins: [
+    '~plugins/vue-js-modal.js'
+  ],
+}
+```
 
 ```js
+// plugins/vue-js-modal.js
 import Vue from 'vue'
-import VModal from 'vue-js-modal/dist/ssr.nocss'
+import Modal from 'vue-js-modal/dist/ssr.nocss'
 
-// import from 'vue-js-modal/dist/styles.css
+import 'vue-js-modal/dist/styles.css'
 
-Vue.use(VModal)
+Vue.use(VModal, { ... })
 
-export default function(_, inject) {
-  inject('modal', VModal)
-}
+// export default function(_, inject) {
+//   inject('modal', VModal)
+// }
 ```
 
 ::: tip Extracted CSS

docs/FAQ.md docs/Other.mddocs/FAQ.md renamed to docs/Other.md

@@ -1,4 +1,4 @@
-# FAQ 
+# Other 
 
 ## Sponsorship
 

docs/Properties.md

@@ -42,7 +42,7 @@ Draggable property can accept String parameters. With String value, you can spec
 
 Enables scroll within the modal when the height of the modal is greater than the screen.
 
-::: warning
+::: warning Note
 This feature only works when `height` is set to `"auto"`
 :::
 
@@ -104,7 +104,7 @@ List of class that will be applied to the modal window (not overlay, just the bo
 Style that will be applied to the modal window.
 
 
-::: warning
+::: warning Note
 To be able to support string definition of styles there are some hacks in place. 
 
 Vue.js does not allow merging string css definition with an object/array style definition. There are very few cases where you might need to use this property, but if you do - write tests :)
@@ -118,7 +118,7 @@ Width in pixels or percents (50, "50px", "50%").
 
 Supported string values are `<number>%` and `<number>px`
 
-::: warning
+::: warning Note
 This is not CSS size value, it does not support `em`, `pem`, etc. Plugin requires pixels to recalculate position and size for draggable, resaziable modal. 
 If you need to use more value types, please consider contributing to the parser [here](https://github.com/euvl/vue-js-modal/blob/master/src/utils/parser.js).
 :::   
@@ -131,6 +131,11 @@ Height in pixels or percents (50, "50px", "50%") or `"auto"`.
 
 Supported string values are `<number>%`, `<number>px` and `auto`. Setting height to `"auto"` makes it automatically change the height when the content size changes (this works well with `scrollable` feature).
 
+::: warning Note
+This is not CSS size value, it does not support `em`, `pem`, etc. Plugin requires pixels to recalculate position and size for draggable, resaziable modal. 
+If you need to use more value types, please consider contributing to the parser [here](https://github.com/euvl/vue-js-modal/blob/master/src/utils/parser.js).
+:::   
+
 ---
 
 `minWidth: Number (pixels)` `default: 0`

docs/Usage.md

@@ -54,7 +54,6 @@ this.$modal.show(
 * `modal_properties` -modal component properties (see Properties section)
 * `modal_events` - modal event handlers (see Events section)
 
-
 Using **imported** component definition:
 
 ```js
@@ -98,11 +97,12 @@ export default {
 }
 ```
 
+
 ## Dialogs
 
-Dialog is a simplified version of the modal which has most parameters set by default and is useful for quick prototyping, showing alerts etc.
+Dialog is a simplified version of the modal which has most parameters set by default and is useful for quick prototyping, alerts, etc.
 
-To start using dialogs you must set dialog: true in plugin configuration:
+To start using dialogs you must set `dialog: true` in plugin configuration:
 
 ```js
 Vue.use(VModal, { dialog: true })

package-lock.json

@@ -62,20 +62,20 @@
     "sass-loader": "^7.1.0",
     "ts-loader": "^6.2.2",
     "uglifyjs-webpack-plugin": "^2.2.0",
-    "vue": "2.6.10",
+    "vue": "2.6.11",
     "vue-hot-reload-api": "^2.0.8",
     "vue-jest": "^3.0.1",
     "vue-loader": "^15.0.0",
     "vue-style-loader": "^4.1.2",
-    "vue-template-compiler": "2.6.10",
+    "vue-template-compiler": "2.6.11",
     "vue-test-utils": "^1.0.0-beta.11",
     "webpack": "^4.42.1",
     "webpack-cli": "^3.3.11",
     "webpack-merge": "^4.2.2",
     "vuepress": "^1.5.2"
   },
   "peerDependencies": {
-    "vue": "2.6.10"
+    "vue": "2.6.11"
   },
   "dependencies": {
     "resize-observer-polyfill": "^1.5.1"