diff --git a/src/App.vue b/src/App.vue
index 57c32cbd..762e1851 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -70,7 +70,7 @@
     <PostStatusModal />
     <EditStatusModal v-if="editingAvailable" />
     <StatusHistoryModal v-if="editingAvailable" />
-    <SettingsModal :class="layoutModalClass"/>
+    <SettingsModal :class="layoutModalClass" />
     <UpdateNotification />
     <GlobalNoticeList />
   </div>
diff --git a/src/components/component_preview/component_preview.vue b/src/components/component_preview/component_preview.vue
index 6795d393..6aee90a2 100644
--- a/src/components/component_preview/component_preview.vue
+++ b/src/components/component_preview/component_preview.vue
@@ -32,8 +32,8 @@
       >
     </label>
     <label
-      class="y-shift-number"
       v-show="shadowControl && !hideControls"
+      class="y-shift-number"
     >
       {{ $t('settings.style.shadows.offset-y') }}
       <input
@@ -78,7 +78,10 @@
       >
         {{ $t('settings.style.themes3.editor.test_string') }}
       </div>
-      <div v-if="invalid" class="invalid-container">
+      <div
+        v-if="invalid"
+        class="invalid-container"
+      >
         <div class="alert error invalid-label">
           {{ $t('settings.style.themes3.editor.invalid') }}
         </div>
@@ -104,8 +107,8 @@
       </div>
       <ColorInput
         v-if="!noColorControl"
-        class="input-color-input"
         v-model="colorOverride"
+        class="input-color-input"
         fallback="#606060"
         :label="$t('settings.style.shadows.color_override')"
       />
diff --git a/src/components/contrast_ratio/contrast_ratio.vue b/src/components/contrast_ratio/contrast_ratio.vue
index 2d3c5c83..93799e4c 100644
--- a/src/components/contrast_ratio/contrast_ratio.vue
+++ b/src/components/contrast_ratio/contrast_ratio.vue
@@ -11,13 +11,22 @@
       class="rating"
     >
       <span v-if="contrast.aaa">
-        <FAIcon icon="thumbs-up" :size="showRatio ? 'lg' : ''" />
+        <FAIcon
+          icon="thumbs-up"
+          :size="showRatio ? 'lg' : ''"
+        />
       </span>
       <span v-if="!contrast.aaa && contrast.aa">
-        <FAIcon icon="adjust" :size="showRatio ? 'lg' : ''" />
+        <FAIcon
+          icon="adjust"
+          :size="showRatio ? 'lg' : ''"
+        />
       </span>
       <span v-if="!contrast.aaa && !contrast.aa">
-        <FAIcon icon="exclamation-triangle" :size="showRatio ? 'lg' : ''" />
+        <FAIcon
+          icon="exclamation-triangle"
+          :size="showRatio ? 'lg' : ''"
+        />
       </span>
     </Tooltip>
     <Tooltip
@@ -26,13 +35,22 @@
       class="rating"
     >
       <span v-if="contrast.laaa">
-        <FAIcon icon="thumbs-up" :size="showRatio ? 'large' : ''" />
+        <FAIcon
+          icon="thumbs-up"
+          :size="showRatio ? 'large' : ''"
+        />
       </span>
       <span v-if="!contrast.laaa && contrast.laa">
-        <FAIcon icon="adjust" :size="showRatio ? 'lg' : ''" />
+        <FAIcon
+          icon="adjust"
+          :size="showRatio ? 'lg' : ''"
+        />
       </span>
       <span v-if="!contrast.laaa && !contrast.laa">
-        <FAIcon icon="exclamation-triangle" :size="showRatio ? 'lg' : ''" />
+        <FAIcon
+          icon="exclamation-triangle"
+          :size="showRatio ? 'lg' : ''"
+        />
       </span>
     </Tooltip>
   </span>
