Question about simple situation, I want add vue modal ponent to default Laravel project. When I registered in this way :

Vueponent('modal', {
  template: '#modal-template'
})

new Vue({
  el: '#app',
  data: {
    showModal: false
  }
})

And named ponent like this :

ModalComponent.vue

Browser give me next errors. All details in the Github repository

By the way, maybe better add modal window from bootstrap with jQuery or it will be messy?

Question about simple situation, I want add vue modal ponent to default Laravel project. When I registered in this way :

Vue.ponent('modal', {
  template: '#modal-template'
})

new Vue({
  el: '#app',
  data: {
    showModal: false
  }
})

And named ponent like this :

ModalComponent.vue

Browser give me next errors. All details in the Github repository

By the way, maybe better add modal window from bootstrap with jQuery or it will be messy?

• javascript
• laravel
• vue.js
• vuejs2
• vue-ponent

• did you try out my answer – Boussadjra Brahim Commented Dec 25, 2018 at 12:20
• Your answer awesome, but I got error i.imgur./Glhtf6x.png After simple google, I added parameter default and it help. Now it's like this: Vue.ponent('modal', require('./ponents/ModalComponent.vue').default); thank you a lot – dos4dev Commented Dec 25, 2018 at 12:37
• sorry that error is fired since i missed in the ponent file to add the script section and export default{} inside it, i edited my answer by adding that and you don't need .default – Boussadjra Brahim Commented Dec 25, 2018 at 16:31
• Awesome, this error helps me better understand Vue – dos4dev Commented Dec 25, 2018 at 19:31

1 Answer 1

you should have :

   Vue.ponent('modal', require('./ponents/ModalComponent.vue'));

and inside your ModalComponent.vue file:

<template>
<transition name="modal">
    <div class="modal-mask">
      <div class="modal-wrapper">
        <div class="modal-container">

          <div class="modal-header">
            <slot name="header">
              default header
            </slot>
          </div>

          <div class="modal-body">
            <slot name="body">
              default body
            </slot>
          </div>

          <div class="modal-footer">
            <slot name="footer">
              default footer
              <button class="modal-default-button" @click="$emit('close')">
                OK
              </button>
            </slot>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>
<script>
  export default {

  }
</script>

view.blade.php

<div id="app">
  <button id="show-modal" @click="showModal = true">Show Modal</button>
  <!-- use the modal ponent, pass in the prop -->
  <modal v-if="showModal" @close="showModal = false">
    <!--
      you can use custom content here to overwrite
      default content
    -->
    <h3 slot="header">custom header</h3>
  </modal>
</div>