[Vue3] Increase warning level for better code quality and fixed issues found.

.eslintrc.js

@@ -39,8 +39,8 @@ module.exports = {
     // but leave only one uncommented!
     // See https://eslint.vuejs.org/rules/#available-rules
     // 'plugin:vue/vue3-essential', // Priority A: Essential (Error Prevention)
-    'plugin:vue/vue3-strongly-recommended', // Priority B: Strongly Recommended (Improving Readability)
+    // 'plugin:vue/vue3-strongly-recommended', // Priority B: Strongly Recommended (Improving Readability)
-    // 'plugin:vue/vue3-recommended', // Priority C: Recommended (Minimizing Arbitrary Choices and Cognitive Overhead)
+    'plugin:vue/vue3-recommended', // Priority C: Recommended (Minimizing Arbitrary Choices and Cognitive Overhead)
 
     // https://github.com/prettier/eslint-config-prettier#installation
     // usage with Prettier, provided by 'eslint-config-prettier'.

src/components/navigation/EssentialLink.vue

@@ -1,5 +1,5 @@
 <template>
-  <q-item clickable tag="a" target="self" :to="{ name: link }" v-if="isGranted">
+  <q-item v-if="isGranted" clickable tag="a" target="self" :to="{ name: link }">
     <q-item-section v-if="icon" avatar>
       <q-icon :name="icon" />
     </q-item-section>

src/components/navigation/ShortCutLink.vue

@@ -1,5 +1,5 @@
 <template>
-  <q-btn flat dense :icon="icon" :to="{ name: link }" v-if="isGranted" />
+  <q-btn v-if="isGranted" flat dense :icon="icon" :to="{ name: link }" />
 </template>
 
 <script lang="ts">

src/components/utils/IsoDateInput.vue

@@ -5,11 +5,11 @@
     :label="label"
     :value="getDateTime()"
     :placeholder="placeholder"
-    @input="dateTimeChanged"
     :rules="customRules"
+    @input="dateTimeChanged"
   >
     <template #append>
-      <q-icon name="event" class="cursor-pointer" v-if="type == 'date' || type == 'datetime'">
+      <q-icon v-if="type == 'date' || type == 'datetime'" name="event" class="cursor-pointer">
         <q-popup-proxy ref="qDateProxy" transition-show="scale" transition-hide="scale">
           <q-date :value="getDate()" mask="YYYY-MM-DD" @input="dateChanged">
             <div class="row items-center justify-end">
@@ -19,9 +19,9 @@
         </q-popup-proxy>
       </q-icon>
       <q-icon
+        v-if="type == 'time' || type == 'datetime'"
         name="mdi-clock-outline"
         class="cursor-pointer"
-        v-if="type == 'time' || type == 'datetime'"
       >
         <q-popup-proxy ref="qTimeProxy" transition-show="scale" transition-hide="scale">
           <q-time :value="getTime()" mask="HH:mm" @input="timeChanged">

src/layouts/MainLayout.vue

@@ -4,12 +4,12 @@
       <q-toolbar>
         <!-- Button um Navigationsleiset ein und auszublenden. Nötig bei Desktop? -->
         <q-btn
+          v-if="!leftDrawerOpen"
           dense
           flat
           round
           icon="menu"
           @click="leftDrawerOpen = !leftDrawerOpen"
-          v-if="!leftDrawerOpen"
         />
 
         <q-toolbar-title>
@@ -36,8 +36,8 @@
     </q-header>
 
     <q-drawer
-      show-if-above
       v-model="leftDrawerOpen"
+      show-if-above
       side="left"
       bordered
       :mini="leftDrawerMini"

src/layouts/OutLayout.vue

@@ -17,19 +17,19 @@
           />
         </div>
         <q-btn
+          v-if="$route.name != 'about_out'"
           flat
           round
           dense
           icon="mdi-information"
-          v-if="$route.name != 'about_out'"
           @click="$router.push({ name: 'about_out' })"
         />
         <q-btn
+          v-if="$route.name != 'login'"
           flat
           round
           dense
           icon="mdi-login-variant"
-          v-if="$route.name != 'login'"
           @click="$router.push({ name: 'login' })"
         />
       </q-toolbar>

src/pages/Login.vue

@@ -6,17 +6,17 @@
       </q-toolbar>
 
       <q-card-section>
-        <q-form ref="LoginForm" @submit="doLogin" class="q-gutter-md">
+        <q-form ref="LoginForm" class="q-gutter-md" @submit="doLogin">
           <q-input
-            filled
             v-model="userid"
+            filled
             label="Benutzername oder E-Mail"
             :rules="rules"
             tabindex="1"
           />
           <q-input
-            filled
             v-model="password"
+            filled
             type="password"
             label="Password"
             :rules="rules"
@@ -26,9 +26,9 @@
             <q-btn
               label="Passwort vergessen"
               type="a"
-              @click="doReset"
               color="secondary"
               tabindex="4"
+              @click="doReset"
             />
             <q-btn label="Login" type="submit" color="primary" tabindex="3" />
           </div>
@@ -41,9 +41,9 @@
         <div v-show="visible">
           <q-separator />
           <q-card-section>
-            <q-form ref="ServerSettingsForm" @submit="changeUrl" class="q-gutter-md">
+            <q-form ref="ServerSettingsForm" class="q-gutter-md" @submit="changeUrl">
               <div class="text-h6">Servereinstellung</div>
-              <q-input filled label="Server" dense v-model="server" />
+              <q-input v-model="server" filled label="Server" dense />
               <q-btn size="xs" dense color="primary" label="Speichern" type="submit" />
             </q-form>
           </q-card-section>

src/pages/Reset.vue

@@ -6,10 +6,10 @@
       </q-toolbar>
 
       <q-card-section>
-        <q-form ref="ResetForm" @submit="doReset" class="q-gutter-md">
+        <q-form ref="ResetForm" class="q-gutter-md" @submit="doReset">
           <q-input
-            filled
             v-model="password"
+            filled
             type="password"
             label="Passwort"
             :rules="rules"
@@ -17,8 +17,8 @@
             tabindex="1"
           />
           <q-input
-            filled
             v-model="password2"
+            filled
             type="password"
             label="Passwort Wiederholung"
             :rules="rules"

src/pages/about/About.vue

@@ -1,8 +1,8 @@
 <template>
   <q-page
+    v-if="$route.name == 'about' || $route.name == 'about_out'"
     padding
     class="fit row justify-center content-center items-center"
-    v-if="$route.name == 'about' || $route.name == 'about_out'"
   >
     <div class="fit row justify-center content-center items-center">
       <q-img
@@ -23,8 +23,8 @@
       </div>
 
       <q-separator />
-      <div class="col-12 text-h6 q-pa-sm" v-if="$route.name == 'about'">Geladene Plugins:</div>
+      <div v-if="$route.name == 'about'" class="col-12 text-h6 q-pa-sm">Geladene Plugins:</div>
-      <div class="col-12 q-pa-sm" v-if="$route.name == 'about'">
+      <div v-if="$route.name == 'about'" class="col-12 q-pa-sm">
         <q-chip
           v-for="(plugin, index) in $flaschengeistPlugins.plugins"
           :key="'plugin' + index"

src/plugins/balance/components/BalanceAdd.vue

@@ -1,17 +1,17 @@
 <template>
   <q-card>
     <BalanceHeader
-      @update:user="userUpdated"
       :show-selector="showSelector"
+      @update:user="userUpdated"
       @open-history="openHistory"
     />
     <q-separator />
 
-    <q-card-section class="row q-col-gutter-md" v-if="shortCuts">
+    <q-card-section v-if="shortCuts" class="row q-col-gutter-md">
-      <div :key="index" v-for="(shortcut, index) in shortCuts" class="col-4">
+      <div v-for="(shortcut, index) in shortCuts" :key="index" class="col-4">
         <q-btn
-          push
           v-if="shortcut"
+          push
           color="primary"
           style="width: 100%"
           :label="shortcut.toFixed(2).toString() + ' €'"
@@ -42,7 +42,7 @@
           label="Anschreiben"
           @click="changeBalance(amount * -1)"
           ><q-tooltip>Rechtsklick um Betrag als Verknüpfung hinzuzufügen</q-tooltip>
-          <q-popup-proxy context-menu v-model="showAddShortcut">
+          <q-popup-proxy v-model="showAddShortcut" context-menu>
             <q-btn label="neue Verknüpfung" @click="addShortcut"></q-btn>
           </q-popup-proxy>
         </q-btn>

src/plugins/balance/components/BalanceHeader.vue

@@ -2,7 +2,7 @@
   <q-card-section class="fit row justify-left content-center items-center q-col-gutter-sm">
     <div class="text-h6 col-5">
       Aktueller Stand: {{ balance.balance.toFixed(2) }} €
-      <q-badge color="negative" align="top" v-if="isLocked"> gesperrt </q-badge>
+      <q-badge v-if="isLocked" color="negative" align="top"> gesperrt </q-badge>
     </div>
     <div v-if="showSelector" class="col-6">
       <UserSelector :user="user" @update:user="userUpdated" />

src/plugins/balance/components/BalanceTransfer.vue

@@ -1,8 +1,8 @@
 <template>
   <q-card>
     <BalanceHeader
-      @update:user="senderUpdated"
       :show-selector="showSelector"
+      @update:user="senderUpdated"
       @open-history="openHistory"
     />
     <q-separator />
@@ -11,7 +11,7 @@
         <q-input v-model.number="amount" type="number" filled label="Betrag" step="0.1" min="0" />
       </div>
       <div class="col-sm-4 col-xs-6">
-        <UserSelector :user="receiver" @update:user="receiverUpdated" label="Empfänger" />
+        <UserSelector :user="receiver" label="Empfänger" @update:user="receiverUpdated" />
       </div>
       <div class="col-sm-4 col-xs-6">
         <q-btn

src/plugins/balance/components/Transaction.vue

@@ -10,7 +10,7 @@
           <div class="text-caption">{{ timeStr }}</div>
         </div>
         <div class="col-5 q-px-sm text-center">
-          <div class="text-subtitle1" v-if="isReversed">Storniert</div>
+          <div v-if="isReversed" class="text-subtitle1">Storniert</div>
         </div>
         <div class="col-2 q-pr-sm" style="text-align: right">
           <q-btn
@@ -45,7 +45,6 @@ export default defineComponent({
     },
   },
   emits: { 'update:transaction': (t: FG.Transaction) => !!t },
-  watch: { transaction: 'refreshText' },
   setup(props, { emit }) {
     const now = ref(Date.now());
     const ival = setInterval(() => (now.value = Date.now()), 1000);
@@ -109,5 +108,6 @@ export default defineComponent({
 
     return { timeStr, reverse, isNegative, text, refreshText, canReverse, isReversed };
   },
+  watch: { transaction: 'refreshText' },
 });
 </script>

src/plugins/balance/pages/MainPage.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <q-tabs v-model="tab" v-if="$q.screen.gt.sm">
+    <q-tabs v-if="$q.screen.gt.sm" v-model="tab">
       <q-tab
         v-for="(tabindex, index) in tabs"
         :key="'tab' + index"
@@ -8,7 +8,7 @@
         :label="tabindex.label"
       />
     </q-tabs>
-    <div class="fit row justify-end" v-else>
+    <div v-else class="fit row justify-end">
       <q-btn
         flat
         round
@@ -19,8 +19,8 @@
         "
       />
     </div>
-    <q-drawer side="right" v-model="showDrawer" @click="showDrawer = !showDrawer" behavior="mobile">
+    <q-drawer v-model="showDrawer" side="right" behavior="mobile" @click="showDrawer = !showDrawer">
-      <q-list v-model="tab" v-if="!$q.screen.gt.sm && !show">
+      <q-list v-if="!$q.screen.gt.sm && !show" v-model="tab">
         <q-item
           v-for="(tabindex, index) in tabs"
           :key="'tab' + index"

src/plugins/balance/pages/Overview.vue

@@ -8,14 +8,14 @@
       <q-separator />
       <q-card-section>
         <q-table
+          v-model:pagination="pagination"
           title="Buchungen"
           :data="data"
           :columns="columns"
           row-key="id"
-          v-model:pagination="pagination"
           :loading="loading"
-          @request="onRequest"
           binary-state-sort
+          @request="onRequest"
         >
           <template #top>
             <q-toggle v-model="showCancelled" label="Stornierte einblenden" />

src/plugins/schedule/components/management/CreateEvent.vue

@@ -7,12 +7,12 @@
             <div class="text-h6">Veranstaltung erstellen</div>
           </q-card-section>
           <q-select
+            v-model="event.type"
             filled
             use-input
             label="Veranstaltungstyp"
             input-debounce="0"
             class="col-xs-12 col-sm-6 q-pa-sm"
-            v-model="event.type"
             :options="eventtypes"
             option-label="name"
             option-value="name"
@@ -21,18 +21,18 @@
             :rules="[notEmpty]"
           />
           <IsoDateInput
-            class="col-xs-12 col-sm-6 q-pa-sm"
             v-model="event.start"
+            class="col-xs-12 col-sm-6 q-pa-sm"
             label="Veranstaltungsbeginn"
             :rules="[noValidDate, notEmpty]"
           />
         </q-card-section>
         <q-card-section class="fit justify-start content-center items-center">
           <q-input
+            v-model="event.description"
             class="col-xs-12 col-sm-6 q-pa-sm"
             label="Beschreibung"
             type="textarea"
-            v-model="event.description"
             filled
           />
         </q-card-section>

src/plugins/schedule/components/management/Eventtypes.vue

@@ -6,7 +6,7 @@
           <div class="text-h6">Editere Diensttyp {{ actualEvent.name }}</div>
         </q-card-section>
         <q-card-section>
-          <q-input dense label="name" filled v-model="newEventName" />
+          <q-input v-model="newEventName" dense label="name" filled />
         </q-card-section>
         <q-card-actions>
           <q-btn flat color="danger" label="Abbrechen" @click="discardChanges()" />
@@ -20,7 +20,7 @@
         <q-card-section>
           <q-table title="Veranstaltungstypen" :data="rows" row-key="jobid" :columns="columns">
             <template #top-right>
-              <q-input dense v-model="newEventType" placeholder="Neuer Typ" />
+              <q-input v-model="newEventType" dense placeholder="Neuer Typ" />
 
               <div></div>
               <q-btn color="primary" icon="mdi-plus" label="Hinzufügen" @click="addType" />

src/plugins/schedule/components/management/Job.vue

@@ -4,19 +4,19 @@
       <IsoDateInput
         class="col-xs-12 col-sm-6 q-pa-sm"
         :value="job.start"
-        @input="setStart"
         label="Beginn"
         type="datetime"
         :rules="[noValidDate, notEmpty]"
+        @input="setStart"
       />
       <IsoDateInput
         ref="bla"
         class="col-xs-12 col-sm-6 q-pa-sm"
         :value="job.end"
-        @input="setEnd"
         label="Ende"
         type="datetime"
         :rules="[noValidDate, isAfterDate, notEmpty]"
+        @input="setEnd"
       />
     </q-card-section>
     <q-card-section class="row fit justify-start content-center items-center">
@@ -29,12 +29,12 @@
         class="col-xs-12 col-sm-6 q-pa-sm"
         :value="job.type"
         :options="jobtypes"
-        @input="setJobType"
         option-label="name"
         option-value="name"
         map-options
         clearable
         :rules="[notEmpty]"
+        @input="setJobType"
       />
       <q-input
         filled
@@ -42,8 +42,8 @@
         label="Dienstanzahl"
         type="number"
         :value="job.required_services"
-        @input="setRequired"
         :rules="[notEmpty]"
+        @input="setRequired"
       />
     </q-card-section>
     <q-card-section class="fit row justify-start content-center items-center">
@@ -52,12 +52,12 @@
         label="Beschreibung"
         type="textarea"
         :value="job.comment"
-        @input="setComment"
         filled
         :rules="[notEmpty]"
+        @input="setComment"
       />
     </q-card-section>
-    <q-btn label="Schicht löschen" color="negative" @click="removeJob" :disabled="jobCanDelete" />
+    <q-btn label="Schicht löschen" color="negative" :disabled="jobCanDelete" @click="removeJob" />
   </q-card-section>
 </template>
 

src/plugins/schedule/components/management/JobTypes.vue

@@ -6,7 +6,7 @@
           <div class="text-h6">Editere Diensttyp {{ actualJob.name }}</div>
         </q-card-section>
         <q-card-section>
-          <q-input dense label="name" filled v-model="newJobName" />
+          <q-input v-model="newJobName" dense label="name" filled />
         </q-card-section>
         <q-card-actions>
           <q-btn flat color="danger" label="Abbrechen" @click="discardChanges()" />
@@ -20,7 +20,7 @@
         <q-card-section>
           <q-table title="Diensttypen" :data="rows" row-key="jobid" :columns="columns">
             <template #top-right>
-              <q-input dense v-model="newJob" placeholder="Neuer Typ" />
+              <q-input v-model="newJob" dense placeholder="Neuer Typ" />
 
               <div></div>
               <q-btn color="primary" icon="mdi-plus" label="Hinzufügen" @click="addType" />

src/plugins/schedule/pages/MainPage.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <q-page padding v-if="checkMain">
+    <q-page v-if="checkMain" padding>
       <q-card>
         <q-card-section>
           <q-list v-for="(mainRoute, index) in mainRoutes" :key="'mainRoute' + index">

src/plugins/schedule/pages/Management.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <q-tabs v-model="tab" v-if="$q.screen.gt.sm">
+    <q-tabs v-if="$q.screen.gt.sm" v-model="tab">
       <q-tab
         v-for="(tabindex, index) in tabs"
         :key="'tab' + index"
@@ -8,10 +8,10 @@
         :label="tabindex.label"
       />
     </q-tabs>
-    <div class="fit row justify-end" v-else>
+    <div v-else class="fit row justify-end">
       <q-btn flat round icon="mdi-menu" @click="showDrawer = !showDrawer" />
     </div>
-    <q-drawer side="right" v-model="showDrawer" @click="showDrawer = !showDrawer" behavior="mobile">
+    <q-drawer v-model="showDrawer" side="right" behavior="mobile" @click="showDrawer = !showDrawer">
       <q-list v-model="tab">
         <q-item
           v-for="(tabindex, index) in tabs"

src/plugins/user/components/NewUser.vue

@@ -4,7 +4,7 @@
       <div class="col-xs-12 col-sm-6 text-center text-h6">Neues Mitglied</div>
     </q-card-section>
     <q-card-section>
-      <MainUserSettings :user="user" @update:user="setUser" :new-user="true" />
+      <MainUserSettings :user="user" :new-user="true" @update:user="setUser" />
     </q-card-section>
   </q-card>
 </template>

src/plugins/user/components/UserSelector.vue

@@ -2,12 +2,12 @@
   <q-select
     filled
     :label="label"
-    @input="updated"
     :value="modelValue"
     :options="users"
     option-label="display_name"
     option-value="userid"
     map-options
+    @input="updated"
   />
 </template>
 

src/plugins/user/components/settings/MainUserSettings.vue

@@ -2,62 +2,62 @@
   <q-form @submit="save" @reset="reset">
     <q-card-section class="fit row justify-start content-center items-center">
       <q-input
+        v-model="user_model.firstname"
         class="col-xs-12 col-sm-6 q-pa-sm"
         label="Vorname"
         :rules="[notEmpty]"
-        v-model="user_model.firstname"
         filled
       />
       <q-input
+        v-model="user_model.lastname"
         class="col-xs-12 col-sm-6 q-pa-sm"
         label="Nachname"
         :rules="[notEmpty]"
-        v-model="user_model.lastname"
         filled
       />
 
       <q-input
+        v-model="user_model.display_name"
         class="col-xs-12 col-sm-6 q-pa-sm"
         label="Angezeigter Name"
         :rules="[notEmpty]"
-        v-model="user_model.display_name"
         filled
       />
       <q-input
+        v-model="user_model.mail"
         class="col-xs-12 col-sm-6 q-pa-sm"
         label="E-Mail"
         :rules="[isEmail, notEmpty]"
-        v-model="user_model.mail"
         filled
       />
       <q-input
+        v-model="user_model.userid"
         class="col-xs-12 col-sm-6 q-pa-sm"
         label="Benutzername"
         :readonly="!newUser"
-        v-model="user_model.userid"
         :rules="[isUseridUsed, notEmpty]"
         filled
       />
       <q-select
+        v-model="user_model.roles"
         class="col-xs-12 col-sm-6 q-pa-sm"
         label="Rollen"
         filled
         multiple
         use-chips
-        v-model="user_model.roles"
         :readonly="!canSetRoles"
         :options="allRoles"
         option-label="name"
         option-value="name"
       />
       <IsoDateInput
-        class="col-xs-12 col-sm-6 q-pa-sm"
         v-model="user_model.birthday"
+        class="col-xs-12 col-sm-6 q-pa-sm"
         label="Geburtstag"
       />
       <q-file
-        class="col-xs-12 col-sm-6 q-pa-sm"
         v-model="avatar"
+        class="col-xs-12 col-sm-6 q-pa-sm"
         filled
         label="Avatar"
         accept=".jpg, image/*"
@@ -71,31 +71,31 @@
       </q-file>
     </q-card-section>
     <q-separator v-if="!newUser" />
-    <q-card-section class="fit row justify-start content-center items-center" v-if="!newUser">
+    <q-card-section v-if="!newUser" class="fit row justify-start content-center items-center">
       <q-input
         v-if="isCurrentUser"
+        v-model="password"
         class="col-xs-12 col-sm-6 col-md-4 q-pa-sm"
         label="Password"
         type="password"
         hint="Password muss immer eingetragen werden"
         :rules="[notEmpty]"
-        v-model="password"
         filled
       />
       <q-input
+        v-model="new_password"
         class="col-xs-12 col-sm-6 col-md-4 q-pa-sm"
         label="Neues Password"
         type="password"
-        v-model="new_password"
         filled
       />
       <q-input
+        v-model="new_password2"
         class="col-xs-12 col-sm-6 col-md-4 q-pa-sm"
         label="Wiederhole neues Password"
         type="password"
         :disable="new_password.length == 0"
         :rules="[samePassword]"
-        v-model="new_password2"
         filled
       />
     </q-card-section>

src/plugins/user/components/settings/RoleSettings.vue

@@ -15,22 +15,22 @@
             option-label="name"
             option-value="name"
             map-options
+            clearable
             @new-value="createRole"
             @input="updateRole"
             @clear="removeRole"
-            clearable
           />
         </q-card-section>
         <q-separator />
         <q-card-section v-if="role" class="fit row justify-start content-center items-center">
           <q-scroll-area style="height: 20em; width: 100%">
-            <q-input filled v-model="newRoleName" label="neuer Name" v-if="role.id != -1" />
+            <q-input v-if="role.id != -1" v-model="newRoleName" filled label="neuer Name" />
             <q-option-group
               :value="role.permissions"
-              @input="updatePermissions"
               :options="permissions"
               color="primary"
               type="checkbox"
+              @input="updatePermissions"
             />
           </q-scroll-area>
         </q-card-section>

src/plugins/user/components/settings/Sessions.vue

@@ -16,29 +16,29 @@
           {{ session.platform }}
         </div>
       </div>
-      <div class="row" v-if="!isEdit">
+      <div v-if="!isEdit" class="row">
         <div class="col-xs-12 col-sm-6">
           Lebenszeit:
           {{ session.lifetime }}
         </div>
         <div class="col-xs-12 col-sm-6">Läuft aus: {{ dateTime(session.expires) }}</div>
       </div>
-      <div class="row q-my-sm" v-else>
+      <div v-else class="row q-my-sm">
         <q-input
-          class="col-xs-12 col-sm-6 q-px-sm"
           v-model="computedLifetime"
+          class="col-xs-12 col-sm-6 q-px-sm"
           type="number"
           label="Zeit"
           filled
         />
-        <q-select class="col-xs-12 col-sm-6 q-px-sm" :options="options" v-model="option" filled />
+        <q-select v-model="option" class="col-xs-12 col-sm-6 q-px-sm" :options="options" filled />
       </div>
     </q-card-section>
-    <q-card-actions align="right" v-if="!isEdit">
+    <q-card-actions v-if="!isEdit" align="right">
       <q-btn flat round dense icon="mdi-pencil" @click="edit(true)" />
       <q-btn flat round dense icon="mdi-delete" @click="deleteSession(session.token)" />
     </q-card-actions>
-    <q-card-actions align="right" v-else>
+    <q-card-actions v-else align="right">
       <q-btn flat dense label="Abbrechen" @click="edit(false)" />
       <q-btn flat dense label="Speichern" @click="save" />
     </q-card-actions>

src/plugins/user/pages/AdminSettings.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <q-tabs v-model="tab" v-if="$q.screen.gt.sm">
+    <q-tabs v-if="$q.screen.gt.sm" v-model="tab">
       <q-tab
         v-for="(tabindex, index) in tabs"
         :key="'tab' + index"
@@ -8,10 +8,10 @@
         :label="tabindex.label"
       />
     </q-tabs>
-    <div class="fit row justify-end" v-else>
+    <div v-else class="fit row justify-end">
       <q-btn flat round icon="mdi-menu" @click="showDrawer = !showDrawer" />
     </div>
-    <q-drawer side="right" v-model="showDrawer" @click="showDrawer = !showDrawer" behavior="mobile">
+    <q-drawer v-model="showDrawer" side="right" behavior="mobile" @click="showDrawer = !showDrawer">
       <q-list v-model="tab">
         <q-item
           v-for="(tabindex, index) in tabs"

src/plugins/user/pages/MainPage.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <q-page padding v-if="checkMain">
+    <q-page v-if="checkMain" padding>
       <q-card>
         <q-card-section>
           <q-list v-for="(mainRoute, index) in mainRoutes" :key="'mainRoute' + index">