#app
  splitpanes.default-theme
    pane(min-size="20") 1#[br]#[em.specs I have a min width of 20%]
    pane
      splitpanes.default-theme(horizontal)
        pane(min-size="15") 2#[br]#[em.specs I have a min height of 15%]
        pane 3
        pane 4
    pane 5

p Documentation @#[a(href="https://antoniandre.github.io/splitpanes") antoniandre.github.io/splitpanes]
View Compiled
.splitpanes__pane {
  box-shadow: 0 0 3px rgba(0, 0, 0, .2) inset;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}

em.specs {
  font-size: 0.2em;
  line-height: 1;
  position: absolute;
  color: #bbb;
  bottom: 0.5em;
  left: 0;
  right: 0;
  text-align: center;
}


// GENERAL STYLES.
html, body, #app {height: 100%;margin: 0;}
body {
  font-family: Helvetica, Arial, sans-serif;
  color: rgba(255, 255, 255, 0.6);
  font-size: 5em;
}

// documentation link.
p {
  position: absolute;
  bottom: 5px;
  right: 5px;
  color: #666;
  z-index: 10;
  font-size: 12px;
  
  a {color: inherit;}
}
View Compiled
const { Splitpanes, Pane } = splitpanes

new Vue({
  el: '#app',
  components: { Splitpanes, Pane }
})

External CSS

  1. https://unpkg.com/splitpanes@legacy/dist/splitpanes.css

External JavaScript

  1. https://unpkg.com/vue@legacy
  2. https://unpkg.com/splitpanes@legacy