Complete Vue.js 2 Web Development_ Practical guide to building end-to-end web development solutions with Vue.js 2

Optimizing your App and Using Components to Display Data Chapter 3

blandit dapibus. </p>

</modal-window>

Pressing refresh in the browser won't do anything, as we need to tell the component what
to do with the data. Inside your template, add a HTML tag where you

want your content to appear. Add it to the div with the modal-body class:

Vue.component('modal-window', {

template: `<div class="modal fade" v-

show="visible">

<div class="modal-dialog" role="document">

<div class="modal-content">

<div class="modal-header">

<button type="button" class="close" data-

dismiss="modal" aria-label="Close">

<span aria-hidden="true">×</span>

</button>

</div>

<div class="modal-body">

<slot></slot>

</div>

<div class="modal-footer">

<button type="button" class="btn btn-

primary">Save changes</button>

<button type="button" class="btn btn-

secondary" data-

dismiss="modal">Close</button>

</div>

</div>

</div>

</div>`,

props: {

visible: {

type: Boolean,

default: false

}

}

});

Viewing your app will now reveal the content you passed in inside the modal window.
Already, the app is looking cleaner with this new component.