What is the best way to display a child component inside an iframe using Vue.js?

Question

What is the best way to display a child component inside an iframe using Vue.js?

Looking to provide a live preview of an email before sending it out, I've opted to use an iframe to contain the preview and prevent style leaks. The goal is for the preview to update dynamically as the user fills out form details.

How can I display a component within an iframe with automatic prop updates whenever the parent form changes? Below is the current code in place:

This is the HTML structure:

<template>
    <div id="confirmation">
        <h2>Give a gift</h2>
        <form @submit.prevent="checkout()">
            <div class="date-section">
                <label class="wide">Send</label>
                <input type="radio" name="sendLater" v-model="sendLater" required :value="false">
                <span>Now</span>
                <input type="radio" name="sendLater" v-model="sendLater" required :value="true">
                <span style="margin-right: 5px;">Later: </span>
                <date-picker :disabled="!sendLater" v-model="date" lang="en" />
            </div>
            <div>
                <label>Recipient Email</label>
                <input type="email" class="custom-text"  v-model="form.email" required>
            </div>
            <div>
                <label>Recipient Name</label>
                <input type="text" class="custom-text"  v-model="form.name" required>
            </div>
            <div>
                <label>Add a personal message</label>
                <textarea v-model="form.message" />
            </div>
            <p class="error" v-if="error">Please enter a valid date.</p>
            <div class="button-row">
                <button class="trumpet-button" type="submit">Next</button>
                <button class="trumpet-button gray ml10" type="button" @click="cancel()">Cancel</button>
            </div>
        </form>
        <iframe id="preview-frame">
            <preview-component :form="form" :sender-email="senderEmail" :term="term" />
        </iframe>
    </div>
</template>

Below is the JavaScript where PreviewComponent handles the actual rendering in the iframe:

export default {
    name: 'ConfirmationComponent',
    components: {
        DatePicker,
        PreviewComponent
    },
    props: {
        term: {
            required: true,
            type: Object
        }
    },
    data() {
        return {
            form: {
                name: null,
                email: null,
                message: null,
                date: null
            },
            date: null,
            sendLater: false,
            error: false
        }
    },
    computed: {
        senderEmail() {
            // utils comes from a separate file called utils.js
            return utils.user.email || ''
        }
    },
    watch: {
        'form.name'(val) {
            this.renderIframe()
        },
        'form.email'(val) {
            this.renderIframe()
        }
    },
    methods: {
        renderIframe() {
            if (this.form.name != null && this.form.email != null) {
                console.log('rendering iframe')
                // not sure what to do here......
            }
        }        
    }
}

I have tried various approaches, but setting the correct props for the preview-component seems particularly challenging. Any assistance or guidance on this matter would be greatly appreciated.

javascript vue.js iframe

Answer 1

Answer №1

If you're looking for a solution, Vuex is the way to go.

To handle this, I came up with a unique "IFrame" component that displays content inside an iframe.

Take a look at my Vuex store:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export const store = new Vuex.Store({
    state: {
        form: {
            name: null,
            email: null,
            message: null
        },
        senderEmail: null,
        term: null,
        styles: null
    },
    mutations: {
        updateForm(state, form) {
            state.form = form
        },
        updateEmail(state, email) {
            state.senderEmail = email
        },
        updateTerm(state, term) {
            state.term = term
        },
        stylesChange(state, styles) {
            state.styles = styles
        }
    }
})

Here's my custom IFrame component:

import Vue from 'vue'
import { store } from '../../store'

export default {
    name: 'IFrame',
    data() {
        return {
            iApp: null,

        }
    },
    computed: {
        styles() {
            return this.$store.state.styles
        }
    },
    render(h) {
        return h('iframe', {
            on: {
                load: this.renderChildren
            }
        })
    },
    watch: {
        styles(val) {
            const head = this.$el.contentDocument.head

            $(head).html(val)
        }
    },
    beforeUpdate() {
        this.iApp.children = Object.freeze(this.$slots.default)
    },
    methods: {
        renderChildren() {
            const children = this.$slots.default
            const body = this.$el.contentDocument.body

            const el = document.createElement('div')
            body.appendChild(el)

            const iApp = new Vue({
                name: 'iApp',
                store,
                data() {
                    return {
                        children: Object.freeze(children)
                    }
                },
                render(h) {
                    return h('div', this.children)
                }
            })

            iApp.$mount(el)

            this.iApp = iApp
        }
    }
}

Now, let me show you how data flows from the ConfirmationComponent to the PreviewComponent:

export default {
    name: 'ConfirmationComponent',
    mounted() {
        this.$store.commit('updateEmail', this.senderEmail)
        this.$store.commit('updateTerm', this.term)
    },
    watch: {
        'form.name'(val) {
            this.updateIframe()
        },
        'form.email'(val) {
            this.updateIframe()
        }
    },
    methods: {
        updateIframe() {
            this.$store.commit('updateForm', this.form)
        }
    }
}

And finally, here's how the actual PreviewComponent looks like:

import styles from '../../../templates/styles'

