Cannot Nest horizontal/vertical splits

[rfestag]

I cannot seem to nest splits with different directions. I would like to set up 3 outer panels with horizontal splits, and two inner vertical splits on the center (something like this). As is, it seems to ignore the direction on the inner split, and renders as horizontal. Am I doing something wrong?

<template>
<div>
  <Split style="height:100vh">
    <SplitArea :size="20">
      Left Area
    </SplitArea>
    <SplitArea :size="60">
        <Split :direction="vertical">
          <SplitArea :size="80">
           Center Panel
          </SplitArea>
          <SplitArea :size="20">
            Bottom Panel
          </SplitArea>
        </Split>
    </SplitArea>
    <SplitArea :size="20">
      Right Area
    </SplitArea>
  </Split>
</div>
</template>

[rfestag]

Actually, it looks like documentation/understanding Vue issue. I had to change ":direction" to "direction". Using :direction tells Vue to look for a variable called "vertical". It would probably be clearer to change the documentation to use "direction=vertical" instead.

<template>
<div>
  <Split style="height:100vh">
    <SplitArea :size="20">
      Left Area
    </SplitArea>
    <SplitArea :size="60">
        <Split direction="vertical">
          <SplitArea :size="80">
           Center Panel
          </SplitArea>
          <SplitArea :size="20">
            Bottom Panel
          </SplitArea>
        </Split>
    </SplitArea>
    <SplitArea :size="20">
      Right Area
    </SplitArea>
  </Split>
</div>
</template>

[bajaniyarohit]

Hi @rfestag ,

Nest horizontal/vertical splits works fine. Please check the example Example Link

[rfestag]

Sorry, I don't think I was clear in my second post. I did get it working; the problem was that the README.md shows using :direction instead of direction. That was an error I missed because I'm relatively new to Vue and didn't recognize the distinction. The example you point to does it correctly.