1

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

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

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

And named component like this :

ModalComponent.vue

Browser give me next errors. enter image description here All details in the Github repository

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

4
  • did you try out my answer Commented Dec 25, 2018 at 12:20
  • Your answer awesome, but I got error i.imgur.com/Glhtf6x.png After simple google, I added parameter default and it help. Now it's like this: Vue.component('modal', require('./components/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 component file to add the script section and export default{} inside it, i edited my answer by adding that and you don't need .default 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

5

you should have :

   Vue.component('modal', require('./components/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 component, 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>
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.