export default {
    name: 'PreviewComponent',
    mounted() {
        this.$store.commit('stylesChange', styles)
    },
    computed: {
        redemption_url() {
            return `${window.config.stitcher_website}/gift?code=`
        },
        custom_message() {
            if (this.form.message) {
                let div = document.createElement('div')

                div.innerHTML = this.form.message

                let text = div.textContent || div.innerText || ''

                return text.replace(/(?:\r\n|\r|\n)/g, '<br>')
            }
            return null
        },
        form() {
            return this.$store.state.form
        },
        term() {
            return this.$store.state.term
        },
        senderEmail() {
            return this.$store.state.senderEmail
        }
    }
}

I hope this serves as a useful reference for someone in need.

Answer 2

If you're looking for a solution, Vuex is the way to go.

To handle this, I came up with a unique "IFrame" component that displays content inside an iframe.

Take a look at my Vuex store:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export const store = new Vuex.Store({
    state: {
        form: {
            name: null,
            email: null,
            message: null
        },
        senderEmail: null,
        term: null,
        styles: null
    },
    mutations: {
        updateForm(state, form) {
            state.form = form
        },
        updateEmail(state, email) {
            state.senderEmail = email
        },
        updateTerm(state, term) {
            state.term = term
        },
        stylesChange(state, styles) {
            state.styles = styles
        }
    }
})

Here's my custom IFrame component:

import Vue from 'vue'
import { store } from '../../store'

export default {
    name: 'IFrame',
    data() {
        return {
            iApp: null,

        }
    },
    computed: {
        styles() {
            return this.$store.state.styles
        }
    },
    render(h) {
        return h('iframe', {
            on: {
                load: this.renderChildren
            }
        })
    },
    watch: {
        styles(val) {
            const head = this.$el.contentDocument.head

            $(head).html(val)
        }
    },
    beforeUpdate() {
        this.iApp.children = Object.freeze(this.$slots.default)
    },
    methods: {
        renderChildren() {
            const children = this.$slots.default
            const body = this.$el.contentDocument.body

            const el = document.createElement('div')
            body.appendChild(el)

            const iApp = new Vue({
                name: 'iApp',
                store,
                data() {
                    return {
                        children: Object.freeze(children)
                    }
                },
                render(h) {
                    return h('div', this.children)
                }
            })

            iApp.$mount(el)

            this.iApp = iApp
        }
    }
}

Now, let me show you how data flows from the ConfirmationComponent to the PreviewComponent:

export default {
    name: 'ConfirmationComponent',
    mounted() {
        this.$store.commit('updateEmail', this.senderEmail)
        this.$store.commit('updateTerm', this.term)
    },
    watch: {
        'form.name'(val) {
            this.updateIframe()
        },
        'form.email'(val) {
            this.updateIframe()
        }
    },
    methods: {
        updateIframe() {
            this.$store.commit('updateForm', this.form)
        }
    }
}

And finally, here's how the actual PreviewComponent looks like:

import styles from '../../../templates/styles'

export default {
    name: 'PreviewComponent',
    mounted() {
        this.$store.commit('stylesChange', styles)
    },
    computed: {
        redemption_url() {
            return `${window.config.stitcher_website}/gift?code=`
        },
        custom_message() {
            if (this.form.message) {
                let div = document.createElement('div')

                div.innerHTML = this.form.message

                let text = div.textContent || div.innerText || ''

                return text.replace(/(?:\r\n|\r|\n)/g, '<br>')
            }
            return null
        },
        form() {
            return this.$store.state.form
        },
        term() {
            return this.$store.state.term
        },
        senderEmail() {
            return this.$store.state.senderEmail
        }
    }
}

I hope this serves as a useful reference for someone in need.

What is the best way to display a child component inside an iframe using Vue.js?

Answer №1

Similar questions

VueJS - Validating Props with Objects

Having issues installing Parcel through npm - Encountered an error while parsing package.json information

I am encountering an issue while developing a JavaScript filtering system

The response from the ajax call is still pending

The intervals in hooks seem to be malfunctioning and not updating the date and time as expected

Trouble arises when attempting to establish an isolated scope within Angular alongside UI Bootstrap

Obtain the ID of element 1 by clicking on element 2 using JQuery

Halting execution: Trying to use the keyword 'import' which is not allowed here

Tips for showcasing a calculated value in vue-table-2

Begin the jQuery ResponsiveSlides Slider with the final image in the <ul> list

What could be the reason for the Checkbox's value not showing up after making changes?

Analyzing a CSV file and executing asynchronous operations on specific columns with the help of ajax requests

"Utilizing jQuery's bind method with IE 7 compatibility and the use of

Route Separation with ExpressJS and Socket.IO

Is it necessary to re-export a module after modifying an attribute in it in JS/ES6?

Steps to retrieve data (token) from developer tools and incorporate it into a fetch Post request

Would it cause any issues if I have two onMounted() functions in a single component?

Leveraging the useRef hook to adjust the CSS styling of a React component

Would you prefer to generate fresh HTML using JavaScript or dynamically load an existing HTML layout using AJAX?

What are some ways to make source code more visually appealing on an HTML/JSP page as it is being