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

Organize + Automate + Deploy = Webpack Chapter 16

Now, write the following HTML layout in App.vue:

<template>

<div id="app">

<card-modal

@ok="accept"

ok-text="Accept"

:visible="popup"

@cancel="cancel"

>

<div class="content">

<h1>Contract</h1>

<p>

I hereby declare I have learned how to

install third party components in my

own Vue project.

</p>

</div>

</card-modal>

<p v-if="signed">It appears you signed!</p>

</div>

</template>

Then, you can write the logic, as shown, in the JavaScript:

<script>

import { CardModal } from 'vue-bulma-modal'

export default {

name: 'app',

components: { CardModal },

data () {

return {

signed: false,

popup: true

}

},

methods: {

accept () {

this.popup = false

this.signed = true

},

cancel () {

this.popup = false

}

}

}

</script>