I am in the process of incorporating a dialog/popup modal from Vuetify into a Vue-fullpage.js scrolling website. My goal is to have the modal button displayed on the landing page instead of the navbar. I have attempted to set up the modal in a separate component named Modal.vue and then import that component into Body.vue. However, even though Vuetify is properly installed, the button does not appear on the page. How can I successfully integrate a Vuetify modal with Vue-fullpage.js? See the provided code below. Thank you for your assistance!
//Modal.vue
<template>
<v-layout row justify-center>
<v-dialog v-model="dialog" persistent max-width="290">
<template v-slot:activator="{ on }">
<v-btn class="modal-btn" color="primary" dark v-on="on">Open Dialog</v-btn>
</template>
<v-card>
<v-card-title class="headline">Use Google's location service?</v-card-title>
<v-card-text>Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="green darken-1" flat @click="dialog = false">Disagree</v-btn>
<v-btn color="green darken-1" flat @click="dialog = false">Agree</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-layout>
</template>
<script>
export default {
data () {
return {
dialog: false
}
}
}
</script>
<style>
</style>
//Body.vue
<template>
<div class="body">
<full-page :options="options" id="fullpage">
<div class="section">
<Modal></Modal>
</div>
<div class="section">
<h3>Section 2</h3>
</div>
<div class="section">
<h3>Section 3</h3>
</div>
</full-page>
</div>
</template>
<script>
import Modal from './Modal'
export default {
name: 'Body',
Components: {
Modal
},
data () {
return {
options: {
afterLoad: this.afterLoad,
scrollOverflow: true,
scrollBar: false,
menu: '#menu',
navigation: true,
anchors: ['page1', 'page2', 'page3'],
sectionsColor: ['#fec401', '#1bcee6', '#ee1a59']
},
logo: { width: 500 },
dialog: false
}
}
}
</script>
<style>
</style>