Basic VueJs Component

Defining and using a component - http://coligo.io

by oktaviardi pratama

HTML

<script src="https://cdn.jsdelivr.net/vue/1.0.16/vue.js"></script>
<div id="app">
  <greeting></greeting>
</div>

JavaScript

Vue.component('greeting', {
  template: '<nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top">
<div class="container text-center">
        <div class="text-center mx-auto" id="navbarResponsive">
          <ul class="navbar-nav ">
            <li class="nav-item active">
              <a class="nav-link" href="#">Home
                <span class="sr-only">(current)</span>
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Chocomania Funstastik Suprize 2</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="javascript:void(0)" @click="showRegisterModal">Registration</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="termscondition.html">Term & condition</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>'
});

// create a new Vue instance and mount it to our div element above with the id of app
var vm = new Vue({
  el: '#app'
});