Vue

by simati

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/browser.min.js"></script>
<div id="app"></div>

SCSS

body {
  padding: 16px;
}

.steps {
  border: 1px dashed blue;
  padding: 4px;
  
  .step {
    border: 1px dashed green;
    padding: 4px;
    margin: 4px;
      
    .instruction {
      border: 1px dashed orange;
      padding: 4px;
      margin: 4px;
    }
  }
}

Vue

Vue.component('instruction', {
  template: `<div class="instruction"><slot /></div>`
})

Vue.component('step', {
  template: `<div class="step"><slot /></div>`
})

Vue.component('steps', {
  template: `<div class="steps"><slot /></div>`
})

    Vue.component('quick-preview', {
      props: ['code'],
      render(h){
        return h('div', [
          h(Vue.compile(this.code))
        ])
      }
    })

new Vue({
  data(){
    return {
      code: `
      <steps>
        <step>
          <instruction>DO this</instruction>
          <instruction>THEN this</instruction>
        </step>
        <step>
          <instruction>AFTER sometime do this</instruction>
          <instruction>LASTLY do this</instruction>
        </step>
      </steps>`
    }
  },
  template: `<quick-preview :code="code" />`
}).$mount('#app')