example-code/php-laravel/js/panel/panel.vue

<template>
<template v-if="!loading">
<sidebar :role="user.role" :active="active"></sidebar>
<transition name="fade" mode="out-in">
<div v-if="active === ''" id="main">
	<section class="welcome-pane"><h3>Welcome, {{user.name}}!</h3></section>
	<section class="credits-pane"><img src="../../images/coin-stack.svg"
	alt="wallet" class="icon"/><p>Credits:
	{{(user.credits/100).toLocaleString('en')}}</p></section>
	<section class="alerts-pane"><h4>News and Announcements</h4>
	<p>We've just launched. Thanks for joining us! Some features are still
	being tested. If you experience a delay in credits being added to your
	account, please wait 24 hours before contacting support@trendplays.com.</p>
	</section>
	<section class="recent-pane"><h4>Recent Activity</h4>
	<table>
		<thead><th>Date</th><th>Name</th><th>Status</th></thead>
		<tbody>
		<tr v-bind:key='order.id' v-for='order in orders.slice(0, 10)'>
		<template v-if="order.status != 'pending'">
		<td>{{order.updated_at}}</td>
		<td>{{order.service.name}}</td>
		<td :class="order.status"
		class="status"><span>{{order.status.charAt(0).toUpperCase() +
		order.status.slice(1)}}</span></td>
		</template>
		</tr>
		</tbody>
	</table>
	</section>
</div>

<past-orders :token="token" :orders="orders" v-else-if="active === '#orders'"
id="main">
</past-orders>

<new-order :preferred="user.payment_method" :token="token" :active="active"
:credits="user.credits" v-else-if="active ===
'#new-order' || active === '#credits'" id="main" @update-user='getUser'
@update-orders='getOrders'>
</new-order>

<div id="main" v-else-if="active === '#exit'">
	<section class="logout-pane">
		<h3>Are you sure you want to logout?</h3>
		<a href="/logout">Logout</a>
	</section>
</div>

<settings :token="token" :user="user" class="settings-page" id="main"
v-else-if="active === '#settings'">
</settings>

<transaction-end @purchase-complete="getUser" :token="token" :user="user"
:active="active" v-else-if="active ==
'#transaction-complete' || active == '#transaction-failed'">
</transaction-end>

<support v-else-if="active == '#support'" :user="user" :token="token"></support>

</transition>
</template>
</template>

<script>
import Sidebar from './sidebar.vue'
import Settings from './settings.vue'
import PastOrders from './orders.vue'
import NewOrder from './services.vue'
import TransactionEnd from './transaction-endpoint.vue'
import Support from './support.vue'

function getServices() {
	return fetch("/panel/services", {
		method: 'GET',
		headers: {'Content-Type': 'application/json',
			'Accept': 'application/json',
			'X-XSRF-TOKEN': this.token}
	}).then(response => {
		response.json().then(data => {this.services = data})
	})
}

function getUser() {
	return fetch("/panel/user", {
		method: 'GET',
		headers: {'Content-Type': 'application/json',
			'Accept': 'application/json',
		'X-XSRF-TOKEN': this.token},
	}).then(response => {
		return response.json()
	}).then(data => {
		this.user = data
	})
}

function getOrders() {
	return fetch("/panel/orders", {
		method: 'GET',
		headers: {'Content-Type': 'application/json',
			'Accept': 'application/json',
		'X-XSRF-TOKEN': this.token},
	}).then(response => {
		return response.json()
	}).then(data => {
		this.orders = data
	})
}

export default {
	components: {
		Sidebar, Settings, PastOrders, NewOrder,
		TransactionEnd, Support
	},
	data() {
	return {active: window.location.hash, user: null,
	token: null, orders: null, loading: true,}
	},
	methods: {getUser, getServices, getOrders, },
	created() {
		let loaders = []
		loaders.push(this.getUser())
		loaders.push(this.getServices())
		loaders.push(this.getOrders())
		Promise.all(loaders).then(() => {
			this.loading = false
		})
	}
}
</script>