Skip to content

Instantly share code, notes, and snippets.

@billyct

billyct/admin(v2).js

Forked from jwalton512/admin(v2).js
Created January 11, 2017 10:49
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save billyct/b28deb7afec4060a1b119546b9dc1eb3 to your computer and use it in GitHub Desktop.
Save billyct/b28deb7afec4060a1b119546b9dc1eb3 to your computer and use it in GitHub Desktop.
Download ZIP
Harmony with Laravel + Vue + Vue Router
Raw
admin(v2).js
// dashboard component
var dashboard = Vue.extend({
template: '<p>Hello from dashboard</p>'
})
// user management component
var user = Vue.extend({
template: '<p>Hello from user management page</p>'
})
// 404
var fourohfour = Vue.extend({
template: '<p>Oh noes, four oh foes</p>'
})
// create our vm instance
// set our template to display the component selected
// by the router
var app = Vue.extend({
template: '<router-view></router-view>'
})
// configure the router
// using HTML5 history mode
var router = new VueRouter({
history: true,
saveScrollPosition: true,
root: '/admin'
})
// map our frontend routes
router.map({
'*': {
component: fourohfour
},
'/dashboard': {
component: dashboard
},
'/users': {
component: user
}
})
// initialize the router and mount to #app
router.start(app, '#app')
Raw
admin.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo | Admin Panel</title>
</head>
<body>
<div id="app">
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/0.12.12/vue.min.js"></script>
<script src="//cdn.jsdelivr.net/vue.router/0.5.2/vue-router.min.js"></script>
<script src="/js/admin.js"></script>
</body>
</html>
Raw
admin.js
// dashboard component
var dashboard = Vue.extend({
template: '<p>Hello from dashboard</p>'
})
// user management component
var user = Vue.extend({
template: '<p>Hello from user management page</p>'
})
// create our vm instance
// set our template to display the component selected
// by the router
var app = Vue.extend({
template: '<router-view></router-view>'
})
// configure the router
// using HTML5 history mode
var router = new VueRouter({
history: true,
saveScrollPosition: true,
root: '/admin'
})
// map our frontend routes
router.map({
'/dashboard': {
component: dashboard
},
'/users': {
component: user
}
})
// initialize the router and mount to #app
router.start(app, '#app')
Raw
routes(v2).php
get('admin/{subs?}', ['middleware' => 'auth', function () {
return view('admin');
}])->where(['subs' => '.*']);
Raw
routes.php
<?php
get('admin/{subs?}', [function () {
return view('admin');
}])->where(['subs' => '.*']);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment