Enable vue eslint

.eslintrc

@@ -1,6 +1,15 @@
 {
-  "parser": "babel-eslint",
+  "root": true,
+  "parserOptions": {
+    "parser": "babel-eslint",
+    "ecmaVersion": 2017,
+    "sourceType": "module"
+  },
   "extends": [
-    "plugin:vue-libs/recommended"
-  ]
+    "plugin:vue/recommended",
+    "@vue/standard"
+  ],
+  "rules": {
+    "vue/max-attributes-per-line": "off"
+  }
 }

resources/assets/js/app.js

@@ -9,6 +9,7 @@ import '~/components'
 
 Vue.config.productionTip = false
 
+/* eslint-disable no-new */
 new Vue({
   i18n,
   store,

resources/assets/js/components/App.vue

@@ -3,7 +3,7 @@
     <loading ref="loading"/>
 
     <transition name="page" mode="out-in">
-      <component v-if="layout" :is="layout"></component>
+      <component v-if="layout" :is="layout"/>
     </transition>
   </div>
 </template>

resources/assets/js/components/Button.vue

@@ -1,10 +1,10 @@
 <template>
-  <button :type="nativeType" :disabled="loading" class="btn" :class="{
+  <button :type="nativeType" :disabled="loading" :class="{
     [`btn-${type}`]: true,
     'btn-block': block,
     'btn-lg': large,
     'btn-loading': loading
-  }">
+  }" class="btn">
     <slot/>
   </button>
 </template>
@@ -29,8 +29,15 @@ export default {
       default: false
     },
 
-    block: Boolean,
-    large: Boolean
+    block: {
+      type: Boolean,
+      default: false
+    },
+
+    large: {
+      type: Boolean,
+      default: false
+    }
   }
 }
 </script>

resources/assets/js/components/Card.vue

@@ -14,6 +14,8 @@
 export default {
   name: 'Card',
 
-  props: ['title']
+  props: {
+    title: { type: String, default: null }
+  }
 }
 </script>

resources/assets/js/components/Checkbox.vue

@@ -1,14 +1,13 @@
 <template>
-  <div class="custom-control custom-checkbox">
+  <div class="custom-control custom-checkbox d-flex">
     <input
-      type="checkbox"
       :name="name"
-      @click="handleClick"
       :checked="internalValue"
+      :id="id || name"
+      type="checkbox"
       class="custom-control-input"
-      :id="id || name || 'checkbox'"
-    >
-    <label class="custom-control-label" :for="id || name || 'checkbox'">
+      @click="handleClick">
+    <label :for="id || name" class="custom-control-label my-auto">
       <slot/>
     </label>
   </div>
