+### Dynamic Modals
+
+In order to instantiate modals at runtime (for lazy-loading or decluttering templates), it is possible to create modals dynamically.
+
+To start using this feature you must set `dynamic: true` in plugin configuration:
+
+```js
+Vue.use(VModal, { dynamic: true })
+```
+
+And include the `` component it in your project:
+
+```vue
+
+```
+
+Call it (the first argument is the component definition, the second are component properties, and the third modal parameters):
+
+```javascript
+this.$modal.show({
+ template: `
+
+
This is created inline
+
{{ text }}
+
+ `,
+ props: ['text']
+}, {
+ text: 'This text is passed as a property'
+})
+```
+
+It can also be used with `.vue` files:
+
+```javascript
+import MyComponent from './MyComponent.vue'
+
+this.$modal.show(MyComponent, {
+ text: 'This text is passed as a property'
+}, {
+ draggable: true
+})
+```
+
For more examples please take a look at [vue-js-modal.yev.io](http://vue-js-modal.yev.io).
### SSR
diff --git a/demo/client_side_rendering/src/App.vue b/demo/client_side_rendering/src/App.vue
index 5772188..b49fcc5 100644
--- a/demo/client_side_rendering/src/App.vue
+++ b/demo/client_side_rendering/src/App.vue
@@ -7,6 +7,8 @@
+
+
Dialog: buttons
+
+
+
+
@@ -118,6 +136,7 @@ import DemoLoginModal from './components/DemoLoginModal.vue'
import DemoDogProfileModal from './components/DogProfileModal.vue'
import DemoConditionalModal from './components/ConditionalModal.vue'
import DemoSizeModal from './components/SizeModal.vue'
+import CustomComponentModal from './components/CustomComponentModal.vue'
export default {
name: 'app',
@@ -203,6 +222,36 @@ export default {
})
},
+ showDynamicRuntimeModal () {
+ this.$modal.show({
+ template: `
+
+
This is created inline
+
{{ text }}
+
+ `,
+ props: ['text']
+ }, {
+ text: 'This text is passed as a property'
+ })
+ },
+
+ showDynamicComponentModal () {
+ this.$modal.show(CustomComponentModal, {
+ text: 'This text is passed as a property'
+ })
+ },
+
+ showDynamicComponentModalWithModalParams () {
+ this.$modal.show(CustomComponentModal, {
+ text: 'This text is passed as a property'
+ }, {
+ resizable: true,
+ adaptive: true,
+ draggable: true,
+ })
+ },
+
dialogEvent (eventName) {
console.log('Dialog event: ' + eventName)
}
diff --git a/demo/client_side_rendering/src/components/CustomComponentModal.vue b/demo/client_side_rendering/src/components/CustomComponentModal.vue
new file mode 100644
index 0000000..ac4b322
--- /dev/null
+++ b/demo/client_side_rendering/src/components/CustomComponentModal.vue
@@ -0,0 +1,12 @@
+
+