diff --git a/.gitignore b/.gitignore
index 6eef53f..7baef2d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,5 @@
.DS_Store
node_modules/
npm-debug.log
+package-lock.json
*.map
diff --git a/README.md b/README.md
index 7b1b665..a15e50e 100644
--- a/README.md
+++ b/README.md
@@ -18,7 +18,7 @@ npm install vue-js-modal --save
### How to use
-Include plugin in your main.js file.
+Include plugin in your `main.js` file.
```javascript
import vmodal from 'vue-js-modal'
@@ -26,13 +26,15 @@ import vmodal from 'vue-js-modal'
Vue.use(vmodal)
```
-Create modal
+Create modal:
+
```html
hello, world!
```
-Call it from anywhere in the app
+Call it from anywhere in the app:
+
```javascript
methods: {
show () {
@@ -44,6 +46,27 @@ methods: {
}
```
+### SSR
+
+Include plugin in your `nuxt.config.js` file:
+
+```javascript
+module.exports = {
+ plugins: ['~plugins/vue-js-modal']
+}
+```
+
+And your `plugins/vue-js-modal.js` will look like:
+
+```javascript
+import Vue from 'vue'
+import VModal from 'vue-js-modal/dist/ssr.index'
+
+Vue.use(VModal)
+```
+
+For full demo please look at `demo/server_side_rendering`
+
### Properties
| Name | Required | Type | Default | Description |
@@ -60,7 +83,7 @@ methods: {
| minWidth | false | Number | 0 | The minimum width to which modal can be resized |
| minHeight | false | Number | 0 | The minimum height to which modal can be resized |
| pivotX | false | Number (0 - 1.0) | 0.5 | Horizontal position in %, default is 0.5 (meaning that modal box will be in the middle (50% from top) of the window |
-| pivotY | false | Number (0 - 1.0) | 0.5 | |
+| pivotY | false | Number (0 - 1.0) | 0.5 | |
### Events
@@ -109,7 +132,7 @@ export default {
```
-This example, initializes `time` variable every time the modal is being opened.
+This example, initializes `time` variable every time the modal is being opened.
And then forbits closing it for the next 5000 ms
### Other
@@ -122,15 +145,15 @@ Example:
```vue
-
+
-
-
+
+
Hello, ☀️!
-
+
```
@@ -138,7 +161,7 @@ Example:
#### Draggable handler
-Draggable property can accept not only `Boolean` but also `String` paramenters. With `String` value, you can specify a CSS selector to the element which will be a "handler" for dragging.
+Draggable property can accept not only `Boolean` but also `String` paramenters. With `String` value, you can specify a CSS selector to the element which will be a "handler" for dragging.
Example:
@@ -156,7 +179,7 @@ Example:
To run an example:
```sh
-# Clone repo
+# Clone repo
git clone https://github.com/euvl/vue-js-modal.git
@@ -172,5 +195,3 @@ cd demo
npm install
npm run dev
```
-
-
diff --git a/demo/server_side_rendering/plugins/vue-js-modal.js b/demo/server_side_rendering/plugins/vue-js-modal.js
index 68fe520..b45838e 100644
--- a/demo/server_side_rendering/plugins/vue-js-modal.js
+++ b/demo/server_side_rendering/plugins/vue-js-modal.js
@@ -1,4 +1,4 @@
import Vue from 'vue'
-import VModal from 'vue-js-modal/dist/ssr.index.js'
+import VModal from 'vue-js-modal/dist/ssr.index'
Vue.use(VModal)