try to add linting

.eslintrc.js

+module.exports = {
+  root: true,
+
+  parserOptions: {
+    parser: "babel-eslint",
+    sourceType: "module"
+  },
+
+  env: {
+    browser: true
+  },
+
+  extends: [
+    // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
+    // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
+    "plugin:vue/strongly-recommended",
+    "@vue/standard"
+  ],
+
+  // required to lint *.vue files
+  plugins: ["vue"],
+
+  globals: {
+    ga: true, // Google Analytics
+    cordova: true,
+    __statics: true,
+    process: true,
+    Capacitor: true
+  },
+
+  // add your custom rules here
+  rules: {
+    "vue/valid-v-for": "off",
+    "template-curly-spacing": "off",
+    // allow async-await
+    "generator-star-spacing": "off",
+    // allow paren-less arrow functions
+    "arrow-parens": "off",
+    "one-var": "off",
+    semi: "off",
+
+    "import/first": "off",
+    "import/named": "error",
+    "import/namespace": "error",
+    "import/default": "error",
+    "import/export": "error",
+    "import/extensions": "off",
+    "import/no-unresolved": "off",
+    "import/no-extraneous-dependencies": "off",
+    "prefer-promise-reject-errors": "off",
+
+    // allow console.log during development only
+    "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
+    // allow debugger during development only
+    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off"
+  }
+};

babel.config.js

-const fs = require('fs-extra')
-let extend = undefined
+const fs = require('fs-extra');
+let extend;
 
 /**
  * The .babelrc file has been created to assist Jest for transpiling.
@@ -7,12 +7,10 @@ let extend = undefined
  */
 
 if (fs.existsSync('./.babelrc')) {
-  extend = './.babelrc'
+  extend = './.babelrc';
 }
 
 module.exports = {
-  presets: [
-    '@quasar/babel-preset-app'
-  ],
+  presets: ['@quasar/babel-preset-app'],
   extends: extend
-}
+};

package.json

