Added fontawesome; made bootswatch theme configurable in config; added axios example

Author: Justus Bogner

README.md

@@ -1,20 +1,20 @@
 # Vue.js TypeScript Frontend Skeleton Project
 
-> A skeleton project with Vue.js, TypeScript, Bootstrap, Less, Webpack, and Jest.
+> A skeleton project with Vue.js, TypeScript, Bootstrap, Font Awesome, Less, Webpack, and Jest.
 
 ## Structure
 
-- `src/app.ts`: main file of the app that loads and configures all dependencies and kickstarts the parent Vue component
-- `src/App.vue`: parent Vue component with basic app skeleton with header/nav, body, and footer
-- `src/routes.ts`: configuration of routes (`route`: binding a `component` to a certain `path`)
-- `src/views/`: directory for all Vues; should be structured according to domain concepts
-- `src/common/`: directory for shared functionality that is not specific to a certain Vue or domain concept
-- `src/config/index.ts`: configuration file with app or environment specific properties
-- `test/`: directory for all tests
+-   `src/app.ts`: main file of the app that loads and configures all dependencies and kickstarts the parent Vue component
+-   `src/App.vue`: parent Vue component with basic app skeleton with header/nav, body, and footer
+-   `src/routes.ts`: configuration of routes (`route`: binding a `component` to a certain `path`)
+-   `src/views/`: directory for all Vues; should be structured according to domain concepts
+-   `src/common/`: directory for shared functionality that is not specific to a certain Vue or domain concept
+-   `src/config/index.ts`: configuration file with app or environment specific properties (e.g. to change the used Bootswatch theme)
+-   `test/`: directory for all tests
 
 ## Build Setup
 
-``` bash
+```bash
 # install dependencies
 npm install
 
@@ -36,21 +36,7 @@ npm run sonar
 
 ## Useful VSCode Extensions
 
-- Vetur (helps with Vue SFCs)
-- TSLint (enforces coding rules in `tslint.json`)
-- Prettier (formats Vue files)
-- EditorConfig (enforces code formatting in `.editorconfig`)
-
-## VSCode Settings
-
-```json
-{
-    "editor.formatOnSave": true,
-    "prettier.disableLanguages": [
-        "markdown"
-    ],
-    "tslint.alwaysShowRuleFailuresAsWarnings": true,
-    "tslint.autoFixOnSave": true,
-    "vetur.format.defaultFormatter.html": "js-beautify-html"
-}
-```
+-   Vetur (helps with Vue SFCs)
+-   TSLint (enforces coding rules in `tslint.json`)
+-   Prettier (formats Vue files)
+-   EditorConfig (enforces code formatting in `.editorconfig`)

package-lock.json

@@ -1,7 +1,7 @@
 {
     "name": "skeleton-vue-typescript",
     "description": "A web frontend skeleton project with Vue.js, TypeScript, Bootstrap, Less, Webpack, and Jest.",
-    "version": "0.0.3",
+    "version": "0.1.0",
     "license": "Apache-2.0",
     "author": "Justus Bogner <[email protected]>",
     "scripts": {
@@ -36,13 +36,16 @@
         ]
     },
     "dependencies": {
+        "@fortawesome/fontawesome-svg-core": "^1.2.10",
+        "@fortawesome/free-solid-svg-icons": "^5.6.1",
+        "@fortawesome/vue-fontawesome": "^0.1.3",
         "axios": "^0.18.0",
         "bootstrap": "^4.1.3",
         "bootstrap-vue": "^2.0.0-rc.11",
         "bootswatch": "^4.1.3",
         "core-js": "^2.6.1",
         "moment": "^2.23.0",
-        "vue": "^2.5.21",
+        "vue": "2.5.17",
         "vue-class-component": "^6.3.2",
         "vue-property-decorator": "^7.2.0",
         "vue-router": "^3.0.2"
@@ -69,7 +72,7 @@
         "typescript": "^3.2.2",
         "vue-jest": "^3.0.2",
         "vue-loader": "^15.4.2",
-        "vue-template-compiler": "^2.5.21",
+        "vue-template-compiler": "2.5.17",
         "webpack": "^4.28.0",
         "webpack-cli": "^3.1.2",
         "webpack-dev-server": "^3.1.10",

package.json

@@ -1,8 +1,12 @@
 // Bootstrap CSS
 import "bootstrap-vue/dist/bootstrap-vue.css";
 import "bootstrap/dist/css/bootstrap.css";
-// Bootswatch theme
-import "bootswatch/dist/yeti/bootstrap.min.css";
+
+// Configuration file
+import { config } from "./config";
+
+// Bootswatch theme (changeable in the config)
+import(`bootswatch/dist/${config.bootswatchTheme}/bootstrap.min.css`);
 
 // IE polyfills
 import "core-js/es6/array";
@@ -12,6 +16,18 @@ import "core-js/es7/array";
 // Main Vue library
 import Vue from "vue";
 
+// Fontawesome icon setup
+import { library } from "@fortawesome/fontawesome-svg-core";
+// Only import the icons you really use to reduce the size of the import, e.g. 'faCommentDots' (the comment dots icon) instead of 'fas' (all free solid icons)
+import {
+  faCheckSquare,
+  faCommentDots,
+  faStar
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+library.add(faCheckSquare, faCommentDots, faStar);
+Vue.component("fa-icon", FontAwesomeIcon);
+
 // BootstrapVue UI components library
 import BootstrapVue from "bootstrap-vue";
 Vue.use(BootstrapVue);
@@ -24,7 +40,9 @@ import VueRouter from "vue-router";
 Vue.use(VueRouter);
 import routes from "./routes";
 const router = new VueRouter({
-  mode: "history",
+  // Use history mode to get rid of the # in the URL
+  // This requires server-side changes though to have stateless URLs (see: https://router.vuejs.org/guide/essentials/history-mode.html)
+  // mode: "history",
   routes
 });
 

src/app.ts

@@ -1,12 +1,14 @@
 // config for this frontend project
 export const config = {
+  // identifier used for localStorage
+  appId: "skeleton-vue-typescript",
+  appTitle: "Vue.js TypeScript Skeleton",
 
-    // identifier used for localStorage
-    appId: "skeleton-vue-typescript",
-    appTitle: "Vue.js TypeScript Skeleton",
+  // Bootswatch Theme (https://bootswatch.com)
+  bootswatchTheme: "flatly",
 
-    // build Date (replaced by webpack)
-    buildDate: "$BUILDDATE",
-    // version (replaced by webpack)
-    version: "$VERSION"
+  // build Date (replaced by webpack)
+  buildDate: "$BUILDDATE",
+  // version (replaced by webpack)
+  version: "$VERSION"
 };