complete_dialog_example.vue

<template>
  <div>

    <BraveDialog ref="bravedialog" dialogwidth="500px">
      <template #dialog-heading>
         <img class="me-3" alt="Vue logo" width="30px;" src="../assets/logo.png"> VueJS Dialog
      </template>
      <template #dialog-body>
        <div class="p-4">This is a BraveVue Dialog VueJS Component</div>
      </template>
      <template #footer>
        <div class="btn btn-primary text-white m-4" @click="$refs.bravedialog.hide()">Close</div>
      </template>
    </BraveDialog>
    
    <div @click="$refs.bravedialog.show()" class="btn btn-lg btn-primary text-white px-4"><i class="bi bi-window"></i> Open Dialog</div>
  </div>
</template>

<script>
// @ is an alias to /src
import {BraveDialog} from "bravevue"

export default {
  name: 'Home',
  components: {
    BraveDialog
  }
}
</script>