Vue-modal-router NPM

vue-modal-router

elegant to manage spa modals

0.6.0

async modal support

{
  modals:{
    AsyncModal:()=>import('./test/async-modal.vue')
  },
  methods:{
    onClick(){
      this.$modalRouter.push({
        name:'async-modal' // this will load script then open the modal
      })
    }
  }
}

0.5.1

add modalRouter.closeAll()
fix close custom modal bug

{
  methods:{
    onClick(){
      this.$modalRouter.closeAll()
    }
  }
}

0.5.0

add modalRouter.close() method

const mid = this.$modalRouter.push({
  name: "test"
});

this.$modalRouter.close(mid);

Breaking Change

0.4.0 is differenet to 0.3.x
delay and model is config in Vue.use()
suport component level modals,friendly for dyamicImport,to impress performance

install

npm install vue-modal-router

vue-modal-router

use modals like vue-router style way

install

modal component

<template>
  <!-- your modal component -->
  <modal v-model="show">
    <h1>something</h1>
    <button @click="onTest">test</button>
  </modal>
</template>

<script>
  export default {
    props: ["a", "b"],
    data() {
      return {
        show: false
      };
    },
    methods: {
      onTest() {
        this.$emit("test");
      }
    }
  };
</script>

App.vue

<template>
  <div id="app">
    <router-view></router-view>
    <!-- modal placeholder -->
    <modal-router-view></modal-router-view>
  </div>
</template>

import Vue from "vue";
import VueModalRouter from "vue-modal-router";

import CustomEdit from "./custom-edit.vue";
Vue.use(VueModalRouter, {
  model: "show", // this should be equal to modal component model name
  delay: 300 // delay time to destroy modal instance
});

const modalRouter = new VueModalRouter({
  CustomEdit // now modal name can be 'CustomEdit' or 'custom-edit',it will try pascal name
});

new Vue({
  el: "#app",
  modalRouter
});

then in page component

<template>
  <!-- button to open modal -->
  <button v-modal-link="{name: 'custom-edit' }">open custom edit modal</button>
</template>

pass props to modal

<template>
  <!-- button to open modal -->
  <button
    tag="button"
    v-modal-link="{name: 'custom-edit',props: {a: 1, b: 2} }"
  >
    open custom edit modal
  </button>
</template>

with event

<template>
  <!-- button to open modal -->
  <button v-modal-link="{ name: 'custom-edit', on: {test: onModalTest } }">
    open custom edit modal
  </button>
</template>

<script>
  export default {
    methods: {
      onModalTest() {
        console.log("get modal event here");
      }
    }
  };
</script>

use manual api to open a modal

<template>
  <div>
    <button @click="onOpen">
      open
    </button>
  </div>
</template>

<script>
  export default {
    methods: {
      onModalTest() {
        console.log("test here");
      },
      onOpen() {
        const mid = this.$modalRouter.push({
          name: "custom-edit",
          props: { a: 1, b: 2 },
          on: {
            test: this.onModalTest
          }
        });

        setTimeout(() => {
          this.$modalRouter.close(mid);
        }, 2000);
      }
    }
  };
</script>

dyamic modals,now you can import modals only in component what you need no need to import all modals at ones

<template>
  <!-- button to open modal here will  use `modals` config -->
  <button
    tag="button"
    v-modal-link="{name: 'custom-edit-local',props: {a: 1, b: 2} }"
  >
    open custom edit modal
  </button>
</template>

<script>
  import CustomEditLocal from "./modals/custom-edit.vue";

  export default {
    modals: {
      CustomEditLocal
    }
  };
</script>

Development Setup

# install deps
npm install

# serve demo at localhost:8080
npm run dev

# build library and demo
npm run build

# build library
npm run build:library

# build demo
npm run build:demo