Skip to content

Commit 1371858

Browse files
klarkcklarkc
authored
Merge pull request #5 from InCuca/vuex-vuerouter
Vuex, vue-router, Bootstrap and Sass, fixes #1, closes #2, closes #3 and closes #4
2 parents 8f5c4f5 + e9cbf52 commit 1371858

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

46 files changed

+1408
-99
lines changed

‎meta.js

Lines changed: 19 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ const path = require('path');
33

44
module.exports = {
55
"prompts": {
6-
76
"name": {
87
"type": "string",
98
"required": true,
@@ -19,26 +18,26 @@ module.exports = {
1918
"type": "string",
2019
"message": "Author"
2120
},
22-
"build": {
23-
"type": "list",
24-
"message": "Vue build",
25-
"choices": [
26-
{
27-
"name": "Runtime + Compiler: recommended for most users",
28-
"value": "standalone",
29-
"short": "standalone"
30-
},
31-
{
32-
"name": "Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere",
33-
"value": "runtime",
34-
"short": "runtime"
35-
}
36-
]
37-
},
38-
"router": {
21+
"extended": {
3922
"type": "confirm",
40-
"message": "Install vue-router?"
41-
},
23+
"message": "Add basic Login and Admin views with Vuex, Vue-router and Bootstrap-vue?"
24+
}
25+
},
26+
"filters": {
27+
"client/router.js": "extended",
28+
"client/static/main.css": "extended === false",
29+
"client/static/images/**/*": "extended",
30+
"client/components/**/*": "extended",
31+
"client/services/**/*": "extended",
32+
"client/store/**/*": "extended",
33+
"client/style/**/*": "extended",
34+
"client/view/**/*": "extended",
35+
"server/boot/add-initial-data.js": "extended",
36+
"server/boot/create-admin.js": "extended",
37+
"server/initial-data/**/*": "extended",
38+
"server/models/**/*": "extended",
39+
"test/client/components/**/*": "extended",
40+
"test/server/account.spec.js": "extended",
4241
},
4342
"complete": function(data, {logger}) {
4443
logger.log("To get started:");

‎package-lock.json

Lines changed: 10 additions & 10 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎template/.babelrc

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,15 @@
11
{
2-
"presets": ["es2015"]
2+
"presets": ["es2015"],
3+
"plugins": [
4+
[
5+
"babel-plugin-root-import", [{
6+
"rootPathPrefix": "~",
7+
"rootPathSuffix": "."
8+
}, {
9+
"rootPathPrefix": "@",
10+
"rootPathSuffix": "client"
11+
}
12+
]
13+
]
14+
]
315
}

‎template/.eslintrc

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,9 @@
66
"sourceType": "module"
77
},
88
"globals": {
9-
"require": true
9+
"expect": true,
10+
"assert": true,
11+
"require": true,
12+
"request": true
1013
}
1114
}

‎template/client/App.vue

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,21 @@
11
<template lang="html">
2-
<h1>\{{ hello }}</h1>
2+
{{#extended}}
3+
<router-view id="app"></router-view>
4+
{{else}}
5+
<h1>\{{ hello }}</h1>
6+
{{/extended}}
37
</template>
48

59
<script>
610
export default {
11+
{{#unless extended}}
712
data: () => ({
813
hello: 'Hello World!',
914
}),
15+
{{/unless}}
1016
}
1117
</script>
1218

13-
<style lang="css">
19+
<style {{#extended}}lang="scss"{{else}}lang="css"{{/extended}}>
20+
{{#extended}}@import "style/app.scss";{{/extended}}
1421
</style>

‎template/client/components/HelloWorld/HelloWorld.vue

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<template>
2+
<div>
3+
Hello World! This content is restricted.
4+
</div>
5+
</template>
6+
7+
<script>
8+
export default {
9+
10+
}
11+
</script>

‎template/client/index.html

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,10 @@
22
<html>
33
<head>
44
<meta charset="utf-8">
5-
<title></title>
5+
<title>{{name}}</title>
6+
{{#extended}}
7+
<meta name="viewport" content="width=device-width, user-scalable=no">
8+
{{/extended}}
69
</head>
710
<body>
811
<div id="app"></div>

‎template/client/main.js

Lines changed: 33 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,41 @@
1+
{{#extended}}
2+
/* Required by BootstrapVue */
3+
import 'babel-polyfill';
4+
5+
{{/extended}}
6+
/* Global Components */
17
import Vue from 'vue';
8+
{{#extended}}
9+
import {sync} from 'vuex-router-sync';
10+
import 'bootstrap-vue/dist/bootstrap-vue.css';
11+
import BootstrapVue from 'bootstrap-vue';
12+
// import 'vue-awesome/icons';
13+
import Icon from 'vue-awesome';
14+
15+
Vue.use(BootstrapVue);
16+
17+
Vue.component('icon', Icon);
18+
19+
{{/extended}}
20+
/* Local Components and modules */
221
import App from './App.vue';
22+
{{#extended}}
23+
import router from './router.js';
24+
import store from './store';
325

26+
// Add router state to store
27+
sync(store, router);
28+
{{/extended}}
29+
{{#unless extended}}
430
import './static/main.css';
31+
{{/unless}}
532

6-
new Vue({
33+
// Instance Application
34+
export default new Vue({
735
el: '#app',
836
render: (r) => r(App),
37+
{{#extended}}
38+
router,
39+
store,
40+
{{/extended}}
941
});

‎template/client/router.js

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import Vue from 'vue';
2+
import VueRouter from 'vue-router';
3+
import store from '@/store';
4+
import Login from './view/Login.vue';
5+
import Dashboard from './view/Dashboard.vue';
6+
import Profile from './view/Profile.vue';
7+
8+
Vue.use(VueRouter);
9+
10+
const router = new VueRouter({
11+
mode: 'history',
12+
routes: [
13+
{
14+
path: '/',
15+
name: 'home',
16+
redirect: {name: 'dashboard'},
17+
}, {
18+
path: '/dashboard',
19+
name: 'dashboard',
20+
component: Dashboard,
21+
meta: {requiresAuth: true},
22+
}, {
23+
path: '/login',
24+
name: 'login',
25+
component: Login,
26+
}, {
27+
path: '/profile',
28+
name: 'profile',
29+
component: Profile,
30+
// eslint-disable-next-line camelcase
31+
props: route => ({access_token: route.query.access_token}),
32+
meta: {requiresAuth: true},
33+
},
34+
],
35+
});
36+
37+
router.beforeEach((to, from, next) => {
38+
if (to.matched.some(record => record.meta.requiresAuth)) {
39+
// this route requires auth, check if logged in
40+
// if not, redirect to login page (except when it's profile route and
41+
// there is an access_token).
42+
if (to.name === 'profile' && to.query.access_token) {
43+
next();
44+
} else if (!store.state.auth.access_token) {
45+
next({
46+
name: 'login',
47+
});
48+
} else {
49+
next();
50+
}
51+
} else {
52+
next(); // make sure to always call next()!
53+
}
54+
});
55+
56+
export default router;

‎template/client/services/loopback.js

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import {host, restApiRoot, port} from '~/server/config.json';
2+
import axios from 'axios';
3+
4+
const http = axios.create({
5+
baseURL: 'http://' + host + ':' + port + restApiRoot,
6+
});
7+
8+
http.setToken = token => {
9+
http.defaults.headers.common['Authorization'] = token;
10+
};
11+
12+
http.removeToken = () => {
13+
delete http.defaults.headers.common.Authorization;
14+
};
15+
16+
http.find = (endpoint, filter) => http.get(endpoint, {params: {filter}});
17+
18+
const interceptErrors = err => {
19+
try {
20+
err = Object.assign(new Error(), err.response.data.error);
21+
} catch (e) {
22+
// Will return err if something goes wrong
23+
}
24+
return Promise.reject(err);
25+
};
26+
const interceptResponse = res => {
27+
try {
28+
return res.data;
29+
} catch (e) {
30+
return res;
31+
}
32+
};
33+
http.interceptors.response.use(interceptResponse, interceptErrors);
34+
35+
export default http;
36+
37+
// Documentation: https://github.com/axios/axios

0 commit comments

Comments
 (0)