Fixed common issues

.eslintrc.js

@@ -11,4 +11,4 @@ module.exports = {
   parserOptions: {
     parser: "babel-eslint"
   }
-};
+};

.gitignore

@@ -14,3 +14,4 @@ npm-debug.log
 packages/local-*
 yarn-error.log
 yerna.log
+dist

package.json

@@ -1,38 +1,39 @@
 {
-  "name": "vuejs-todos-app",
-  "version": "0.1.0",
-  "private": true,
-  "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
-  },
-  "dependencies": {
-    "@8base/auth": "^0.36.0",
-    "apollo-cache-inmemory": "^1.6.3",
-    "apollo-client": "^2.6.4",
-    "apollo-link-context": "^1.0.18",
-    "apollo-link-error": "^1.1.11",
-    "apollo-link-http": "^1.5.15",
-    "core-js": "^2.6.5",
-    "graphql": "^14.5.3",
-    "graphql-tag": "^2.10.1",
-    "register-service-worker": "^1.6.2",
-    "vue": "^2.6.10",
-    "vue-router": "^3.0.3",
-    "vuex": "^3.0.1"
-  },
-  "devDependencies": {
-    "@vue/cli-plugin-babel": "^3.10.0",
-    "@vue/cli-plugin-eslint": "^3.10.0",
-    "@vue/cli-plugin-pwa": "^3.10.0",
-    "@vue/cli-service": "^3.10.0",
-    "@vue/eslint-config-prettier": "^5.0.0",
-    "babel-eslint": "^10.0.1",
-    "eslint": "^5.16.0",
-    "eslint-plugin-prettier": "^3.1.0",
-    "eslint-plugin-vue": "^5.0.0",
-    "prettier": "^1.18.2",
-    "vue-template-compiler": "^2.6.10"
-  }
+	"name": "vuejs-todos-app",
+	"version": "0.1.0",
+	"private": true,
+	"scripts": {
+		"serve": "vue-cli-service serve",
+		"build": "vue-cli-service build",
+		"lint": "vue-cli-service lint --fix"
+	},
+	"dependencies": {
+		"@8base/auth": "^1.1.4",
+		"apollo-cache-inmemory": "^1.6.3",
+		"apollo-client": "^2.6.4",
+		"apollo-link-context": "^1.0.19",
+		"apollo-link-error": "^1.1.12",
+		"apollo-link-http": "^1.5.16",
+		"core-js": "^3.4.1",
+		"graphql": "^14.5.8",
+		"graphql-tag": "^2.10.1",
+		"register-service-worker": "^1.6.2",
+		"vue": "^2.6.10",
+		"vue-router": "^3.1.3",
+		"vuex": "^3.1.2"
+	},
+	"devDependencies": {
+		"@vue/cli-plugin-babel": "^4.0.5",
+		"@vue/cli-plugin-eslint": "^4.0.5",
+		"@vue/cli-plugin-pwa": "^4.0.5",
+		"@vue/cli-service": "^4.0.5",
+		"@vue/eslint-config-prettier": "^6.0.0",
+		"babel-eslint": "^10.0.3",
+		"eslint": "^6.6.0",
+		"eslint-plugin-prettier": "^3.1.1",
+		"eslint-plugin-vue": "^6.0.1",
+		"prettier": "^1.19.1",
+		"vue-cli-plugin-webpack-bundle-analyzer": "^2.0.0",
+		"vue-template-compiler": "^2.6.10"
+	}
 }

src/App.vue

@@ -1,31 +1,31 @@
-<style>
-#app {
-  font-family: "Avenir", Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  color: #2c3e50;
-}
-</style>
-
 <template>
   <div id="app">
     <Navbar />
-    
-    <hr>
+
+    <hr />
 
     <router-view />
   </div>
 </template>
 
 <script>
 /* Import packages */
-import Navbar from '@/components/Navbar'
+import Navbar from "@/components/Navbar";
 
 export default {
   name: "app",
 
   components: {
     Navbar
   }
-}
+};
 </script>
+
+<style>
+#app {
+  font-family: "Avenir", Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  color: #2c3e50;
+}
+</style>

src/components/Navbar.vue

@@ -19,19 +19,24 @@
 </style>
 
 <template>
-	<div id="nav">
-	  <!-- App title -->
-	  <h1>VueJS ❤️ 8base</h1>
-
-	  <router-link to="/">Home</router-link> |
-	  <router-link to="/about">About</router-link> | 
-	  <router-link to="/profile" :class="profileBtn.class" :event="profileBtn.event">
-	    Profile
-	  </router-link> - 
+  <div id="nav">
+    <!-- App title -->
+    <h1>VueJS ❤️ 8base</h1>
 
-	  <!-- Display SignIn/SignOut btn dynamically -->
-	  <button @click="authBtn.fn">{{authBtn.txt}}</button>
-	</div>
+    <router-link to="/">Home</router-link> |
+    <router-link to="/about">About</router-link> |
+    <router-link
+      to="/profile"
+      :class="profileBtn.class"
+      :event="profileBtn.event"
+    >
+      Profile
+    </router-link>
+    -
+
+    <!-- Display SignIn/SignOut btn dynamically -->
+    <button @click="authBtn.fn">{{ authBtn.txt }}</button>
+  </div>
 </template>
 
 <script>
