Loading components into modal


I’ve spent some time looking into this and from what I understand it’s just not possible but thought I’d try here before giving up…

What i’m trying to do is show a list of items and when you click on an item, it’s edit form opens in a modal. I have the form component ready, and also the modal component.

I’d like to keep the modal generic so that I can load anything into it (ideally components async’d in from api calls to the server).

Is there a “Vue” way of doing this?

I’m using Laravel and Vue 2



Have you reviewed the official modal example?

Should do pretty much what you want, except for the async part, which is not related to the modal question specifically.


@LinusBorg Yep, that is what my modal component is based on, i’m currently passing a url to it, calling the url from the created method then setting the header, body etc. of the modal from the data returned from the server, that works really well.

However what I want to do is load in a component from the server, not just data returned from an api call, I can obviously append the component tag as html but that won’t render.

I’m currently reviewing your post here Vue router with async component to acquire $route.param which feels like its pointing me in the right direction


Nope, I just cant work it out…

I thought I could have a dynamic component inside the Modal component and update that according to what i get from the server but then I would need to name every possible component as a child component of Modal and then I’d need to find a way to pass on each child component’s properties.

Am I missing something? surely there must be a way to do this?


I’m not sure I get the problem. Are you not passing your component through a slot? Or are you doing that. but haven’t understoof the concept of slots fully yet?

<!-- template of 'parent-compenent' that should show the modal -->
 <child-component></component> <!-- this should be shown in the modal -->

In the above code, the modal component does not have to know anything about child-component, only the parent-component has to - so they only have to be registered with parent-component not modal.

Maybe I can help you better if you show your actual efforts so far?


@LinusBorg I almost certainly don’t quite understand how slots work… I’m very new to Vue.

I’ve made a few changes and here is what I have so far:

In my ‘root’ I have:

<button @click="showModal = true">Modal</button>

<modal v-if="showModal" @close="showModal = false" url="/api/transactions/20/edit"> <!-- Hardcoded the url for now -->
    <component is="modalComponent"></component>


import Transactions from './components/Transactions.vue';
import TransactionEditForm from './components/TransactionEditForm.vue';
import Modal from './components/Modal.vue';

const vm = new Vue({
    el: '#wrapper',

        return {
            showModal: false,
            modalComponent: null,
            modalComponentProperties: null

    components: { Transactions, TransactionEditForm, Modal},


Modal.vue looks like:

    <transition name="modal">
        <div class="modal-mask" @click="$emit('close')">
            <div class="modal-wrapper">

                <slot v-if="this.$root.modalComponent"></slot>


    export default {

        props: {
            'url': {
                type: String,
                default: ''

                    .then(function(response) {
                        this.$root.modalComponent = response.data.view;  // Returns String eg: 'TransactionEditForm'
                        this.$root.modalComponentProperties = response.data.props; // Returns Object eg: { transaction: Object }

        methods: {
            close: function () {
                this.show = false;



Which I feel is getting close as I get an error in the console about missing properties in the dynamic component - which needs the transaction properties returned by the ajax call in Modal.vue

Does that all make sense?


Just to confirm, if I hardcode the properties:

<modal v-if="showModal" @close="showModal = false" url="/api/transactions/20/edit">
      <component :is="modalComponent" :transaction="this.modalComponentProperties"></component>

it works, but really i need that :transaction property to also be dynamic, if I could pass an array of properties to pass to the dynamic content that would be great, something like:

<modal v-if="showModal" @close="showModal = false" url="/api/transactions/20/edit">
      <component :is="modalComponent" :props="this.modalComponentProperties"></component>

and this.modalComponentProperties would be:

    transaction: {
        amount: 20,
        description: 'blah blah'
    user: {
        name: 'james',
        location: 'london'

Then I would have access to those properties from the component

Is that possible?


I really need this functionality too. I have a dynamic component that need to get it’s props from an Object. My use-case is that I need to create a router-link or some other whatever component. So router-link needs the “to”-prop. But some other component need some other prop. I tried to search for a solution like this but cannot find it :frowning:


This is possible with the new version 2.2


Awesome! Thanks for quick answer! :raised_hands: