CODEWITHSUNDEEP
javascriptlaravelvue.jsvuejs2vue-component
dos4dev
dos4dev

Reputation: 525

Add VueJs modal component to Laravel template

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?

Upvotes: 1

Views: 11765

Answers (1)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

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>

Upvotes: 5

Related Questions