@@ -48,35 +53,40 @@ export default {
      * Manage the state of the auth button
      * in the nav.
      */
-    authBtn () {
-      return this.authenticated ? {
-        txt: 'Sign Out',
-        fn: this.logout
-      } : {
-        txt: 'Sign In',
-        fn: this.login
-      }
+    authBtn() {
+      return this.authenticated
+        ? {
+            txt: "Sign Out",
+            fn: this.logout
+          }
+        : {
+            txt: "Sign In",
+            fn: this.login
+          };
     },
     /**
      * Manage the state of the profile button
      * in the nav.
-     */    
-    profileBtn () {
-      return this.authenticated ? {
-        class: '',
-        event: 'click'
-      } : {
-        class: 'isDisabled',
-        event: ''
-      }     
+     */
+
+    profileBtn() {
+      return this.authenticated
+        ? {
+            class: "",
+            event: "click"
+          }
+        : {
+            class: "isDisabled",
+            event: ""
+          };
     },
-    
+
     ...mapGetters(["authenticated"])
   },
   /**
    * Use state getters and actions to manage display
    * of baords are reflect mutations.
    */
   methods: mapActions(["login", "logout"])
-}
+};
 </script>

src/main.js

@@ -4,9 +4,9 @@ import router from "./router";
 import store from "./store";
 import "./registerServiceWorker";
 
-Vue.config.productionTip = false;
+Vue.config.productionTip = process.env.NODE_ENV === "production" ? false : true;
 /**
- * Initialize the vue app and mount to the 
+ * Initialize the vue app and mount to the
  * root component id.
  */
 new Vue({

src/router.js

@@ -1,12 +1,12 @@
 import Vue from "vue";
 import Router from "vue-router";
-import Home from "./views/Home.vue";
-import Profile from "./views/Profile.vue";
-import Callback from "./views/Callback.vue";
+import Home from "@/views/Home.vue";
+import Profile from "@/views/Profile.vue";
+import Callback from "@/views/Callback.vue";
 /**
  * Import the state for determining current auth state.
  */
-import store from "@/store"
+import store from "@/store";
 
 Vue.use(Router);
 /**
@@ -27,7 +27,7 @@ const router = new Router({
       name: "profile",
       component: Profile,
       meta: { requiresAuth: true }
-    },    
+    },
     {
       path: "/about",
       name: "about",
@@ -47,18 +47,17 @@ const router = new Router({
 });
 
 /**
- * Impliment router guards 
+ * Impliment router guards
  * for protected routes.
  */
 router.beforeEach((to, from, next) => {
   /* If the route requires auth */
   if (to.meta.requiresAuth) {
-    store.getters.authenticated ? next() : next({ name: 'home' })
-  } 
-  /* If the route is public */
-  else {
-    next()
+    store.getters.authenticated ? next() : next({ name: "home" });
+  } else {
+    /* If the route is public */
+    next();
   }
-})
+});
 
 export default router;

src/store/index.js

@@ -16,4 +16,3 @@ export default new Vuex.Store({
     session
   }
 });
-

src/store/modules/session.js

@@ -1,10 +1,10 @@
 import auth from "@/utils/auth.js";
-import * as gql from "@/utils/graphql"; 
-import graphqlClient from "@/utils/api"; 
+import * as gql from "@/utils/graphql";
+import graphqlClient from "@/utils/api";
 /**
  * State maintains the authentication state using Vuex.
- * Determines "authenticated" status by presence of 
- * "idToken" in local storage while storing the 
+ * Determines "authenticated" status by presence of
+ * "idToken" in local storage while storing the
  * idTokens value returned by the auth provider.
  */
 const state = {
@@ -26,7 +26,7 @@ const getters = {
    */
   idToken(state) {
     return state.idToken;
-  }  
+  }
 };
 /**
  * State mutations for setting state properties.
@@ -67,13 +67,13 @@ const actions = {
   logout({ commit }) {
     auth.logout();
 
-    commit('logout');
+    commit("logout");
   },
   /**
    * Checks if user is registered in 8base, if not signs up the user.
-   * Afterwards stores the authentication data in Vuex State. 
-   * 
-   * This function utilizes methods available on the auth model that is 
+   * Afterwards stores the authentication data in Vuex State.
+   *
+   * This function utilizes methods available on the auth model that is
    * stored in utils/auth.js.
    */
   async handleAuthentication({ commit }) {
@@ -82,8 +82,8 @@ const actions = {
      * Auth headers for communicating with the 8base API.
      */
     const context = {
-      headers: { 
-        authorization: `Bearer ${authResult.idToken}` 
+      headers: {
+        authorization: `Bearer ${authResult.idToken}`
       }
     };
     /**
@@ -94,13 +94,12 @@ const actions = {
         query: gql.CURRENT_USER_QUERY,
         context
       });
-    }
-    /**
-     * If user doesn't exist, an error will be
-     * thrown, which then the new user can be
-     * created using the authResult values.
-     */
-    catch {
+    } catch {
+      /**
+       * If user doesn't exist, an error will be
+       * thrown, which then the new user can be
+       * created using the authResult values.
+       */
       await graphqlClient.mutate({
         mutation: gql.USER_SIGN_UP_MUTATION,
         variables: {