Semantic-ui: [Sidebar] Not animating properly when using context and vuejs structure

[mcfarljw]

When using Vuejs with the Sidebar module it's require to use the context setting because Vuejs doesn't allow components to be rendered directly in the body. When doing this using a basic structure I've noticed that the pusher content animates properly, but the actual sidebar does not. Is there something I can do to fix the sidebar animation?

Example:
https://jsfiddle.net/jdzbzjtp/5/

// app.html
<div id="app">

  <div class="ui sidebar left inverted vertical menu">
    <a class="item">
      1
    </a>
    <a class="item">
      2
    </a>
    <a class="item">
      3
    </a>
  </div>

  <div class="pusher">
    <div class="ui basic segment">
      <h1>hello world</h1>
    </div>
  </div>

</div>

// app.js
new Vue({
  el: '#app',
  data: {},
  mounted: function() {
    setTimeout(
          function () {
            $('.ui.sidebar').sidebar({context: '#app'}).sidebar('toggle');
          },
         100
    )
  }
});

[awgv]

Hi @mcfarljw, try setting the transition property manually:

$('.ui.sidebar')
  .sidebar({
    context: '#app',
    transition:'push'
  })

[mcfarljw]

Thanks for the answer. Adding in that option settings seems to fix things up nicely.

https://jsfiddle.net/mcfarljw/jdzbzjtp/6/