<template>

  <!-- Button trigger modal -->

  <MDBBtn

    color="primary"

    aria-controls="exampleModal"

    @click="exampleModal=true"

  >

    Launch demo modal

  </MDBBtn>

  <MDBModal

    id="exampleModal"

    tabindex="-1"

    labelledby="exampleModalLabel"

    v-model="exampleModal"

  >

    <MDBModalHeader>

      <MDBModalTitle id="exampleModalLabel"> Modal title </MDBModalTitle>

    </MDBModalHeader>

    <MDBModalBody>...</MDBModalBody>

    <MDBModalFooter>

      <MDBBtn color="secondary" @click="exampleModal = false">Close</MDBBtn>

      <MDBBtn color="primary">Save changes</MDBBtn>

    </MDBModalFooter>

  </MDBModal>

  <MDBBtn

    color="primary"

    aria-controls="inputModal"

    @click="inputModal=true"

  >

    Launch input modal

  </MDBBtn>

​

  <MDBModal

    id="inputModal"

    tabindex="-1"

    labelledby="inputModalLabel"

    v-model="inputModal"

  >

    <MDBModalHeader>

      <MDBModalTitle id="inputModalLabel"> Modal title </MDBModalTitle>

    </MDBModalHeader>

    <MDBModalBody>

      <MDBInput v-model="inputValue" />

    </MDBModalBody>

    <MDBModalFooter>

      <MDBBtn color="secondary" @click="inputModal = false">Close</MDBBtn>

      <MDBBtn color="primary">Save changes</MDBBtn>

    </MDBModalFooter>

  </MDBModal>

</template>

<style>

#app {

  font-family: Roboto, Helvetica, Arial, sans-serif;

}

</style>

<script>

  import {

    MDBModal,

    MDBModalHeader,

    MDBModalTitle,

    MDBModalBody,

    MDBModalFooter,

    MDBBtn,

    MDBInput

  } from 'mdb-vue-ui-kit';

  import { ref } from 'vue';

  export default {

    components: {

      MDBModal,

      MDBModalHeader,

      MDBModalTitle,

      MDBModalBody,

      MDBModalFooter,

      MDBBtn,

      MDBInput,

    },

    setup() {

      const exampleModal = ref(false);

      const inputModal = ref(false);

      const inputValue = ref('Select this text and drag your cursor outside the window');

      return {

        exampleModal,

        inputModal,

        inputValue,

      };

    },

  };

</script>