javascript - Add VueJs modal component to Laravel template - Stack Overflow

admin管理员组

文章数量:1322669

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

Share Improve this question Follow edited Jul 14, 2022 at 1:38 tony19 139k2323 gold badges277277 silver badges347347 bronze badges asked Dec 24, 2018 at 18:09 dos4devdos4dev 52522 gold badges1313 silver badges2828 bronze badges 4

• 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

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

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>

本文标签： javascriptAdd VueJs modal component to Laravel templateStack Overflow