Inject Vue instance into an iframe that create in runtime

Introduction

Have you had ever wanted your component style won’t be affected by any third-party style and too lazy to create a new page to put it into iframe src? If the answer is “yes” then you come into the right place :)

Let’s do it

Step 1: Create a new iframe

First, we need create a new iframe in runtime and append it to somewhere like document body for example:

iframe = document.createElement("iframe");
document.body.appendChild(iframe);

Step 2: Mount Vue instance into the iframe

Now we already have a iframe in the step 1, the only next thing we need to do is mount our Vue instance into it:

new Vue({
    el: iframe.contentWindow.document.body,
    template: "<div>Hello, World</div>"
})

Put everything together

<script>
iframe = document.createElement("iframe");
document.body.appendChild(iframe);

new Vue({
    el: iframe.contentWindow.document.body,
    template: "<div>Hello, World</div>"
})
</script>

Demo

Conclusion

It’s simple right? but it could save you a ton of time. Thank you for reading :)