This works, but I'm sure there is a much better way to do this. Please look at the document.getElementsByClassName() part near the bottom.

html:

<modal>

  <a slot=trigger>Show Modal</a>

  <h3 slot=header>My Heading</h3>

  <p slot=body>Here is the body of the modal.</p>

  <div slot=footer>

    Here is the footer, with a button to close the modal.

    <button class=close-modal>Close Modal</button>

  </div>

</modal>

Modal.vue:

<template>

    <span>

      <span @click=show = true>

        <slot name=trigger></slot>

      </span>

      <slot name=header></slot>

      <slot name=body></slot>

      <slot name=footer></slot>

    </span>

</template>



<script>

    export default {

        data() {

            return { show: false }

        },

        mounted(that = this) {

          document.getElementsByClassName('close-modal')[0].addEventListener('click', function () {

            that.show = false;

          })

        }

    }

</script>

Is there a better way to do this?