Skip to content

Instantly share code, notes, and snippets.

@jwalton512

jwalton512/admin(v2).js

Last active May 15, 2018 19:41
Show Gist options
  • Save jwalton512/9f1af52981dcbd236274 to your computer and use it in GitHub Desktop.
Save jwalton512/9f1af52981dcbd236274 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' => '.*']);
@scottgrayson
Copy link

Could you explain what that routes.php GET method does? Is there to avoid 404s from direct links to routes defined by vue router?

@samoot1968
Copy link

Can you please explain, how to use http get with this method? If i use this subs method then i no longer get response from database

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment