Use vue/recommended eslint setting

.eslintrc.js

@@ -5,7 +5,7 @@ module.exports = {
   },
   extends: [
     'plugin:vue/essential',
-    // 'plugin:vue/recommended',
+    'plugin:vue/recommended',
     '@vue/airbnb',
     'prettier',
     'plugin:prettier-vue/recommended',

src/components/BootswatchThemeSelect.vue

@@ -15,10 +15,10 @@
       <b-dropdown-item-button
         v-for="(theme, key) in themes"
         :key="key"
-        @click="handleClick"
-        :active="activeTheme === theme.name"
         v-b-tooltip.hover.right
+        :active="activeTheme === theme.name"
         :title="theme.description"
+        @click="handleClick"
         >{{ theme.name }}</b-dropdown-item-button
       >
     </b-nav-item-dropdown>
@@ -29,6 +29,7 @@
 import axios from 'axios';
 
 export default {
+  name: 'BootswatchThemeSelect',
   data() {
     return {
       activeTheme: '',
@@ -124,7 +125,6 @@ export default {
       ],
     };
   },
-  name: 'BootswatchThemeSelect',
   mounted() {
     // If a theme has been stored in localstorage, the theme will be set.
     if (window.localStorage.theme) this.setTheme(window.localStorage.theme);

src/components/Login.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="container">
-    <form ref="form" @submit.stop.prevent="handleSubmit" @reset="handleReset" novalidate>
+    <form ref="form" novalidate @submit.stop.prevent="handleSubmit" @reset="handleReset">
       <b-form-group
         :state="urlState"
         label="API Url"
@@ -11,8 +11,8 @@
           id="url-input"
           v-model="auth.url"
           :state="urlState"
-          @keydown.enter.native="handleOk"
           required
+          @keydown.enter.native="handleOk"
         ></b-form-input>
       </b-form-group>
       <b-form-group
@@ -25,8 +25,8 @@
           id="username-input"
           v-model="auth.username"
           :state="nameState"
-          @keydown.enter.native="handleOk"
           required
+          @keydown.enter.native="handleOk"
         ></b-form-input>
       </b-form-group>
       <b-form-group label="Password" label-for="password-input" invalid-feedback="Invalid Password">
@@ -34,8 +34,8 @@
           id="password-input"
           v-model="auth.password"
           required
-          @keydown.enter.native="handleOk"
           type="password"
+          @keydown.enter.native="handleOk"
         ></b-form-input>
       </b-form-group>
       <div v-if="inModal === false" class="float-right">

src/components/ftbot/BotAlerts.vue

@@ -1,11 +1,11 @@
 <template>
   <div>
     <b-alert
+      v-for="(alert, index) in activeMessages"
+      :key="index"
       variant="warning"
       dismissible
       :show="5"
-      v-for="(alert, index) in activeMessages"
-      :key="index"
       :value="!!alert.message"
       @dismissed="closeAlert"
     >

src/components/ftbot/BotControls.vue

@@ -6,13 +6,13 @@
       <button class="btn-primary col-md-5 m-1" @click="stopBuy()">StopBuy</button>
       <button class="btn-primary col-md-5 m-1" @click="reloadConfig()">Reload Config</button>
       <button
-        class="btn-primary col-md-5 m-1"
         v-if="botState.forcebuy_enabled"
+        class="btn-primary col-md-5 m-1"
         @click="initiateForcebuy"
       >
         Forcebuy
       </button>
-      <ForceBuyForm :modalShow="forcebuyShow" @close="this.$bvModal.hide('forcebuy-modal')" />
+      <ForceBuyForm :modal-show="forcebuyShow" @close="this.$bvModal.hide('forcebuy-modal')" />
     </div>
   </div>
 </template>

src/components/ftbot/DailyStats.vue

@@ -5,7 +5,7 @@
       <b-button class="float-right" size="sm" @click="getDaily">&#x21bb;</b-button>
     </div>
     <div>
-      <DailyChart v-if="dailyStats.data" :dailyStats="dailyStats" />
+      <DailyChart v-if="dailyStats.data" :daily-stats="dailyStats" />
     </div>
     <div>
       <b-table class="table-sm" :items="dailyStats.data" :fields="dailyFields"> </b-table>

src/components/ftbot/FTBotAPIPairList.vue

@@ -36,8 +36,8 @@
               ></b-form-input>
             </b-form-group>
             <b-button
-              class="float-right mb-2"
               id="blacklist-submit"
+              class="float-right mb-2"
               size="sm"
               type="submit"
               @click="addBlacklistPair"

src/components/ftbot/ForceBuyForm.vue

@@ -13,8 +13,8 @@
           <b-form-input
             id="pair-input"
             v-model="pair"
-            @keydown.enter.native="handleBuy"
             required
+            @keydown.enter.native="handleBuy"
           ></b-form-input>
         </b-form-group>
         <b-form-group
@@ -25,9 +25,9 @@
           <b-form-input
             id="price-input"
             v-model="price"
-            @keydown.enter.native="handleBuy"
             type="number"
             step="0.01"
+            @keydown.enter.native="handleBuy"
           ></b-form-input>
         </b-form-group>
       </form>

src/components/ftbot/ReloadControl.vue

@@ -1,8 +1,8 @@
 <template>
   <div>
-    <button @click="refreshAll()" class="btn btn-secondary">Refresh all</button>
+    <button class="btn btn-secondary" @click="refreshAll()">Refresh all</button>
 
-    <b-form-checkbox class="float-right" v-model="autoRefreshLoc" size="lg" switch
+    <b-form-checkbox v-model="autoRefreshLoc" class="float-right" size="lg" switch
       >AutoRefresh</b-form-checkbox
     >
   </div>

src/components/ftbot/TradeDetail.vue

@@ -6,25 +6,25 @@
         <ValuePair description="Pair">{{ trade.pair }}</ValuePair>
         <ValuePair description="Open date">{{ timestampms(trade.open_timestamp) }}</ValuePair>
         <ValuePair description="Open Rate">{{ trade.open_rate }}</ValuePair>
-        <ValuePair description="Close Rate" v-if="!trade.is_open">{{ trade.close_rate }}</ValuePair>
+        <ValuePair v-if="!trade.is_open" description="Close Rate">{{ trade.close_rate }}</ValuePair>
         <ValuePair description="Min Rate">{{ trade.min_rate }}</ValuePair>
         <ValuePair description="Max Rate">{{ trade.max_rate }}</ValuePair>
-        <ValuePair description="Close date" v-if="trade.close_timestamp">{{
+        <ValuePair v-if="trade.close_timestamp" description="Close date">{{
           timestampms(trade.close_timestamp)
         }}</ValuePair>
       </b-card-text>
       <h5 class="detail-header">Profit</h5>
       <b-card-text>
-        <ValuePair description="Current % profit" v-if="trade.current_profit_pct">
+        <ValuePair v-if="trade.current_profit_pct" description="Current % profit">
           {{ formatPercent(trade.current_profit_pct) }}
         </ValuePair>
-        <ValuePair description="Current profit" v-if="trade.current_profit_abs">
+        <ValuePair v-if="trade.current_profit_abs" description="Current profit">
           {{ trade.current_profit_abs }}
         </ValuePair>
-        <ValuePair description="Close % profit" v-if="trade.close_profit">
+        <ValuePair v-if="trade.close_profit" description="Close % profit">
           {{ formatPercent(trade.close_profit) }}
         </ValuePair>
-        <ValuePair description="Close profit" v-if="trade.close_profit_abs">
+        <ValuePair v-if="trade.close_profit_abs" description="Close profit">
           {{ trade.close_profit_abs }}
         </ValuePair>
       </b-card-text>

src/components/ftbot/TradeList.vue

@@ -5,18 +5,18 @@
         class="table-sm"
         :items="trades"
         :fields="tableFields"
-        @row-contextmenu="handleContextMenuEvent"
         show-empty
-        :emptyText="emptyText"
+        :empty-text="emptyText"
         :per-page="perPage"
         :current-page="currentPage"
         selectable
         select-mode="single"
+        @row-contextmenu="handleContextMenuEvent"
         @row-selected="onRowSelected"
       >
         <template v-slot:cell(actions)="row">
-          <b-button size="sm" @click="forcesellHandler(row.item)" title="Forcesell"> FS </b-button>
+          <b-button size="sm" title="Forcesell" @click="forcesellHandler(row.item)"> FS </b-button>
-          <b-button size="sm" @click="removeTradeHandler(row.item)" title="Delete trade">
+          <b-button size="sm" title="Delete trade" @click="removeTradeHandler(row.item)">
             RM
           </b-button>
         </template>

src/components/layout/NavBar.vue

@@ -21,13 +21,13 @@
               {{ isBotOnline ? 'Online' : 'Offline' }}
             </b-nav-text>
           </li>
-          <li class="nav-item" v-if="loggedIn">
+          <li v-if="loggedIn" class="nav-item">
             <b-nav-item-dropdown right>
               <template v-slot:button-content>
                 <b-avatar button>FT</b-avatar>
               </template>
               <b-dropdown-item to="/settings">Settings</b-dropdown-item>
-              <b-dropdown-item to="/" v-on:click.native="logout()">Sign Out</b-dropdown-item>
+              <b-dropdown-item to="/" @click.native="logout()">Sign Out</b-dropdown-item>
             </b-nav-item-dropdown>
           </li>
           <li v-else>

src/views/Dashboard.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <DailyChart v-if="dailyStats.data" :dailyStats="dailyStats" />
+    <DailyChart v-if="dailyStats.data" :daily-stats="dailyStats" />
     <CumProfitChart :trades="closedTrades" />
     <HourlyChart :trades="closedTrades" />
   </div>

src/views/LoginModal.vue

@@ -2,7 +2,7 @@
   <div>
     <b-button v-b-modal.modal-prevent-closing>Login</b-button>
     <b-modal id="modal-prevent-closing" ref="modal" title="Submit Your Name" @ok="handleOk">
-      <Login id="loginForm" ref="loginForm" inModal />
+      <Login id="loginForm" ref="loginForm" in-modal />
     </b-modal>
   </div>
 </template>

src/views/Trading.vue

@@ -38,19 +38,19 @@
               class="open-trades"
               :trades="openTrades"
               title="Open trades"
-              v-bind:activeTrades="true"
+              :active-trades="true"
-              emptyText="Currently no open trades."
+              empty-text="Currently no open trades."
             />
           </div>
         </div>
         <div class="row">
           <div class="col-md-12">
             <TradeList
+              v-if="!detailTradeId"
               class="trade-history"
               :trades="closedTrades"
               title="Trade history"
-              emptyText="No closed trades so far."
+              empty-text="No closed trades so far."
-              v-if="!detailTradeId"
             />
             <TradeDetail v-if="detailTradeId" :trade="tradeDetail"></TradeDetail>
           </div>