Tolong Vue

main.js

/*!
 * Main Javascript
 *
 * Contributing author: Rully Ardiansyah (@DeVoresyah)
 */

$(window).bind('scroll', function () {
    if ($(window).scrollTop() > 50) {
        $('#top-menu').addClass('navbar-inverse navbar-fixed-top');
        $('#top-menu').removeClass('invisible-menu');
    } else {
        $('#top-menu').removeClass('navbar-inverse navbar-fixed-top');
		$('#top-menu').addClass('invisible-menu');
    }
});

var game_product = [
	{ id: '48516', name: 'Counter-Strike: Global Offensive', price: 'Rp 80.000,-', img: 'http://cdn.edgecast.steamstatic.com/steam/apps/730/header.jpg?t=1490209724', detail: 'Lorem Ipsum Dolor Sit Amet'},
	{ id: '34528', name: 'Fallout 4', price: 'Rp 0,-', img: 'http://cdn.edgecast.steamstatic.com/steam/apps/377160/header.jpg?t=1486403180', detail: 'Lorem Ipsum Dolor Sit Amet'},
	{ id: '31542', name: 'Arma 3', price: 'Rp 0,-', img: 'http://cdn.edgecast.steamstatic.com/steam/apps/107410/header.jpg?t=1490285503', detail: 'Lorem Ipsum Dolor Sit Amet'},
	{ id: '24582', name: 'Arma 2', price: 'Rp 0,-', img: 'http://cdn.edgecast.steamstatic.com/steam/apps/33900/header.jpg?t=1484308358', detail: 'Lorem Ipsum Dolor Sit Amet'},
	{ id: '22485', name: 'Arma 2: Operation Arrowhead', price: 'Rp 0,-', img: 'http://cdn.edgecast.steamstatic.com/steam/apps/33930/header.jpg?t=1478602186', detail: 'Lorem Ipsum Dolor Sit Amet'},
	{ id: '56482', name: 'Rocket League', price: 'Rp 0,-', img: 'http://cdn.edgecast.steamstatic.com/steam/apps/252950/header.jpg?t=1487806299', detail: 'Lorem Ipsum Dolor Sit Amet'},
	{ id: '56879', name: 'Miscreated', price: 'Rp 0,-', img: 'http://cdn.edgecast.steamstatic.com/steam/apps/299740/header.jpg?t=1489184399', detail: 'Lorem Ipsum Dolor Sit Amet'},
	{ id: '52148', name: 'Rust', price: 'Rp 0,-', img: 'http://cdn.edgecast.steamstatic.com/steam/apps/252490/header.jpg?t=1487638704', detail: 'Lorem Ipsum Dolor Sit Amet'},
	{ id: '53864', name: 'Payday 2', price: 'Rp 0,-', img: 'http://cdn.edgecast.steamstatic.com/steam/apps/218620/header.jpg?t=1490289944', detail: 'Lorem Ipsum Dolor Sit Amet'},
	{ id: '63498', name: 'GTA V (Non-Steam Edition)', price: 'Rp 0,-', img: 'http://cdn.edgecast.steamstatic.com/steam/apps/271590/header.jpg?t=1489701996', detail: 'Lorem Ipsum Dolor Sit Amet'}
];

Vue.component('grid-product-list', {
	template: `<div><div v-for="show in list" class="col-md-4">
	<div class="panel panel-primary">
		<div class="panel-heading">
			<h3 class="panel-title">{{ show.name }}</h3>
		</div>
		<img v-bind:src="show.img" alt="" class="img-responsive">
		<div class="panel-footer">
			<div class="row">
				<div class="col-md-12">
					<p class="info">Harga: <b class="text-primary"><i>{{ show.price }}</i></b></p>
				</div>
				<div class="col-md-6">
					<a href="javascript:void(0)" v-on:click="showDetails(show.name, show.detail, show.price)" class="btn btn-primary btn-block">Detail <i class="fa fa-info-circle"></i></a>
				</div>
				<div class="col-md-6">
					<a href="javascript:void(0)" v-on:click="testalert" class="btn btn-success btn-block">Beli <i class="fa fa-shopping-cart"></i></a>
				</div>
			</div>
		</div>
	</div>
</div></div>`,

	data: function() {
		return {
			list: game_product
		}
	},

	methods: {
		testalert: function() {
			alert("tested gans")
		},
		showDetails: function(name, details, price){
			bsmodal.name = name;
			bsmodal.detail = details;
			bsmodal.price = price;
			$("#modal-details").modal("show");
		}
	}
})

Vue.component('header-menu', {
	template: `<nav id="top-menu" class="navbar invisible-menu">
	<div class="container">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
			<span class="sr-only">Toggle navigation</span>
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
			</button>
			<a class="navbar-brand" href="/">{{ title_site }}</a>
		</div>
		<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
			<ul class="nav navbar-nav">
				<li><a href="#">Steam Games</a></li>
				<li><a href="#">Steam Wallet</a></li>
				<li><a href="#">Origin Games</a></li>
				<li><a href="#">Cara Pemesanan</a></li>
			</ul>
			<ul class="nav navbar-nav navbar-right">
				<li><a href="#">Hubungi Saya</a></li>
				<li><a href="#">Syarat & Ketentuan</a></li>
			</ul>
		</div>
	</div>
</nav>`,

	data: function() {
		return {
			title_site: 'XGaming Store'
		}
	}
})

var bsmodal = Vue.component('bs-modal', {
	template: `<div id="modal-details" class="modal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Details: {{ name }}</h4>
      </div>
      <div class="modal-body">
        <p>{{ detail }}</p>
        <p><b>Harga: <i class="text-primary">{{ price }}</i></b></p>
        <p><b class="text-danger">*</b>Note: Harga dapat berubah sewaktu-waktu</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Tutup</button>
      </div>
    </div>
  </div>
</div>`,

	data: function() {
		return {
			name: '',
			detail: '',
			price: ''
		}
	}
})

Vue.component('footer-element', {
	template: `<div><div class="col-md-3">
					&copy;{{ year }} <a href="/">{{ title }}</a>, All Right Reserved
				</div>
				<div class="col-md-9">
					<ul>
						<li v-for="list in menu">
							<a v-bind:href="list.url">{{ list.item }}</a>
						</li>
					</ul>
				</div></div>`,
	data: function() {
		return {
			title: 'XGaming Store',
			year: new Date().getFullYear(),
			menu: [
				{ item: 'Terms of Service', url: '#' },
				{ item: 'Disclaimer', url: '#' },
				{ item: 'Privacy Policy', url: '#' },
				{ item: 'Cookies', url: '#' }
			]
		}
	}
})

$(document).ready(function(){
	new Vue ({
		el: '#vueWrapper',

		data: {
			web_title: 'XGaming Store',
			web_description: 'Beli Game Steam Original Murah'
		},

		methods: {
			browse_games: function() {
				document.querySelector('#content').scrollIntoView({ behavior: 'smooth' });
			}
		}
	})
})