[lint] Enable plugin vue recommended rules (#3403)

src/views/DownloadGitView.vue

@@ -27,14 +27,14 @@
           :label="$t('downloadGit.gitWebsite')"
           icon="pi pi-external-link"
           icon-pos="right"
-          @click="openGitDownloads"
           severity="primary"
+          @click="openGitDownloads"
         />
         <Button
           :label="$t('downloadGit.skip')"
           icon="pi pi-exclamation-triangle"
-          @click="skipGit"
           severity="secondary"
+          @click="skipGit"
         />
       </div>
     </div>

src/views/GraphView.vue

@@ -1,14 +1,14 @@
 <template>
   <div class="comfyui-body grid h-screen w-screen overflow-hidden">
-    <div class="comfyui-body-top" id="comfyui-body-top">
+    <div id="comfyui-body-top" class="comfyui-body-top">
       <TopMenubar v-if="useNewMenu === 'Top'" />
     </div>
-    <div class="comfyui-body-bottom" id="comfyui-body-bottom">
+    <div id="comfyui-body-bottom" class="comfyui-body-bottom">
       <TopMenubar v-if="useNewMenu === 'Bottom'" />
     </div>
-    <div class="comfyui-body-left" id="comfyui-body-left" />
-    <div class="comfyui-body-right" id="comfyui-body-right" />
-    <div class="graph-canvas-container" id="graph-canvas-container">
+    <div id="comfyui-body-left" class="comfyui-body-left" />
+    <div id="comfyui-body-right" class="comfyui-body-right" />
+    <div id="graph-canvas-container" class="graph-canvas-container">
       <GraphCanvas @ready="onGraphReady" />
     </div>
   </div>

src/views/InstallView.vue

@@ -23,19 +23,19 @@
         </Step>
       </StepList>
       <StepPanels>
-        <StepPanel value="0" v-slot="{ activateCallback }">
+        <StepPanel v-slot="{ activateCallback }" value="0">
           <GpuPicker v-model:device="device" />
           <div class="flex pt-6 justify-end">
             <Button
               :label="$t('g.next')"
               icon="pi pi-arrow-right"
-              iconPos="right"
-              @click="activateCallback('1')"
+              icon-pos="right"
               :disabled="typeof device !== 'string'"
+              @click="activateCallback('1')"
             />
           </div>
         </StepPanel>
-        <StepPanel value="1" v-slot="{ activateCallback }">
+        <StepPanel v-slot="{ activateCallback }" value="1">
           <InstallLocationPicker
             v-model:installPath="installPath"
             v-model:pathError="pathError"
@@ -50,13 +50,13 @@
             <Button
               :label="$t('g.next')"
               icon="pi pi-arrow-right"
-              iconPos="right"
-              @click="activateCallback('2')"
+              icon-pos="right"
               :disabled="pathError !== ''"
+              @click="activateCallback('2')"
             />
           </div>
         </StepPanel>
-        <StepPanel value="2" v-slot="{ activateCallback }">
+        <StepPanel v-slot="{ activateCallback }" value="2">
           <MigrationPicker
             v-model:sourcePath="migrationSourcePath"
             v-model:migrationItemIds="migrationItemIds"
@@ -71,21 +71,21 @@
             <Button
               :label="$t('g.next')"
               icon="pi pi-arrow-right"
-              iconPos="right"
+              icon-pos="right"
               @click="activateCallback('3')"
             />
           </div>
         </StepPanel>
-        <StepPanel value="3" v-slot="{ activateCallback }">
+        <StepPanel v-slot="{ activateCallback }" value="3">
           <DesktopSettingsConfiguration
             v-model:autoUpdate="autoUpdate"
             v-model:allowMetrics="allowMetrics"
           />
           <MirrorsConfiguration
-            :device="device"
             v-model:pythonMirror="pythonMirror"
             v-model:pypiMirror="pypiMirror"
             v-model:torchMirror="torchMirror"
+            :device="device"
             class="mt-6"
           />
           <div class="flex mt-6 justify-between">
@@ -98,7 +98,7 @@
             <Button
               :label="$t('g.install')"
               icon="pi pi-check"
-              iconPos="right"
+              icon-pos="right"
               :disabled="hasError"
               @click="install()"
             />

src/views/MaintenanceView.vue

@@ -21,19 +21,21 @@
               :options="[PrimeIcons.LIST, PrimeIcons.TH_LARGE]"
               :allow-empty="false"
             >
-              <template #option="opts"><i :class="opts.option" /></template>
+              <template #option="opts">
+                <i :class="opts.option" />
+              </template>
             </SelectButton>
             <SelectButton
               v-model="filter"
               :options="filterOptions"
               :allow-empty="false"
-              optionLabel="value"
-              dataKey="value"
+              option-label="value"
+              data-key="value"
               area-labelledby="custom"
               @change="clearResolved"
             >
               <template #option="opts">
-                <i :class="opts.option.icon"></i>
+                <i :class="opts.option.icon" />
                 <span class="max-sm:hidden">{{ opts.option.value }}</span>
               </template>
             </SelectButton>
@@ -49,8 +51,8 @@
         <TaskListPanel
           class="border-neutral-700 border-solid border-x-0 border-y"
           :filter
-          :displayAsList
-          :isRefreshing
+          :display-as-list
+          :is-refreshing
         />
 
         <!-- Actions -->
@@ -67,8 +69,8 @@
             icon="pi pi-arrow-right"
             icon-pos="left"
             :severity="anyErrors ? 'secondary' : 'primary'"
-            @click="() => completeValidation()"
             :loading="isRefreshing"
+            @click="() => completeValidation()"
           />
         </div>
       </div>

src/views/ManualConfigurationView.vue

@@ -13,7 +13,7 @@
           icon="pi pi-exclamation-triangle"
           severity="warn"
           :value="t('icon.exclamation-triangle')"
-        ></Tag>
+        />
         <strong class="ml-2">{{
           $t('install.gpuSelection.customComfyNeedsPython')
         }}</strong>

src/views/MetricsConsentView.vue

@@ -38,7 +38,7 @@
             :label="$t('g.ok')"
             icon="pi pi-check"
             :loading="isUpdating"
-            iconPos="right"
+            icon-pos="right"
             @click="updateConsent"
           />
         </div>

src/views/NotSupportedView.vue

@@ -31,22 +31,22 @@
             <Button
               :label="$t('notSupported.learnMore')"
               icon="pi pi-github"
-              @click="openDocs"
               severity="secondary"
+              @click="openDocs"
             />
             <Button
               :label="$t('notSupported.reportIssue')"
               icon="pi pi-flag"
-              @click="reportIssue"
               severity="secondary"
+              @click="reportIssue"
             />
             <Button
+              v-tooltip="$t('notSupported.continueTooltip')"
               :label="$t('notSupported.continue')"
               icon="pi pi-arrow-right"
-              iconPos="right"
-              @click="continueToInstall"
+              icon-pos="right"
               severity="danger"
-              v-tooltip="$t('notSupported.continueTooltip')"
+              @click="continueToInstall"
             />
           </div>
         </div>

src/views/UserSelectView.vue

@@ -23,13 +23,15 @@
           <Select
             v-model="selectedUser"
             class="w-full"
-            inputId="existing-user-select"
+            input-id="existing-user-select"
             :options="userStore.users"
             option-label="username"
             :placeholder="$t('userSelect.selectUser')"
             :disabled="createNewUser"
           />
-          <Message v-if="error" severity="error">{{ error }}</Message>
+          <Message v-if="error" severity="error">
+            {{ error }}
+          </Message>
         </div>
         <footer class="mt-5">
           <Button :label="$t('userSelect.next')" @click="login" />

src/views/WelcomeView.vue

@@ -10,11 +10,11 @@
       <Button
         :label="$t('welcome.getStarted')"
         icon="pi pi-arrow-right"
-        iconPos="right"
+        icon-pos="right"
         size="large"
         rounded
-        @click="navigateTo('/install')"
         class="p-4 text-lg fade-in-up"
+        @click="navigateTo('/install')"
       />
     </div>
   </BaseViewTemplate>

src/views/templates/BaseViewTemplate.vue

@@ -16,7 +16,7 @@
     <div
       class="flex-grow w-full flex items-center justify-center overflow-auto"
     >
-      <slot></slot>
+      <slot />
     </div>
   </div>
 </template>