index.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
  <title>Vue Admin - A fast development library.</title>
  <link rel="stylesheet" href="/static/font-awesome/css/font-awesome.min.css">
  <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
  <!-- text fonts -->
  <link rel="stylesheet" href="/static/ace/css/fonts.googleapis.com.css" />
  <!-- ace styles -->
  <link rel="stylesheet" href="/static/ace/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" />
  <link rel="stylesheet" href="/static/ace/css/ace-skins.min.css" />
  <!-- ace settings handler -->
  <script src="/static/ace/js/ace-extra.min.js"></script>
</head>

<body class="no-skin">
  <div id="navbar" class="navbar navbar-default ace-save-state">
    <app-header></app-header>
  </div>
  <div class="main-container ace-save-state" id="main-container">
    <script type="text/javascript">
				try{ace.settings.loadState('main-container')}catch(e){}
			</script>
    <div id="sidebar" class="sidebar responsive ace-save-state">
      <app-sidebar></app-sidebar>
    </div>
    <div class="main-content">
      <div class="main-content-inner">
        <div class="breadcrumbs ace-save-state" id="breadcrumbs">
          <ul class="breadcrumb">
            <li>
              <i class="ace-icon fa fa-home home-icon"></i>
              <a href="#">Home</a>
            </li>
            <li class="active">Dashboard</li>
          </ul>
          <!-- /.breadcrumb -->

          <div class="nav-search" id="nav-search">
            <form class="form-search">
              <span class="input-icon">
									<input type="text" placeholder="Search ..." class="nav-search-input" id="nav-search-input" autocomplete="off" />
									<i class="ace-icon fa fa-search nav-search-icon"></i>
								</span>
            </form>
          </div>
          <!-- /.nav-search -->
        </div>

        <div class="page-content">
          <div class="ace-settings-container" id="ace-settings-container">
            <div class="btn btn-app btn-xs btn-warning ace-settings-btn" id="ace-settings-btn">
              <i class="ace-icon fa fa-cog bigger-130"></i>
            </div>

            <div class="ace-settings-box clearfix" id="ace-settings-box">
              <div class="pull-left width-50">
                <div class="ace-settings-item">
                  <div class="pull-left">
                    <select id="skin-colorpicker" class="hide">
												<option data-skin="no-skin" value="#438EB9">#438EB9</option>
												<option data-skin="skin-1" value="#222A2D">#222A2D</option>
												<option data-skin="skin-2" value="#C6487E">#C6487E</option>
												<option data-skin="skin-3" value="#D0D0D0">#D0D0D0</option>
											</select>
                  </div>
                  <span>&nbsp; Choose Skin</span>
                </div>

                <div class="ace-settings-item">
                  <input type="checkbox" class="ace ace-checkbox-2 ace-save-state" id="ace-settings-navbar" autocomplete="off" />
                  <label class="lbl" for="ace-settings-navbar"> Fixed Navbar</label>
                </div>

                <div class="ace-settings-item">
                  <input type="checkbox" class="ace ace-checkbox-2 ace-save-state" id="ace-settings-sidebar" autocomplete="off" />
                  <label class="lbl" for="ace-settings-sidebar"> Fixed Sidebar</label>
                </div>

                <div class="ace-settings-item">
                  <input type="checkbox" class="ace ace-checkbox-2 ace-save-state" id="ace-settings-breadcrumbs" autocomplete="off" />
                  <label class="lbl" for="ace-settings-breadcrumbs"> Fixed Breadcrumbs</label>
                </div>

                <div class="ace-settings-item">
                  <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-rtl" autocomplete="off" />
                  <label class="lbl" for="ace-settings-rtl"> Right To Left (rtl)</label>
                </div>

                <div class="ace-settings-item">
                  <input type="checkbox" class="ace ace-checkbox-2 ace-save-state" id="ace-settings-add-container" autocomplete="off" />
                  <label class="lbl" for="ace-settings-add-container">
											Inside
											<b>.container</b>
										</label>
                </div>
              </div>
              <!-- /.pull-left -->

              <div class="pull-left width-50">
                <div class="ace-settings-item">
                  <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-hover" autocomplete="off" />
                  <label class="lbl" for="ace-settings-hover"> Submenu on Hover</label>
                </div>

                <div class="ace-settings-item">
                  <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-compact" autocomplete="off" />
                  <label class="lbl" for="ace-settings-compact"> Compact Sidebar</label>
                </div>

                <div class="ace-settings-item">
                  <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-highlight" autocomplete="off" />
                  <label class="lbl" for="ace-settings-highlight"> Alt. Active Item</label>
                </div>
              </div>
              <!-- /.pull-left -->
            </div>
            <!-- /.ace-settings-box -->
          </div>
          <!-- /.ace-settings-container -->

          <div class="page-header">
            <h1>
              Dashboard
              <small>
									<i class="ace-icon fa fa-angle-double-right"></i>
									overview &amp; stats
								</small>
            </h1>
          </div>
          <router-view></router-view>
          <!-- /.page-header -->
        </div>
        <!-- /.page-content -->
      </div>
    </div>
    <!-- /.main-content -->

    <div class="footer">
      <div class="footer-inner">
        <div class="footer-content">
          <span class="bigger-120">
							<span class="blue bolder">Ace</span> Application &copy; 2013-2014
          </span>

          &nbsp; &nbsp;
          <span class="action-buttons">
							<a href="#">
								<i class="ace-icon fa fa-twitter-square light-blue bigger-150"></i>
							</a>

							<a href="#">
								<i class="ace-icon fa fa-facebook-square text-primary bigger-150"></i>
							</a>

							<a href="#">
								<i class="ace-icon fa fa-rss-square orange bigger-150"></i>
							</a>
						</span>
        </div>
      </div>
    </div>

    <a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
      <i class="ace-icon fa fa-angle-double-up icon-only bigger-110"></i>
    </a>
  </div>
  <!-- built files will be auto injected -->
  <!-- static javascript files -->
  <script src="/static/jquery/jquery.min.js"></script>
  <script src="/static/bootstrap/js/bootstrap.min.js"></script>
  <!--<script src="/static/ace/js/jquery-ui.custom.min.js"></script>
		<script src="/static/ace/js/jquery.ui.touch-punch.min.js"></script>
		<script src="/static/ace/js/jquery.easypiechart.min.js"></script>
		<script src="/static/ace/js/jquery.sparkline.index.min.js"></script>
		<script src="/static/ace/js/jquery.flot.min.js"></script>
		<script src="/static/ace/js/jquery.flot.pie.min.js"></script>
		<script src="/static/ace/js/jquery.flot.resize.min.js"></script>-->
  <!-- ace scripts -->
  <script src="/static/ace/js/ace-elements.min.js"></script>
  <script src="/static/ace/js/ace.min.js"></script>
</body>

</html>