Nuxt.jsでモーダルウィンドウを実装

環境

• Nuxt.js
• portal-vue

portal-vueの導入

nuxt.config.js

export default {
  // 省略
  modules: [
    ['portal-vue/nuxt']
  ],
  // 省略
}

コンポーネント

<template lang="html">
  <Portal to="modal">
    <transition name="modal" appear>
      <div name="modal" class="modal-group active">
        <div class="modal-mask" @click="$emit('close')"></div>
          <div class="modal active" tabindex="-1" id="edit">
            <form>
              <div class="modal-header">
                <slot name="title"></slot>
                <button
                  type="button"
                  class="btn"
                  data-dismiss="modal"
                  @click="$emit('close')"
                >
                  閉じる
                </button>
              </div>
              <div class="modal-body">
                <slot></slot>
              </div>
              <div class="modal-footer">
                <slot name="footer"></slot>
              </div>
            </form>
          </div>
      </div>
    </transition>
  </Portal>
</template>

<script>
export default {
  head: {
    bodyAttrs: {
      class: 'active-modal'
    }
  },
  data() {
    return {
      showModal: false,
    }
  },
  methods: {
    closeModal() {
      this.$emit('close')
    }
  }
}
</script>

<style lang="scss" scoped>
.modal-enter,
.modal-leave-active {
    opacity: 1;
    transition: opacity 300ms ease-out;

    .modal {
        transform: scale(1.1);
    }
}
</style>

<CommonModal v-if="showModal" @close="closeModal">
  <template #title>
    <h3 class="title">店舗追加</h3>
  </template>
  <p>モーダルウィンドウの中身</p>
  <template #footer>
    <button
      type="button"
      class="btn"
      @click="closeModal"
    >
      OK
    </button>
  </template>
</CommonModal>