How can I add vuetify dialog into existing application?

Question

I created a vue dialog app/component using vue cli. It consist of a sample button to be clicked on to imitate how the dialog (What I need) will be loaded when a link on the existing application is clicked. I have a couple of issues. When using v-app it adds the application wrapper I dont need seeing as its only the dialog I want. It creates a huge whitespace not needed. If I remove it, it errors [Vuetify] Unable to locate target [data-app] and the dialog wont load when <div @click='getInformation('USA')'></div> in the existing application is used.

Tried removing v-app and just using template but continues to error. Seems I need to still specify v-app in some way. Lost here

An example on how Im trying to pull it off but not working in App.vue

<template>
    <div v-resize="onResize">
        <v-dialog>
            <v-card>
            {{ information }}
            </v-card>
        </v-dialog>
    </div>
</template>

<script>

export default {
  data() {
    return {
      isMobile: false,
      information: []
    };
  },
  methods: {
    onResize() {
      if (window.innerWidth < 425) this.isMobile = true;
      else this.isMobile = false;
    },
    getInformatiom(country) {
        axios
          .get(`${api}/${country}/info`, {
            headers: {
              Authorization: `token`
            }
          })
          .then(response => {
            this.information = response.data.info;
          });   
    }
  }
};

main.js

import Vue from "vue";
import App from "./App.vue";
import Vuetify from "vuetify";
import "vuetify/dist/vuetify.min.css";

Vue.use(Vuetify);

Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount("#app");

Dialog component is ready to go, just having so much trouble getting it to show when its being called from the existing application. Just a note, the existing application does not use Vue, its only classic asp, Im only updating the dialog on the page to look/work better using vue/vuetify. Any help would be GREATLY APPRECIATED

Answer 1

You NEED the v-app element with vuetify.

Try this to only use the app when showing the dialog. Then use CSS to customise the v-app.

<v-app v-if='this.information && this.information.length'>
   <v-dialog>...</v-dialog>
</v-app>