@@ -9,6 +9,7 @@
   "scripts": {
     "start": "quasar serve --history .",
     "build": "quasar build",
+    "lint": "eslint --ext .js,.vue src",
     "test": "quasar test --unit jest",
     "test:unit": "jest --updateSnapshot",
     "test:unit:coverage": "jest --coverage",
@@ -32,7 +33,12 @@
     "@quasar/app": "^1.2.1",
     "@quasar/quasar-app-extension-testing": "^1.0.0",
     "@quasar/quasar-app-extension-testing-unit-jest": "^1.0.0",
-    "dotenv": "^8.0.0"
+    "dotenv": "^8.0.0",
+    "@vue/eslint-config-standard": "^4.0.0",
+    "babel-eslint": "^10.0.1",
+    "eslint": "^5.10.0",
+    "eslint-loader": "^2.1.1",
+    "eslint-plugin-vue": "^5.0.0"
   },
   "engines": {
     "node": ">= 8.9.0",

quasar.conf.js

 // Configuration for your app
 
-const envparser = require("./config/envparser");
+const envparser = require('./config/envparser')
 
-module.exports = function(ctx) {
+module.exports = function (ctx) {
   return {
     // app boot file (/src/boot)
     // --> boot files are part of "main.js"
-    boot: ["axios", "firebase", "auth", "format_time", "categories"],
+    boot: ['axios', 'firebase', 'auth', 'format_time', 'categories'],
 
-    css: ["app.styl"],
+    css: ['app.styl'],
 
     extras: [
-      "roboto-font",
-      "material-icons", // optional, you are not bound to it
+      'roboto-font',
+      'material-icons', // optional, you are not bound to it
       // 'ionicons-v4',
       // 'mdi-v3',
-      "fontawesome-v5"
+      'fontawesome-v5'
       // 'eva-icons'
     ],
 
@@ -25,54 +25,54 @@ module.exports = function(ctx) {
       // all: true, // --- includes everything; for dev only!
 
       components: [
-        "QLayout",
-        "QHeader",
-        "QDrawer",
-        "QPageContainer",
-        "QPage",
-        "QPageSticky",
-        "QToolbar",
-        "QToolbarTitle",
-        "QFooter",
-        "QBtn",
-        "QChip",
-        "QIcon",
-        "QInput",
-        "QEditor",
-        "QSelect",
-        "QSpace",
-        "QList",
-        "QItem",
-        "QItemSection",
-        "QItemLabel",
-        "QOptionGroup",
-        "QMenu",
-        "QCard",
-        "QCardSection",
-        "QCardActions",
-        "QImg",
-        "QAvatar",
-        "QSeparator",
-        "QInfiniteScroll",
-        "QSpinnerDots",
-        "QForm",
-        "QToggle",
-        "QUploader",
-        "QCarousel",
-        "QCarouselSlide",
-        "QCarouselControl",
-        "QSpace"
+        'QLayout',
+        'QHeader',
+        'QDrawer',
+        'QPageContainer',
+        'QPage',
+        'QPageSticky',
+        'QToolbar',
+        'QToolbarTitle',
+        'QFooter',
+        'QBtn',
+        'QChip',
+        'QIcon',
+        'QInput',
+        'QEditor',
+        'QSelect',
+        'QSpace',
+        'QList',
+        'QItem',
+        'QItemSection',
+        'QItemLabel',
+        'QOptionGroup',
+        'QMenu',
+        'QCard',
+        'QCardSection',
+        'QCardActions',
+        'QImg',
+        'QAvatar',
+        'QSeparator',
+        'QInfiniteScroll',
+        'QSpinnerDots',
+        'QForm',
+        'QToggle',
+        'QUploader',
+        'QCarousel',
+        'QCarouselSlide',
+        'QCarouselControl',
+        'QSpace'
       ],
 
-      directives: ["Ripple", "ClosePopup"],
+      directives: ['Ripple', 'ClosePopup'],
       // cssAddon: true,
       // Quasar plugins
-      plugins: ["Notify", "LoadingBar"],
+      plugins: ['Notify', 'LoadingBar'],
       config: {
         loadingBar: {
           /* LoadingBar defaults */
 
-          color: "teal-6"
+          color: 'teal-6'
         }
       }
       // iconSet: 'ionicons-v4'
@@ -83,13 +83,23 @@ module.exports = function(ctx) {
 
     build: {
       scopeHoisting: true,
-      vueRouterMode: "history",
+      vueRouterMode: 'history',
       env: envparser(),
       // vueCompiler: true,
       // gzip: true,
       // analyze: true,
       // extractCSS: false,
-      extendWebpack(cfg) {}
+      extendWebpack (cfg) {
+        cfg.module.rules.push({
+          enforce: 'pre',
+          test: /\.(js|vue)$/,
+          loader: 'eslint-loader',
+          exclude: /node_modules/,
+          options: {
+            formatter: require('eslint').CLIEngine.getFormatter('stylish')
+          }
+        })
+      }
     },
 
     devServer: {
@@ -112,35 +122,35 @@ module.exports = function(ctx) {
         // name: 'Quasar App',
         // short_name: 'Quasar-PWA',
         // description: 'Best PWA App in town!',
-        display: "standalone",
-        orientation: "portrait",
-        background_color: "#ffffff",
-        theme_color: "#027be3",
+        display: 'standalone',
+        orientation: 'portrait',
+        background_color: '#ffffff',
+        theme_color: '#027be3',
         icons: [
           {
-            src: "statics/icons/icon-128x128.png",
-            sizes: "128x128",
-            type: "image/png"
+            src: 'statics/icons/icon-128x128.png',
+            sizes: '128x128',
+            type: 'image/png'
           },
           {
-            src: "statics/icons/icon-192x192.png",
-            sizes: "192x192",
-            type: "image/png"
+            src: 'statics/icons/icon-192x192.png',
+            sizes: '192x192',
+            type: 'image/png'
           },
           {
-            src: "statics/icons/icon-256x256.png",
-            sizes: "256x256",
-            type: "image/png"
+            src: 'statics/icons/icon-256x256.png',
+            sizes: '256x256',
+            type: 'image/png'
           },
           {
-            src: "statics/icons/icon-384x384.png",
-            sizes: "384x384",
-            type: "image/png"
+            src: 'statics/icons/icon-384x384.png',
+            sizes: '384x384',
+            type: 'image/png'
           },
           {
-            src: "statics/icons/icon-512x512.png",
-            sizes: "512x512",
-            type: "image/png"
+            src: 'statics/icons/icon-512x512.png',
+            sizes: '512x512',
+            type: 'image/png'
           }
         ]
       }
@@ -154,7 +164,7 @@ module.exports = function(ctx) {
     electron: {
       // bundler: 'builder', // or 'packager'
 
-      extendWebpack(cfg) {
+      extendWebpack (cfg) {
         // do something with Electron main process Webpack cfg
         // chainWebpack also available besides this extendWebpack
       },
@@ -175,5 +185,5 @@ module.exports = function(ctx) {
         // appId: 'quasar-app'
       }
     }
-  };
+  }
 };

src/components/homepage/FeaturedGallery.vue

 <template>
-  <section id="featured-gallery" class="q-my-lg">
-    <div class="text-uppercase text-grey-9 text-h6 text-left q-ml-md">Most downloaded</div>
+  <section
+    id="featured-gallery"
+    class="q-my-lg"
+  >
+    <div class="text-uppercase text-grey-9 text-h6 text-left q-ml-md">
+      Most downloaded
+    </div>
 
     <div v-if="items && items.length > 0">
       <div class="row">
-        <div v-for="project in items" v-bind:key="project['id']" class="col-12 col-sm-6 col-md-4">
-          <ProjectThumb :project="project" @clickProject="handleClickProject" />
+        <div
+          v-for="project in items"
+          :key="project['id']"
+          class="col-12 col-sm-6 col-md-4"
+        >
+          <ProjectThumb
+            :project="project"
+            @clickProject="handleClickProject"
+          />
         </div>
       </div>
       <div class="row">
         <div class="col-12 text-center">
-          <q-btn class="text-grey-5" flat>Browse all designs</q-btn>
+          <q-btn
+            class="text-grey-5"
+            flat
+          >
+            Browse all designs
+          </q-btn>
         </div>
       </div>
     </div>
     <div v-else>
       <div class="row">
-        <div class="col-12 text-h6 text-grey q-ml-md">Loading...</div>
+        <div class="col-12 text-h6 text-grey q-ml-md">
+          Loading...
+        </div>
         <div class="col-12 q-ml-md">
           <q-spinner-dots size="32px" />
         </div>
@@ -26,21 +45,20 @@
 </template>
 
 <script>
-import ProjectThumb from "src/components/project/ProjectThumb";
+import ProjectThumb from 'src/components/project/ProjectThumb';
 export default {
   // name: 'ComponentName',
-  props: ["items"],
+  props: ['items'],
   components: {
     ProjectThumb
   },
   methods: {
-    handleClickProject(key) {
-      this.$router.push(`/projects/${key}`);
+    handleClickProject (key) {
+      this.$router.push('/projects/' + key);
     }
   },
-  data() {
+  data () {
     return {};
   }
 };
 </script>
-

src/components/homepage/Hero.vue

 <template>
   <div class="text-center has-splash q-pa-xl">
-    <img src="statics/600x600fabr.png" style="max-width: 200px" />
-    <div class="text-h4">Welcome to the Fabricademy</div>
-    <div class="text-h4">Open Source Circular fashion catalogue</div>
+    <img
+      src="statics/600x600fabr.png"
+      style="max-width: 200px"
+    >
+    <div class="text-h4">
+      Welcome to the Fabricademy
+    </div>
+    <div class="text-h4">
+      Open Source Circular fashion catalogue
+    </div>
     <div style="width: 30%; margin: 32px auto;">
       <q-separator />
     </div>
-    <div class="text-h6 text-grey">Browse, remix and share your designs and help grow this library!</div>
+    <div class="text-h6 text-grey">
+      Browse, remix and share your designs and help grow this library!
+    </div>
 
     <!-- <SearchBox class="q-mt-xl" /> -->
   </div>
 </template>
 
 <script>
-import SearchBox from "src/components/homepage/SearchBox";
+import SearchBox from 'src/components/homepage/SearchBox'
 
 export default {
   // name: 'ComponentName',
   components: {
+    // eslint-disable-next-line vue/no-unused-components
     SearchBox
   },
-  data() {
-    return {};
+  data () {
+    return {}
   }
-};
+}
 </script>
 
 <style>

src/components/homepage/RecentGallery.vue

 <template>
-  <section id="featured-gallery" class="q-my-lg">
+  <section
+    id="featured-gallery"
+    class="q-my-lg"
+  >
     <div class="text-uppercase text-grey-9 text-h6 text-left q-ml-md">Recently updated</div>
     <div v-if="projects && projects.length > 0">
       <div class="row q-gutter-none">
-        <div class="col-12 col-sm-6 col-md-4" v-for="project,idx in projects" :key="idx">
-          <ProjectThumb :project="project" @clickProject="handleClickProject" />
+        <div
+          class="col-12 col-sm-6 col-md-4"
+          v-for="project,idx in projects"
+          :key="idx"
+        >
+          <ProjectThumb
+            :project="project"
+            @clickProject="handleClickProject"
+          />
         </div>
       </div>
       <div class="row">
         <div class="col-12 text-center">
-          <q-btn class="text-grey-5" flat>Browse most recent designs</q-btn>
+          <q-btn
+            class="text-grey-5"
+            flat
+          >Browse most recent designs</q-btn>
         </div>
       </div>
     </div>
@@ -33,18 +46,19 @@ export default {
     ProjectThumb
   },
   methods: {
-    handleClickProject(key) {
-      this.$router.push(`/projects/${key}`);
+    handleClickProject (key) {
+      const newPath = `/projects/${key}`;
+      this.$router.push(newPath);
     }
   },
   computed: {
-    projects() {
+    projects () {
       const rev = [...this.latestProjects].reverse();
       return rev;
     },
     ...mapGetters({ latestProjects: "projects/latestProjects" })
   },
-  data() {
+  data () {
     return {};
   }
 };

src/pages/Index.vue

 <template>
   <q-page>
     <Hero />
-    <div class="row q-pa-sm" v-if="loaded">
+    <div
+      v-if="loaded"
+      class="row q-pa-sm"
+    >
       <div class="col-lg-8 offset-lg-2 col-md-12 col-sm-12">
         <section id="featured">
           <FeaturedGallery :items="popularProjects" />
@@ -34,17 +37,18 @@ section {
 </style>
 
 <script>
-import Hero from "../components/homepage/Hero";
-import CollectionsGallery from "../components/collection/CollectionsGallery";
-import FeaturedGallery from "../components/homepage/FeaturedGallery";
-import RecentGallery from "../components/homepage/RecentGallery";
-import UploadBanner from "../components/homepage/UploadBanner";
-import BannerFabricademy from "../components/homepage/BannerFabricademy";
+import Hero from '../components/homepage/Hero'
+import CollectionsGallery from '../components/collection/CollectionsGallery'
+import FeaturedGallery from '../components/homepage/FeaturedGallery'
+import RecentGallery from '../components/homepage/RecentGallery'
+import UploadBanner from '../components/homepage/UploadBanner'
+import BannerFabricademy from '../components/homepage/BannerFabricademy'
 
-import { mapGetters, mapActions } from "vuex";
+// eslint-disable-next-line standard/object-curly-even-spacing
+import { mapGetters/*, mapActions */ } from 'vuex'
 
 export default {
-  name: "PageIndex",
+  name: 'PageIndex',
   components: {
     Hero,
     FeaturedGallery,
@@ -53,34 +57,34 @@ export default {
     CollectionsGallery,
     BannerFabricademy
   },
-  mounted() {
-    this.loadProjects();
-  },
-  methods: {
-    loadProjects() {
-      this.loaded = false;
-      this.$q.loadingBar.start();
-      Promise.all([
-        this.$store.dispatch("projects/loadPopularProjects"),
-        this.$store.dispatch("projects/loadLatestProjects"),
-        this.$store.dispatch("collections/loadLatestCollections")
-      ]).finally(() => {
-        this.loaded = true;
-        this.$q.loadingBar.stop();
-      });
+  data () {
+    return {
+      loaded: false
     }
   },
   computed: {
     ...mapGetters({
-      latestCollections: "collections/latestCollections",
-      latestProjects: "projects/latestProjects",
-      popularProjects: "projects/popularProjects"
+      latestCollections: 'collections/latestCollections',
+      latestProjects: 'projects/latestProjects',
+      popularProjects: 'projects/popularProjects'
     })
   },
-  data() {
-    return {
-      loaded: false
-    };
+  mounted () {
+    this.loadProjects()
+  },
+  methods: {
+    loadProjects () {
+      this.loaded = false
+      this.$q.loadingBar.start()
+      Promise.all([
+        this.$store.dispatch('projects/loadPopularProjects'),
+        this.$store.dispatch('projects/loadLatestProjects'),
+        this.$store.dispatch('collections/loadLatestCollections')
+      ]).finally(() => {
+        this.loaded = true
+        this.$q.loadingBar.stop()
+      })
+    }
   }
-};
+}
 </script>