Vue-js-modal: possible to load url in modal?

[vesper8]

I am wishing to migrate from an old inactive package called Nyromodal to this. One of the things I really liked about Nyromodal is you could pass it a url and it would handle all the ajax loading magic for you and would load the external webpage into itself. If I want to do the same thing with this package could you share the best way to achieve that?

Cheers!

[euvl]

HI @vesper8

I am not entirely sure what you mean by modal handling ajax calls. This plugin pretty much just shows, hides and positions modal components. To use ajax you will probably go for axios https://github.com/axios/axios .

Thanks

[vesper8]

Nyromodal had a method that let's you pass a url and it opens up a new modal and then loads the url in itself.

I was able to reproduce the same by doing this:

<template>
    <div id="FullScreenModal">
        <modal :name="name"
               transition="fade"
               :adaptive="true"
               width="100%"
               height="100%"
               :clickToClose="false"
               @before-open="beforeOpen"
               @before-close="beforeClose"
               @opened="opened"
               @closed="closed"
        >
            <div :id="name">
                <div class="remoteContent"></div>
            </div>
        </modal>
    </div>
</template>
<script>
    export default {
        props: [
            'name',
        ],

        data() {
            return {
                'destUrl': '',
            }
        },
        methods: {
            close(event) {
                if (event.keyCode === 27)
                    this.$modal.hide(this.name);
            },
            beforeOpen(event) {
                this.destUrl = event.params.destUrl;
                document.addEventListener('keyup', this.close)
            },
            beforeClose(event) {
                document.removeEventListener('keyup', this.close)
            },
            opened(event) {
                $(`#${this.name} .remoteContent`).load(this.destUrl);
            },
            closed(event) {

            },
        },
    }
</script>

Now I'm realizing however that Nyromodal actually loaded the URL in an isolated iframe.. which has its benefits.. that should be pretty easy to accommodate as well.

Overall am loving your package! Very easy to use and easily customizable. I was just asking if you had a built-in way of handling loading content from a URL.. which is what I achieved in the code above

[euvl]

Great, thanks 😄
Happy that you like the plugin! 👍