@@ -19,24 +18,16 @@ export default {
   name: 'Checkbox',
 
   props: {
-    id: String,
-    name: String,
-    value: Boolean,
-    checked: Boolean
+    id: { type: String, default: null },
+    name: { type: String, default: 'checkbox' },
+    value: { type: Boolean, default: false },
+    checked: { type: Boolean, default: false }
   },
 
   data: () => ({
     internalValue: false
   }),
 
-  created () {
-    this.internalValue = this.value
-
-    if ('checked' in this.$options.propsData) {
-      this.internalValue = this.checked
-    }
-  },
-
   watch: {
     value (val) {
       this.internalValue = val
@@ -53,6 +44,14 @@ export default {
     }
   },
 
+  created () {
+    this.internalValue = this.value
+
+    if ('checked' in this.$options.propsData) {
+      this.internalValue = this.checked
+    }
+  },
+
   methods: {
     handleClick (e) {
       this.$emit('click', e)

resources/assets/js/components/Loading.vue

@@ -1,10 +1,10 @@
 <template>
-  <div class="progress" :style="{
+  <div :style="{
     width: `${percent}%`,
     height: height,
     opacity: show ? 1 : 0,
     'background-color': canSuccess ? color : failedColor
-  }"/>
+  }" class="progress"/>
 </template>
 
 <script>

resources/assets/js/components/LocaleDropdown.vue

@@ -1,12 +1,12 @@
 <template>
   <li class="nav-item dropdown">
     <a class="nav-link dropdown-toggle" href="#" role="button"
-      data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+       data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
       {{ locales[locale] }}
     </a>
     <div class="dropdown-menu">
-      <a v-for="(value, key) in locales" class="dropdown-item" href="#"
-        @click.prevent="setLocale(key)">
+      <a v-for="(value, key) in locales" :key="key" class="dropdown-item" href="#"
+         @click.prevent="setLocale(key)">
         {{ value }}
       </a>
     </div>

resources/assets/js/components/LoginWithGithub.vue

@@ -1,5 +1,5 @@
 <template>
-  <button v-if="githubAuth" @click="login" type="button" class="btn btn-dark ml-auto">
+  <button v-if="githubAuth" class="btn btn-dark ml-auto" type="button" @click="login">
     {{ $t('login_with') }}
     <fa :icon="['fab', 'github']"/>
   </button>

resources/assets/js/components/Navbar.vue

@@ -5,14 +5,11 @@
         {{ appName }}
       </router-link>
 
-      <button class="navbar-toggler" type="button" data-toggle="collapse"
-        data-target="#navbarToggler" aria-controls="navbarToggler"
-        aria-expanded="false" :aria-label="$t('toggle_navigation')"
-      >
-        <span class="navbar-toggler-icon"></span>
+      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false">
+        <span class="navbar-toggler-icon"/>
       </button>
 
-      <div class="collapse navbar-collapse" id="navbarToggler">
+      <div id="navbarToggler" class="collapse navbar-collapse">
         <ul class="navbar-nav">
           <locale-dropdown/>
           <!-- <li class="nav-item">
@@ -24,7 +21,7 @@
           <!-- Authenticated -->
           <li v-if="user" class="nav-item dropdown">
             <a class="nav-link dropdown-toggle text-dark"
-              href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+               href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
               <img :src="user.photo_url" class="rounded-circle profile-photo mr-1">
               {{ user.name }}
             </a>
@@ -34,8 +31,8 @@
                 {{ $t('settings') }}
               </router-link>
 
-              <div class="dropdown-divider"></div>
-              <a @click.prevent="logout" class="dropdown-item pl-3"  href="#">
+              <div class="dropdown-divider"/>
+              <a href="#" class="dropdown-item pl-3" @click.prevent="logout">
                 <fa icon="sign-out-alt" fixed-width/>
                 {{ $t('logout') }}
               </a>
@@ -65,6 +62,10 @@ import { mapGetters } from 'vuex'
 import LocaleDropdown from './LocaleDropdown'
 
 export default {
+  components: {
+    LocaleDropdown
+  },
+
   data: () => ({
     appName: window.config.appName
   }),
@@ -73,10 +74,6 @@ export default {
     user: 'auth/user'
   }),
 
-  components: {
-    LocaleDropdown
-  },
-
   methods: {
     async logout () {
       // Log out the user.

resources/assets/js/layouts/basic.vue

@@ -28,4 +28,3 @@ export default {
   }
 }
 </style>
-

resources/assets/js/pages/auth/login.vue

@@ -7,8 +7,7 @@
           <div class="form-group row">
             <label class="col-md-3 col-form-label text-md-right">{{ $t('email') }}</label>
             <div class="col-md-7">
-              <input v-model="form.email" type="email" name="email" class="form-control"
-                :class="{ 'is-invalid': form.errors.has('email') }">
+              <input v-model="form.email" :class="{ 'is-invalid': form.errors.has('email') }" class="form-control" type="email" name="email">
               <has-error :form="form" field="email"/>
             </div>
           </div>
@@ -17,15 +16,14 @@
           <div class="form-group row">
             <label class="col-md-3 col-form-label text-md-right">{{ $t('password') }}</label>
             <div class="col-md-7">
-              <input v-model="form.password" type="password" name="password" class="form-control"
-                :class="{ 'is-invalid': form.errors.has('password') }">
+              <input v-model="form.password" :class="{ 'is-invalid': form.errors.has('password') }" class="form-control" type="password" name="password">
               <has-error :form="form" field="password"/>
             </div>
           </div>
 
           <!-- Remember Me -->
           <div class="form-group row">
-            <div class="col-md-3"></div>
+            <div class="col-md-3"/>
             <div class="col-md-7 d-flex">
               <checkbox v-model="remember" name="remember">
                 {{ $t('remember_me') }}

resources/assets/js/pages/auth/password/email.vue

@@ -9,8 +9,7 @@
           <div class="form-group row">
             <label class="col-md-3 col-form-label text-md-right">{{ $t('email') }}</label>
             <div class="col-md-7">
-              <input v-model="form.email" type="email" name="email" class="form-control"
-                :class="{ 'is-invalid': form.errors.has('email') }">
+              <input v-model="form.email" :class="{ 'is-invalid': form.errors.has('email') }" class="form-control" type="email" name="email">
               <has-error :form="form" field="email"/>
             </div>
           </div>

resources/assets/js/pages/auth/password/reset.vue

@@ -9,8 +9,7 @@
           <div class="form-group row">
             <label class="col-md-3 col-form-label text-md-right">{{ $t('email') }}</label>
             <div class="col-md-7">
-              <input v-model="form.email" type="email" name="email" class="form-control"
-                :class="{ 'is-invalid': form.errors.has('email') }" readonly>
+              <input v-model="form.email" :class="{ 'is-invalid': form.errors.has('email') }" class="form-control" type="email" name="email" readonly>
               <has-error :form="form" field="email"/>
             </div>
           </div>
@@ -19,8 +18,7 @@
           <div class="form-group row">
             <label class="col-md-3 col-form-label text-md-right">{{ $t('password') }}</label>
             <div class="col-md-7">
-              <input v-model="form.password" type="password" name="password" class="form-control"
-                :class="{ 'is-invalid': form.errors.has('password') }">
+              <input v-model="form.password" :class="{ 'is-invalid': form.errors.has('password') }" class="form-control" type="password" name="password">
               <has-error :form="form" field="password"/>
             </div>
           </div>
@@ -29,8 +27,7 @@
           <div class="form-group row">
             <label class="col-md-3 col-form-label text-md-right">{{ $t('confirm_password') }}</label>
             <div class="col-md-7">
-              <input v-model="form.password_confirmation" type="password" name="password_confirmation" class="form-control"
-                :class="{ 'is-invalid': form.errors.has('password_confirmation') }">
+              <input v-model="form.password_confirmation" :class="{ 'is-invalid': form.errors.has('password_confirmation') }" class="form-control" type="password" name="password_confirmation">
               <has-error :form="form" field="password_confirmation"/>
             </div>
           </div>

resources/assets/js/pages/auth/register.vue

@@ -7,8 +7,7 @@
           <div class="form-group row">
             <label class="col-md-3 col-form-label text-md-right">{{ $t('name') }}</label>
             <div class="col-md-7">
-              <input v-model="form.name" type="text" name="name" class="form-control"
-                :class="{ 'is-invalid': form.errors.has('name') }">
+              <input v-model="form.name" :class="{ 'is-invalid': form.errors.has('name') }" class="form-control" type="text" name="name">
               <has-error :form="form" field="name"/>
             </div>
           </div>
@@ -17,8 +16,7 @@
           <div class="form-group row">
             <label class="col-md-3 col-form-label text-md-right">{{ $t('email') }}</label>
             <div class="col-md-7">
-              <input v-model="form.email" type="email" name="email" class="form-control"
-                :class="{ 'is-invalid': form.errors.has('email') }">
+              <input v-model="form.email" :class="{ 'is-invalid': form.errors.has('email') }" class="form-control" type="email" name="email">
               <has-error :form="form" field="email"/>
             </div>
           </div>
@@ -27,8 +25,7 @@
           <div class="form-group row">
             <label class="col-md-3 col-form-label text-md-right">{{ $t('password') }}</label>
             <div class="col-md-7">
-              <input v-model="form.password" type="password" name="password" class="form-control"
-                :class="{ 'is-invalid': form.errors.has('password') }">
+              <input v-model="form.password" :class="{ 'is-invalid': form.errors.has('password') }" class="form-control" type="password" name="password">
               <has-error :form="form" field="password"/>
             </div>
           </div>
@@ -37,8 +34,7 @@
           <div class="form-group row">
             <label class="col-md-3 col-form-label text-md-right">{{ $t('confirm_password') }}</label>
             <div class="col-md-7">
-              <input v-model="form.password_confirmation" type="password" name="password_confirmation" class="form-control"
-                :class="{ 'is-invalid': form.errors.has('password_confirmation') }">
+              <input v-model="form.password_confirmation" :class="{ 'is-invalid': form.errors.has('password_confirmation') }" class="form-control" type="password" name="password_confirmation">
               <has-error :form="form" field="password_confirmation"/>
             </div>
           </div>
@@ -90,7 +86,7 @@ export default {
       const { data } = await this.form.post('/api/register')
 
       // Log in the user.
-      const { data: { token }} = await this.form.post('/api/login')
+      const { data: { token } } = await this.form.post('/api/login')
 
       // Save the token.
       this.$store.dispatch('auth/saveToken', { token })

resources/assets/js/pages/settings/index.vue

@@ -3,7 +3,7 @@
     <div class="col-md-3">
       <card :title="$t('settings')" class="settings-card">
         <ul class="nav flex-column nav-pills">
-          <li v-for="tab in tabs" class="nav-item">
+          <li v-for="tab in tabs" :key="tab.route" class="nav-item">
             <router-link :to="{ name: tab.route }" class="nav-link" active-class="active">
               <fa :icon="tab.icon" fixed-width/>
               {{ tab.name }}

resources/assets/js/pages/settings/password.vue

@@ -7,8 +7,7 @@
       <div class="form-group row">
         <label class="col-md-3 col-form-label text-md-right">{{ $t('new_password') }}</label>
         <div class="col-md-7">
-          <input v-model="form.password" type="password" name="password" class="form-control"
-            :class="{ 'is-invalid': form.errors.has('password') }">
+          <input v-model="form.password" :class="{ 'is-invalid': form.errors.has('password') }" class="form-control" type="password" name="password">
           <has-error :form="form" field="password"/>
         </div>
       </div>
@@ -17,16 +16,15 @@
       <div class="form-group row">
         <label class="col-md-3 col-form-label text-md-right">{{ $t('confirm_password') }}</label>
         <div class="col-md-7">
-          <input v-model="form.password_confirmation" type="password" name="password_confirmation" class="form-control"
-            :class="{ 'is-invalid': form.errors.has('password_confirmation') }">
+          <input v-model="form.password_confirmation" :class="{ 'is-invalid': form.errors.has('password_confirmation') }" class="form-control" type="password" name="password_confirmation">
           <has-error :form="form" field="password_confirmation"/>
         </div>
       </div>
 
       <!-- Submit Button -->
       <div class="form-group row">
         <div class="col-md-9 ml-md-auto">
-          <v-button type="success" :loading="form.busy">{{ $t('update') }}</v-button>
+          <v-button :loading="form.busy" type="success">{{ $t('update') }}</v-button>
         </div>
       </div>
     </form>