[Vuejs]-Include Modal.vue in page1.vue and page2.vue

by

0👍

✅

Just import the modal component into both pages. Here ive done it with a bool modalBool that will toggle weather the modal is displayed or not.

<template>
  <div>
    Page 1
    <modal v-if="modalBool"> </modal>
  </div>
</template>

<script>
import Modal from "./Modal.vue";

export default {
  components: {
    Modal,
  },
  data() {
    return {
      modalBool: false,
    };
  },
};
</script>

<style lang="scss" scoped></style>

You can add things like on close to reset the bool in the parent

<template>
  <div>
    Page 1
    <modal v-if="modalBool" v-on:close="showInvitationModal = false"> </modal>
  </div>
</template>

Here is an example of my modal that will emit close when closed. The parent is listening for this close and will reset the modalBool. This will be emitted if the user clicks outside of the modal or on the X

<template>
  <transition name="component-fade" mode="out-in">
    <div class="modal-background" @click.self="$emit('close')">
      <div class="modal-body shadow">
        <h2 class="modal-title">
          <div>{{ title }}</div>
          <div>
            <button class="btn-clear" @click="$emit('close');">
              <font-awesome-icon :icon="timesIcon" class="pointer" />
            </button>
          </div>
        </h2>

        <div>
          <slot></slot>
        </div>
      </div>
    </div>
  </transition>
</template>

Leave a comment