How to open html page in dialog in Vuetify? - VueJS

Question

I tried to open a different page in vuetify, using window.open (http://url) and after an action return to the primary window to update it with some data. However, I need to open the page in a modal. And window.showModalDialog() isn't work

I am using the following features:

"dependencies": {
    "axios": "^0.16.1",
    "devour-client": "^1.4.3",
    "lodash": "^4.17.4",
    "papaparse": "^4.3.3",
    "vee-validate": "^2.0.0-rc.27",
    "vue": "^2.2.6",
    "vue-i18n": "^7.0.5",
    "vue-kindergarten": "^0.3.0",
    "vue-moment": "^2.0.2",
    "vue-router": "^2.5.3",
    "vue2-dropzone": "^2.0.0",
    "vuetify": "^0.12.7",
    "vuex": "^2.3.1",
    "vuex-router-sync": "^4.1.2"
  },

I am making an Oauth2 to Clio App connection, using a backend as a middleware that generates the authentication token.

Any idea of how to open an html page in a dialog and return to the primary window, updating data?

LShapz · Accepted Answer · 2018-02-05 20:49:50Z

8

what about using the Vuetify v-dialog component, and for its content, have an iframe with your HTML page? Like this.

<v-dialog v-model="dialog" width="100%">
 <v-btn color="primary" dark slot="activator">Open Dialog</v-btn>
  <v-card>
   <iframe style="width:100%" src="https://vuetifyjs.com"></iframe>
  </v-card>
 </v-dialog>

answered Feb 5, 2018 at 20:49

LShapz

1,76613 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Robert Over a year ago

I like that, I am about to do the same thing for my OAuth auth code grant thing.

Collectives™ on Stack Overflow

How to open html page in dialog in Vuetify? - VueJS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related