@@ -55,6 +73,9 @@ library.add(
 )
 
 export default {
+  components: {
+    Tooltip
+  },
   props: {
     large: {
       required: false,
@@ -74,9 +95,6 @@ export default {
       default: false
     }
   },
-  components: {
-    Tooltip
-  },
   computed: {
     hint () {
       const levelVal = this.contrast.aaa ? 'aaa' : (this.contrast.aa ? 'aa' : 'bad')
diff --git a/src/components/font_control/font_control.vue b/src/components/font_control/font_control.vue
index fca3b360..cda7b6f1 100644
--- a/src/components/font_control/font_control.vue
+++ b/src/components/font_control/font_control.vue
@@ -14,7 +14,7 @@
     <Checkbox
       v-if="typeof fallback !== 'undefined'"
       :id="name + '-o'"
-      :modelValue="present"
+      :model-value="present"
       @change="$emit('update:modelValue', typeof modelValue === 'undefined' ? fallback : undefined)"
     >
       {{ $t('settings.style.themes3.define') }}
@@ -50,8 +50,8 @@
       >
         <button
           class="btn button-default"
-          @click="toggleManualEntry"
           :title="$t('settings.style.themes3.font.lookup_local_fonts')"
+          @click="toggleManualEntry"
         >
           <FAIcon
             fixed-width
@@ -72,8 +72,8 @@
       >
         <button
           class="btn button-default"
-          @click="toggleManualEntry"
           :title="$t('settings.style.themes3.font.enter_manually')"
+          @click="toggleManualEntry"
         >
           <FAIcon
             fixed-width
diff --git a/src/components/login_form/login_form.vue b/src/components/login_form/login_form.vue
index 3c152b2e..25392742 100644
--- a/src/components/login_form/login_form.vue
+++ b/src/components/login_form/login_form.vue
@@ -3,7 +3,9 @@
     <!-- Default panel contents -->
 
     <div class="panel-heading">
-      <h1 class="title">{{ $t('login.login') }}</h1>
+      <h1 class="title">
+        {{ $t('login.login') }}
+      </h1>
     </div>
 
     <div class="panel-body">
diff --git a/src/components/opacity_input/opacity_input.vue b/src/components/opacity_input/opacity_input.vue
index dea17a46..4dc5c810 100644
--- a/src/components/opacity_input/opacity_input.vue
+++ b/src/components/opacity_input/opacity_input.vue
@@ -8,7 +8,7 @@
       class="label"
       :class="{ faint: !present || disabled }"
     >
-      {{ label  }}
+      {{ label }}
     </label>
     <Checkbox
       v-if="typeof fallback !== 'undefined'"
diff --git a/src/components/settings_modal/tabs/appearance_tab.vue b/src/components/settings_modal/tabs/appearance_tab.vue
index d8d3ff15..d76ef351 100644
--- a/src/components/settings_modal/tabs/appearance_tab.vue
+++ b/src/components/settings_modal/tabs/appearance_tab.vue
@@ -73,13 +73,13 @@
         </button>
       </ul>
       <div class="import-file-container">
-      <button
-        class="btn button-default"
-        @click="importFile"
-      >
-        <FAIcon icon="folder-open" />
-        {{ $t('settings.style.themes3.editor.load_style') }}
-      </button>
+        <button
+          class="btn button-default"
+          @click="importFile"
+        >
+          <FAIcon icon="folder-open" />
+          {{ $t('settings.style.themes3.editor.load_style') }}
+        </button>
       </div>
       <div class="setting-item">
         <h2>{{ $t('settings.style.themes3.palette.label') }}</h2>
@@ -136,8 +136,8 @@
             </h4>
             <PaletteEditor
               v-if="expertLevel > 0"
-              class="userPalette"
               v-model="userPalette"
+              class="userPalette"
               :compact="true"
               :apply="true"
               @applyPalette="data => setPaletteCustom(data)"
diff --git a/src/components/settings_modal/tabs/filtering_tab.vue b/src/components/settings_modal/tabs/filtering_tab.vue
index c86810d5..32325d42 100644
--- a/src/components/settings_modal/tabs/filtering_tab.vue
+++ b/src/components/settings_modal/tabs/filtering_tab.vue
@@ -106,7 +106,7 @@
             key="hideScrobblesAfter"
             path="hideScrobblesAfter"
             :units="['m', 'h', 'd']"
-            unitSet="time"
+            unit-set="time"
             expert="1"
           >
             {{ $t('settings.hide_scrobbles_after') }}
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index 82d5da89..3cc83b54 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -226,8 +226,8 @@
           </BooleanSetting>
         </li>
         <ul
-          class="setting-list suboptions"
           v-if="mergedConfig.useAbsoluteTimeFormat"
+          class="setting-list suboptions"
         >
           <li>
             <UnitSetting
diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.vue b/src/components/settings_modal/tabs/style_tab/style_tab.vue
index 68a0193f..4eca5da2 100644
--- a/src/components/settings_modal/tabs/style_tab/style_tab.vue
+++ b/src/components/settings_modal/tabs/style_tab/style_tab.vue
@@ -52,22 +52,34 @@
         </teleport>
         <ul class="setting-list style-metadata">
           <li>
-            <StringSetting class="meta-field" v-model="name">
+            <StringSetting
+              v-model="name"
+              class="meta-field"
+            >
               {{ $t('settings.style.themes3.editor.style_name') }}
             </StringSetting>
           </li>
           <li>
-            <StringSetting class="meta-field" v-model="author">
+            <StringSetting
+              v-model="author"
+              class="meta-field"
+            >
               {{ $t('settings.style.themes3.editor.style_author') }}
             </StringSetting>
           </li>
           <li>
-            <StringSetting class="meta-field" v-model="license">
+            <StringSetting
+              v-model="license"
+              class="meta-field"
+            >
               {{ $t('settings.style.themes3.editor.style_license') }}
             </StringSetting>
           </li>
           <li>
-            <StringSetting class="meta-field" v-model="website">
+            <StringSetting
+              v-model="website"
+              class="meta-field"
+            >
               {{ $t('settings.style.themes3.editor.style_website') }}
             </StringSetting>
           </li>
@@ -228,19 +240,18 @@
               <Checkbox v-model="isTextAutoPresent" />
             </Tooltip>
             <div
-              class="style-control suboption"
               v-if="componentHas('Text')"
+              class="style-control suboption"
             >
               <label class="label">
-                {{$t('settings.style.themes3.editor.contrast') }}
+                {{ $t('settings.style.themes3.editor.contrast') }}
               </label>
               <ContrastRatio
                 :show-ratio="true"
                 :contrast="contrast"
               />
             </div>
-            <div v-if="componentHas('Text')">
-            </div>
+            <div v-if="componentHas('Text')" />
             <ColorInput
               v-if="componentHas('Link')"
               v-model="editedLinkColor"
@@ -350,22 +361,22 @@
         </Select>
         <SelectMotion
           class="list-select-movement"
-          :modelValue="palettes"
-          @update:modelValue="onPalettesUpdate"
+          :model-value="palettes"
           :selected-id="selectedPaletteId"
           :get-add-value="getNewPalette"
+          @update:modelValue="onPalettesUpdate"
           @update:selectedId="e => selectedPaletteId = e"
         />
         <div class="list-edit-area">
           <StringSetting
-            class="palette-name-input"
             v-model="selectedPalette.name"
+            class="palette-name-input"
           >
             {{ $t('settings.style.themes3.palette.name_label') }}
           </StringSetting>
           <PaletteEditor
-            class="palette-editor-single"
             v-model="selectedPalette"
+            class="palette-editor-single"
           />
         </div>
       </div>
@@ -373,8 +384,8 @@
         key="variables"
         :label="$t('settings.style.themes3.editor.variables_tab')"
         :model-value="virtualDirectives"
-        @update:modelValue="updateVirtualDirectives"
         :normalize-shadows="normalizeShadows"
+        @update:modelValue="updateVirtualDirectives"
       />
     </tab-switcher>
   </div>
diff --git a/src/components/settings_modal/tabs/style_tab/virtual_directives_tab.vue b/src/components/settings_modal/tabs/style_tab/virtual_directives_tab.vue
index cf3345e5..68648002 100644
--- a/src/components/settings_modal/tabs/style_tab/virtual_directives_tab.vue
+++ b/src/components/settings_modal/tabs/style_tab/virtual_directives_tab.vue
@@ -14,22 +14,22 @@
       v-model="selectedVirtualDirectiveId"
       class="list-select"
       size="20"
-      >
+    >
       <option
         v-for="(p, index) in modelValue"
         :key="p.name"
         :value="index"
-        >
+      >
         {{ p.name }}
       </option>
     </Select>
     <SelectMotion
       class="list-select-movement"
       :model-value="modelValue"
-      @update:modelValue="e => emit('update:modelValue', e)"
       :selected-id="selectedVirtualDirectiveId"
-      @update:selectedId="e => selectedVirtualDirectiveId = e"
       :get-add-value="getNewVirtualDirective"
+      @update:modelValue="e => emit('update:modelValue', e)"
+      @update:selectedId="e => selectedVirtualDirectiveId = e"
     />
     <div class="list-edit-area">
       <div class="variable-selector">
@@ -41,26 +41,26 @@
           {{ ' ' }}
         </label>
         <input
-          class="input"
           v-model="selectedVirtualDirective.name"
+          class="input"
         >
         <label
           class="variable-type-label"
           for="variables-selector"
-          >
+        >
           {{ $t('settings.style.themes3.editor.variables.type_label') }}
           {{ ' ' }}
         </label>
         <Select
           v-model="selectedVirtualDirectiveValType"
         >
-          <option value='shadow'>
+          <option value="shadow">
             {{ $t('settings.style.themes3.editor.variables.type_shadow') }}
           </option>
-          <option value='color'>
+          <option value="color">
             {{ $t('settings.style.themes3.editor.variables.type_color') }}
           </option>
-          <option value='generic'>
+          <option value="generic">
             {{ $t('settings.style.themes3.editor.variables.type_generic') }}
           </option>
         </Select>
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index 413b7550..f96ffe9d 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -1,6 +1,9 @@
 <template>
   <div :class="['Timeline', classes.root]">
-    <div :class="classes.header" v-if="!embedded">
+    <div
+      v-if="!embedded"
+      :class="classes.header"
+    >
       <TimelineMenu
         v-if="!embedded"
         :timeline-name="timelineName"