Explore Vue: Split HTML Element

index.html

<div id="vueWrapper">
<div class="leftpanel">
    <div class="media profile-left">
        <a class="pull-left profile-thumb" href="profile.html">
            <img alt="" class="img-circle" src="https://rawgit.com/DeVoresyah/chain/master/images/photos/default.jpg"/>
        </a>
        <div class="media-body">
            <h4 class="media-heading">Lorem Ipsum</h4>
            <small class="text-muted">Dolor Sit Amet</small>
        </div>
        </div><!-- media -->
        
		<left-menu></left-menu>
    </div><!-- leftpanel -->
</div>

vue.js

Vue.component('left-menu', {
  tempalte: `<h5 class="leftpanel-title">Navigation</h5>
<ul class="nav nav-pills nav-stacked">
    <li class="active"><a href="/"><i class="fa fa-home"></i> <span>Dashboard</span></a></li>
    <li class="parent"><a href="javascript:void(0)"><i class="fa fa-shopping-cart"></i> <span>Buy Hashrate</span></a>
    <ul class="children">
        <li><a href="#"><b>Shared</b> Server</a></li>
        <li><a href="#"><b>Litespeed</b> Server</a></li>
        <li><a href="#"><b>SSD</b> Server</a></li>
    </ul>
</li>
<li><a href="#"><i class="fa fa-bookmark"></i> <span>History</span></a></li>
<li><a href="#"><i class="fa fa-ticket"></i> <span>Referrals</span></a></li>
<li><a href="#"><i class="fa fa-gears"></i> <span>Settings</span></a></li>
</ul>`
})

var vueWrapper = new Vue({
  el: "#vueWrapper"
})