Integrating a Vuetify dialog/popup modal into the Vue-fullpage.js template

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>

Answer №1

!! NOTE !!:

Upon review, I observed that you have Components capitalized, which could be the reason why it's not functioning correctly for you.

Instead of this:

  Components: {
    Modal
  },

You should use this:

  components: {
    Modal
  },

In addition, I am uncertain about the purpose of this.afterLoad.. Is there a method missing from the code, or is it attempting to call itself? This might also be causing an issue with rendering properly.



It appears that your code snippet does not contain v-app anywhere..

I managed to make it work by creating a component wrapping around vue-full-page and utilizing slots within the vue-full-page component.

If my interpretation is correct, something like this should work...


Example:

// VUE-FULL-PAGE COMPONENT
const vueFullPage = {
  template: "#vue-fullpage",
  data() {
    return {
      options: {
        menu: '#menu',
        anchors: ['page1', 'page2', 'page3'],
        sectionsColor: ['#41b883', '#ff5f45', '#0798ec']
      },
    }
  }
}


// DIALOG COMPONENT
const vueDialog = {
  template: "#vue-dialog",
  data() {
    return {
      isShown: false,
    }
  }
}


// MAIN VUE APP
const vm = new Vue({
  el: "#app",
  components: {
    vueFullPage,
    vueDialog
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="41706272536e616e37766d766d75">[email protected]</a>/dist/vuetify.min.js"></script>
<script src="https://unpkg.com/vue-fullpage.js/dist/vue-fullpage.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="65424050414748477e3f241f241c">[email protected]</a>/dist/vuetify.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/fullpage.js/dist/fullpage.min.css" rel="stylesheet"/>

<!-- ---------------------------------- -->
<!-- MAIN VUE APP -->
<!-- ---------------------------------- -->
<div id="app">
  <v-app>
    <vue-full-page>
      <template v-slot:section-one>
        <vue-dialog></vue-dialog>
      </template>
    </vue-full-page>
  </v-app>
</div>
<!-- ---------------------------------- -->


<!-- ---------------------------------- -->
<!-- SIMULATES VUE-FULL-PAGE COMPONENT -->
<!-- ---------------------------------- -->
<script type="text/x-template" id="vue-fullpage">
  <div>
    <full-page ref="fullpage" :options="options">
      <div class="section">
        <h1>Section 1</h1>
        <slot name="section-one"></slot>
        <v-btn class="next" @click="$refs.fullpage.api.moveSectionDown()">Next</v-btn>
      </div>
      <div class="section">
        <h1>Section 2</h1>
        <v-btn class="prev" @click="$refs.fullpage.api.moveSectionUp()">Prev</v-btn>
      </div>
    </full-page>
  </div>
</script>
<!-- ---------------------------------- -->


<!-- ---------------------------------- -->
<!-- SIMULATES DIALOG COMPONENT -->
<!-- ---------------------------------- -->
<script type="text/x-template" id="vue-dialog">
  <div>
    <v-dialog v-model="isShown">
      <template v-slot:activator="{ on }">
        <v-btn
          color="red lighten-2"
          dark
          v-on="on"
        >Open Dialog</v-btn>
      </template>
      <v-card>
        <v-card-actions pa-0>
          <v-spacer/>
          <v-btn dark small color="red" @click="isShown = !isShown">Close</v-btn>
          <v-spacer/>
        </v-card-actions>
        <v-card-title class="justify-center">
          <h2>
            Hello from the dialog
          </h2>
        </v-card-title>
      </v-card>
    </v-dialog>
  </div>
</script>

CodePen mirror

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Alter the element's class during drag and drop操作

While in the process of dragging an element, I want to dynamically change its class or any CSS property based on its position. Here is what I have achieved so far: https://jsfiddle.net/twfegqgc/ The issue I am facing is that the class changes only when t ...

Utilize JavaScript to extract values from JSON objects

Looking to retrieve the "appid" from this JSON data, but facing the challenge of changing object titles. Need assistance with a javascript code to select the "appid" that corresponds to the first, second, or third object in the list. The current attempt ...

Eavesdrop on the import function in Node.js

I have a unit test where I need to confirm if the SUT makes a call to require with a specific parameter. The module under test has the following implementation: module.exports = function () { require('foo'); }; Now, I am trying to create a te ...

An easy guide to comparing date and time using Moment.js

Hey there, I'm looking for some help in validating two instances of date time moments. I am using this helpful Package which allows us to select hour, minute, and second. I want to validate whether the selected date time is before or after, as shown i ...

Why does the arrow function get executed right away once it is wrapped?

Currently, I am working on developing an app using react native. The goal is to have the screen automatically advance to the next one if there is no touch response within 5 seconds. I have implemented a function where pressing a button or entering text wi ...

What is the best method to eliminate the 'Unsorted' selection from the sorting options in Material React Table?

Currently utilizing the "material-react-table" library within a React JS project. In alignment with my needs, seeking to eliminate the 'Unsorted' sorting option in Material React Table. Could someone assist me in addressing this? Your help is ...

Switching from AngularJS to vanilla JavaScript or integrating AngularJS and Flask on a single server

It is common knowledge that angular has the ability to create a project and convert it into pure HTML, CSS, and js code. Similarly, I am looking to do the same for my AngularJS application. When I execute the app using npm start it works perfectly fine. My ...

How can I show the table row as an inner table row when the first field is identical?

<tr ng-model="check" ng-repeat="orderBook in orderBookDetails| orderBy: 'orderBook.no'" value='check=$scope.orderBookDetails.sowNo'> <td ng-if='check!=orderBook.no'>{{orderBook.no}}</td> <td>{{order ...

Typescript indicates that an object may be 'undefined' when the value is an empty string

I'm new to Typescript and currently working on converting our application from React JSX to TS. If I'm misunderstanding the error, please let me know. I've encountered the error message Object is possibly 'undefined' related to a ...

Encountering a "Unknown word" error while compiling vue.config.js in Vue CLI 3

I am struggling to set up a Vue CLI 3 app that incorporates Cesium. It seems like there are webpack configuration issues causing the problem. Despite the setup being straightforward, I cannot figure out why it keeps failing... The specific error occurs du ...

Advanced jQuery Autocomplete with Nested Ajax Requests

I am currently developing a feature that allows users to search for albums using the Spotify Metadata API. The main functionality is working well, but I'm running into an issue with retrieving album cover art when making nested calls. This seems to be ...

Regular expressions can be used to remove specific parts of a URL that come before the domain name

Looking for some help with a javascript task involving regex and the split function. Here's what I need to achieve: Input: http://www.google.com/some-page.html Output: http://www.google.com I attempted the following code but unfortunately it didn&ap ...

What seems to be the issue with my snake game not loading properly?

I am having trouble getting something to display in my browser while working on this snake game. No matter how many times I check, I can't seem to find the mistake I made. Every time I refresh the browser, the screen remains blank. gameTime.html < ...

Is there a way to verify if a variable is a generator function, for example, a function with the asterisk symbol and

Is there a foolproof method to determine if a function is a generator, like in the example below: let fn = function* () { yield 100; } if (fn instanceof ??) { for (let value in fn()) { ... } } I have only been able to come up with fn.to ...

Dynamically load scripts in angularJs

Having multiple libraries and dependencies in my angularjs application is posing a challenge as I want to load them all using just one script, given that three apps are utilizing these dependencies. Currently, I have this custom script: var initDependenci ...

Error Occurs When Attempting to Call ASPX Codebehind Function from JavaScript

I am having trouble calling a function in the codebehind of my .aspx page once the window is fully displayed. I attempted to use the following code: <script type="text/javascript"> $(document).ready(function () { PageMethods.CheckFor ...

Invoking a C# function inside a cshtml file

Having trouble calling a function in my CSHTML page. In the script of my CSHTML page : <script type="text/javascript" > //var sLoggedInUser = <%# GetSession_LoggedInIdUser() %>; $(document).ready(function () { ale ...

Using setTimeout in Node.js

I've been struggling to find a solution for slowing down the timeout in my code. The issue is that it runs too quickly, and I can't seem to figure out how to adjust it using Request. Everything else in the code works perfectly. var Scraper = fun ...

How can you use Vue.js @mouseover to target a specific <path> element within an <svg>?

Check out this Codepen example. I am working with an SVG map that contains various paths holding data. My goal is to retrieve the state name when hovering over a specific path. Currently, I have added an event listener to the svg element and am trying to ...

Retrieve JSON data from Form Submission

While I am not a front end developer, I have been trying my hand at it recently. I hope that the community here can assist me with an issue I am facing. I have a form that is supposed to send files to a server-side API like shown below: <form id="uploa ...