<template>
	<button @click="open">Open hidden content</button>
	<modal :name="modalName" v-slot="{ isShowed }">
		<h1 v-id="isShowed">My Visible Content</h1>
		<button @click="hide">Hide</button>
	</modal>
</template>

<script>
	export default {
		data(){
			return {
				modalName:"myModal",
			}
		},
		methods:{
			show(){
				this.$modalviewer.show(this.modalName)
			},
			hide(){
				this.$modalviewer.hide(this.modalName)
			}
		}
	}
</script>

<template>
	<div v-if="isShowed">
		<h1 v-id="isShowed">My Visible Content</h1>
		<button @click="hide">Hide</button>
	</div>
</template>

<script>
	import { ModalViewer } from "vue-modal-viewer";

	export default {
		mixins:[ModalViewer.mixin],
		props:{//Set default name
			name:{
				type:String,
				default:"trstModal"
			}
		}
	}
</script>