Embedding and customizing a VueJS component through an iFrame

Lawrence Braun
Jul 29, 2018 · 3 min read
Basic flow on how to style & serve our component
// App.vue
<div id="app">
export default {
name: 'app',
// components/CustomComponent.vue
<div class="custom-component"
'background-color': backgroundColor,
'border-color': borderColor,
'border-style': 'solid',
'border-width': '2px',
'border-radius': '4px',
'padding': '15px',
'width': '300px',
'margin': '0 auto'
<input v-model="name" type="text" placeholder="Name" class="input" @blur="showValue">
export default {
name: 'CustomComponent',
data () {
return {
name: '',
backgroundColor: '#EEE',
borderColor: '#DDD'
let q = this.$router.currentRoute.query
this.backgroundColor = q.backgroundColor
this.borderColor = q.borderColor
showValue () {
width: 100%;
padding: 2px 4px;
// main.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import CustomComponent from './components/CustomComponent.vue'
import App from './App.vue'Vue.use(VueRouter)const routes = [
name: 'home',
path: '/',
component: CustomComponent,
props: true
Vue.config.productionTip = falseconst router = new VueRouter({
mode: 'history',
routes: routes
new Vue({
render: h => h(App)

Vue 101 — changing the values in the URL instantly change the component’s style
A basic example of widget wizard form. The preview area shows the customized component.

Lawrence Braun

Written by

I build web things. Frontend developer https://unbabel.com/. Infoholic. I also run https://thoro.news when I have time.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade