diff --git a/.eslintrc.cjs b/.eslintrc.cjs
deleted file mode 100644
index e5f803c..0000000
--- a/.eslintrc.cjs
+++ /dev/null
@@ -1,25 +0,0 @@
-/*
- * Copyright (c) 2023-2024 ThrRip, XMing (洺知-故犯)
- *
- * This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at https://mozilla.org/MPL/2.0/.
- */
-
-module.exports = {
-  root: true,
-  env: {
-    browser: true,
-    node: true
-  },
-  extends: [
-    'standard',
-    '@nuxtjs/eslint-config-typescript',
-    'plugin:nuxt/recommended'
-  ],
-  rules: {
-    'indent': ['error', 2, { ignoredNodes: ['IfStatement[alternate.type="IfStatement"]'], SwitchCase: 1 }],
-    'operator-linebreak': ['error', 'after'],
-    'quote-props': ['error', 'consistent']
-  }
-}
diff --git a/.idea/dictionaries/thrrip.xml b/.idea/dictionaries/thrrip.xml
index 2530980..ba121a1 100644
--- a/.idea/dictionaries/thrrip.xml
+++ b/.idea/dictionaries/thrrip.xml
@@ -9,6 +9,7 @@
       <w>getline</w>
       <w>mktemp</w>
       <w>nuxtjs</w>
+      <w>singleline</w>
       <w>webmanifest</w>
       <w>zstd</w>
     </words>
diff --git a/eslint.config.js b/eslint.config.js
new file mode 100644
index 0000000..78409ff
--- /dev/null
+++ b/eslint.config.js
@@ -0,0 +1,41 @@
+/*
+ * Copyright (c) 2024 ThrRip, XMing (洺知-故犯)
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+import withNuxt from './.nuxt/eslint.config.mjs'
+
+export default withNuxt(
+  {
+    files: ['eslint.config.js']
+  },
+  {
+    rules: {
+      '@typescript-eslint/ban-ts-comment': ['error', {
+        'ts-expect-error': false,
+        'ts-nocheck': false
+      }],
+      '@typescript-eslint/no-dynamic-delete': 'off',
+      '@stylistic/arrow-parens': ['error', 'as-needed', { requireForBlockBody: false }],
+      '@stylistic/comma-dangle': ['error', 'never'],
+      '@stylistic/indent': ['error', 2, {
+        ignoredNodes: ['IfStatement[alternate.type="IfStatement"]'],
+        SwitchCase: 1
+      }],
+      '@stylistic/indent-binary-ops': 'off',
+      '@stylistic/max-statements-per-line': ['error', { max: 2 }],
+      '@stylistic/operator-linebreak': ['error', 'after'],
+      '@stylistic/space-before-function-paren': ['error', 'always'],
+      'vue/comma-dangle': ['error', 'never'],
+      'vue/max-attributes-per-line': ['warn', { singleline: 5 }],
+      'vue/operator-linebreak': ['error', 'after']
+    }
+  },
+  {
+    files: ['packages/*/pages/**/*.vue'],
+    rules: { 'vue/multi-word-component-names': 'off' }
+  }
+)
diff --git a/nuxt.config.ts b/nuxt.config.ts
new file mode 100644
index 0000000..f570dc9
--- /dev/null
+++ b/nuxt.config.ts
@@ -0,0 +1,19 @@
+/*
+ * Copyright (c) 2024 ThrRip, XMing (洺知-故犯)
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+export default defineNuxtConfig({
+  modules: [
+    '@nuxt/eslint'
+  ],
+
+  eslint: {
+    config: {
+      stylistic: true
+    }
+  }
+})
diff --git a/packages/admin/app.vue b/packages/admin/app.vue
index c9dc41c..ad4379d 100644
--- a/packages/admin/app.vue
+++ b/packages/admin/app.vue
@@ -99,9 +99,9 @@
           <font-awesome-icon
             :icon="['fas', 'angle-right']"
             class="max-lg:landscape:!h-4 !h-5 transition-transform duration-300"
-            :style="[ viewFullNavigationBarToggles === 0 ?
+            :style="[viewFullNavigationBarToggles === 0 ?
               '' :
-              `transform: rotate(${180 * viewFullNavigationBarToggles}deg)` ]"
+              `transform: rotate(${180 * viewFullNavigationBarToggles}deg)`]"
           />
         </button>
       </section>
@@ -155,9 +155,9 @@ backendClient.setEndpoint(useAppConfig().backendBase)
   .setProject(useAppConfig().backendProjectId)
 const backendAccount = new Account(backendClient)
 
-const backendLoggedIn = ref<Boolean>(false)
-const backendLoggedInChecking = ref<Boolean>(true)
-if (process.client) {
+const backendLoggedIn = ref<boolean>(false)
+const backendLoggedInChecking = ref<boolean>(true)
+if (import.meta.client) {
   backendAccount.get()
     .then(
       () => {
@@ -208,19 +208,20 @@ function backendLogout () {
 }
 
 // View
-const viewShowLoginModal = ref<Boolean>(true)
+const viewShowLoginModal = ref<boolean>(true)
 
-const viewShowFullNavigationBar = ref<Boolean>(false)
-const viewShowFullNavigationBarRealState = ref<Boolean>(false)
+const viewShowFullNavigationBar = ref<boolean>(false)
+const viewShowFullNavigationBarRealState = ref<boolean>(false)
 const viewFullNavigationBarToggles = ref<number>(0)
 
-const viewShowPageContent = ref<Boolean>(true)
+const viewShowPageContent = ref<boolean>(true)
 
 function viewToggleFullNavigationBar (show?: boolean) {
   if (show === undefined) {
     viewShowFullNavigationBar.value = !viewShowFullNavigationBar.value
     viewFullNavigationBarToggles.value++
-  } else
+  }
+ else
   if (viewShowFullNavigationBar.value !== show) {
     viewShowFullNavigationBar.value = show
     viewFullNavigationBarToggles.value++
@@ -230,7 +231,8 @@ function viewToggleFullNavigationBar (show?: boolean) {
   }, 300)
   if (viewShowFullNavigationBar.value) {
     viewShowPageContent.value = !viewShowFullNavigationBar.value
-  } else {
+  }
+  else {
     setTimeout(() => { viewShowPageContent.value = !viewShowFullNavigationBar.value }, 150)
   }
 }
diff --git a/packages/admin/components/playlist/ChangesList.vue b/packages/admin/components/playlist/ChangesList.vue
index 00085ec..73c594f 100644
--- a/packages/admin/components/playlist/ChangesList.vue
+++ b/packages/admin/components/playlist/ChangesList.vue
@@ -214,9 +214,9 @@
                   '请联系您的技术支持人员以获取帮助，或点击此图标以重新选择此项目，并再次尝试发布改动。' :
                   ''"
               class="group grid portrait:row-span-2 place-items-center pl-2.5 portrait:pl-2.5 portrait:pr-1 py-2.5 h-full"
-              :class="[ !getPublishingStateById(song.$id) ? 'cursor-pointer' :
+              :class="[!getPublishingStateById(song.$id) ? 'cursor-pointer' :
                 getPublishingStateById(song.$id)?.state === 'failed' ? 'grid-areas-stack cursor-pointer' :
-                'grid-areas-stack' ]"
+                'grid-areas-stack']"
             >
               <input
                 v-if="!getPublishingStateById(song.$id) || getPublishingStateById(song.$id)?.state === 'failed'"
@@ -473,7 +473,7 @@ const emit = defineEmits<{
 }>()
 
 const selectableIds = computed<Array<Song['$id']>>(() => {
-  // @ts-ignore
+  // @ts-expect-error
   return props.dataChanges.map(song => song.$id)
     .filter(id => getPublishingStateById(id)?.state !== 'processing' && getPublishingStateById(id)?.state !== 'succeeded')
 })
diff --git a/packages/admin/components/playlist/MainList.vue b/packages/admin/components/playlist/MainList.vue
index fac5be3..ccbc769 100644
--- a/packages/admin/components/playlist/MainList.vue
+++ b/packages/admin/components/playlist/MainList.vue
@@ -366,7 +366,8 @@ function scrollList (position: 'top' | 'bottom') {
       top: 0,
       behavior: 'smooth'
     }))
-  } else {
+  }
+  else {
     nextTick(() => listArea.value?.scroll({
       top: listArea.value?.scrollHeight,
       behavior: 'smooth'
@@ -382,7 +383,6 @@ interface ModifyTarget {
   field: 'name' | 'artist' | 'payment_amount' | 'language'
 }
 const modifyingTarget = ref<{
-  // eslint-disable-next-line no-use-before-define
   [P in keyof ModifyTarget]: ModifyTarget[P] | null
 }>({
   id: null,
diff --git a/packages/admin/ecosystem.config.js b/packages/admin/ecosystem.config.js
index 35a62db..e2053d1 100644
--- a/packages/admin/ecosystem.config.js
+++ b/packages/admin/ecosystem.config.js
@@ -15,9 +15,9 @@ module.exports = {
       port: 12321,
       max_memory_restart: '200M',
       env: {
-        'NITRO_PORT': 12321,
-        'NUXT_APP_SECURE_CONTEXT': true,
-        'NUXT_BACKEND_API_KEY': ''
+        NITRO_PORT: 12321,
+        NUXT_APP_SECURE_CONTEXT: true,
+        NUXT_BACKEND_API_KEY: ''
       }
     }
   ]
diff --git a/packages/admin/middleware/entry.global.ts b/packages/admin/middleware/entry.global.ts
index da13936..a044ae7 100644
--- a/packages/admin/middleware/entry.global.ts
+++ b/packages/admin/middleware/entry.global.ts
@@ -6,8 +6,8 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-export default defineNuxtRouteMiddleware(async (to) => {
-  if (process.client) { return }
+export default defineNuxtRouteMiddleware(async to => {
+  if (import.meta.client) { return }
 
   function navigateToHome () {
     return navigateTo(useAppConfig().appHomeBase, { external: true })
@@ -19,6 +19,7 @@ export default defineNuxtRouteMiddleware(async (to) => {
     httpOnly: true,
     path: useAppConfig().appAdminBasePath,
     sameSite: 'strict',
+    // @ts-expect-error
     secure: useRuntimeConfig().appSecureContext
   })
   const entryToken = entryTokenQuery ?? entryTokenCookie.value
@@ -29,7 +30,7 @@ export default defineNuxtRouteMiddleware(async (to) => {
   const backendDatabases = new Databases(backendClient)
   backendClient.setEndpoint(useAppConfig().backendBase)
     .setProject(useAppConfig().backendProjectId)
-    .setKey(useRuntimeConfig().backendApiKey)
+    .setKey(useRuntimeConfig().backendApiKey as string)
 
   const entryTokenMatches = (await backendDatabases.listDocuments(
     'admin',
@@ -41,7 +42,8 @@ export default defineNuxtRouteMiddleware(async (to) => {
   )).total
   if (entryTokenMatches) {
     entryTokenCookie.value = String(entryToken)
-  } else {
+  }
+  else {
     return navigateToHome()
   }
 })
diff --git a/packages/admin/nuxt.config.ts b/packages/admin/nuxt.config.ts
index b37ea73..51bec01 100644
--- a/packages/admin/nuxt.config.ts
+++ b/packages/admin/nuxt.config.ts
@@ -31,21 +31,23 @@ export default defineNuxtConfig({
     }
   },
 
-  build: {
-    transpile: ['@fortawesome/vue-fontawesome']
-  },
-
   css: [
     '@/../../assets/css/main.css',
     '@fortawesome/fontawesome-svg-core/styles.css'
   ],
 
+  build: {
+    transpile: ['@fortawesome/vue-fontawesome']
+  },
+
   devServer: {
     host: '0.0.0.0',
     port: 3001
   },
 
-  devtools: false,
+  devtools: {
+    enabled: false
+  },
 
   nitro: {
     preset: 'bun'
@@ -53,8 +55,8 @@ export default defineNuxtConfig({
 
   postcss: {
     plugins: {
-      'tailwindcss': {},
-      'autoprefixer': {}
+      tailwindcss: {},
+      autoprefixer: {}
     }
   },
 
diff --git a/packages/admin/pages/playlist.vue b/packages/admin/pages/playlist.vue
index 3a74aa0..f6fe0e8 100644
--- a/packages/admin/pages/playlist.vue
+++ b/packages/admin/pages/playlist.vue
@@ -42,8 +42,8 @@
 </template>
 
 <script setup lang="ts">
-import { Client, Databases, ID, Query, Permission, Role } from 'appwrite'
-import type { AppwriteException } from 'appwrite'
+import { Databases, ID, Query, Permission, Role } from 'appwrite'
+import type { AppwriteException, Client } from 'appwrite'
 
 const props = defineProps<{
   backendClient: Client
@@ -70,7 +70,7 @@ export type Playlist = Array<Song>
 const { data: backendPlaylist, refresh: backendPlaylistRefresh } = await useAsyncData<Playlist>(
   // Use a random key to avoid caching
   `backend-databases-home-playlist-${Math.random()}`,
-  // @ts-ignore
+  // @ts-expect-error
   () => backendDatabases.listDocuments('home', 'playlist', [Query.limit(useAppConfig().backendQueryResultsLimit)]),
   {
     server: false,
@@ -93,7 +93,7 @@ const backendPlaylistPublishChangesState = ref<PlaylistPublishingState>([])
 function backendPlaylistPublishChanges (changesIds: Set<Song['$id']>) {
   backendPlaylistPublishChangesState.value = backendPlaylistPublishChangesState.value.concat(
     backendPlaylistPublishChangesState.value,
-    [...changesIds].map((changesId) => {
+    [...changesIds].map(changesId => {
       return {
         $id: changesId,
         state: 'processing'
@@ -109,10 +109,11 @@ function backendPlaylistPublishChanges (changesIds: Set<Song['$id']>) {
       backendPlaylistPublishChangesState.value[
         backendPlaylistPublishChangesState.value.findIndex(_ => _.$id === changesId)
       ].newId = newId
-    } else {
+    }
+    else {
       backendPlaylistPublishChangesState.value[
         backendPlaylistPublishChangesState.value.findIndex(_ => _.$id === changesId)
-      // @ts-ignore
+      // @ts-expect-error
       ].old = backendPlaylist.value.find(song => song.$id === changesId)
     }
   }
@@ -136,7 +137,7 @@ function backendPlaylistPublishChanges (changesIds: Set<Song['$id']>) {
       })
   }
 
-  changesIds.forEach((changesId) => {
+  changesIds.forEach(changesId => {
     const changes = { ...viewPlaylistChangesData.value.find(_ => _.$id === changesId) }
 
     // New song - using a UUID for "$id" locally
@@ -146,19 +147,21 @@ function backendPlaylistPublishChanges (changesIds: Set<Song['$id']>) {
         // Save the ID generated by the backend for correct identifying of changes after the final refresh
         .then(res => cleanup(changesId, res.$id), err => fail(changesId, err))
         .finally(backendPlaylistRefreshIfAllPublishingFinished)
-    } else
+    }
+    else
 
     // Modify song
-    // @ts-ignore
+    // @ts-expect-error
     if (backendPlaylist.value.find(song => song.$id === changes.$id) && Object.keys(changes).length > 1) {
       delete changes.$id
       backendDatabases.updateDocument('home', 'playlist', changesId, changes)
         .then(() => cleanup(changesId), err => fail(changesId, err))
         .finally(backendPlaylistRefreshIfAllPublishingFinished)
-    } else
+    }
+    else
 
     // Delete song
-    // @ts-ignore
+    // @ts-expect-error
     if (backendPlaylist.value.find(song => song.$id === changes.$id) && Object.keys(changes).length === 1) {
       backendDatabases.deleteDocument('home', 'playlist', changesId)
         .then(() => cleanup(changesId), err => fail(changesId, err))
@@ -187,7 +190,8 @@ function viewPlaylistToggleSorting (column: PlaylistColumn) {
   if (viewPlaylistSortingColumn.value === null || column !== viewPlaylistSortingColumn.value) {
     viewPlaylistSortingColumn.value = column
     viewPlaylistSortingOrder.value = viewPlaylistSortingOrderOptions.value[0]
-  } else
+  }
+  else
   // Disable sorting because out of ordering options
   if (
     column === viewPlaylistSortingColumn.value &&
@@ -196,7 +200,8 @@ function viewPlaylistToggleSorting (column: PlaylistColumn) {
     viewPlaylistSortingColumn.value = null
     viewPlaylistSortingOrder.value = viewPlaylistSortingOrderOptions.value[0]
   // Rotate between ordering options
-  } else {
+  }
+  else {
     const sortingOrderOptionIndex: number =
       viewPlaylistSortingOrderOptions.value.findIndex(option => option === viewPlaylistSortingOrder.value) + 1 >
       viewPlaylistSortingOrderOptions.value.length - 1 ?
@@ -209,16 +214,18 @@ function viewPlaylistToggleSorting (column: PlaylistColumn) {
 
 const viewPlaylistChangesData = ref<Playlist>([])
 const viewPlaylistDataWithChanges = computed<Playlist>(() => {
-  // @ts-ignore
+  // @ts-expect-error
   const playlist: Playlist = backendPlaylist.value.slice()
   viewPlaylistChangesData.value.forEach((changes: Song) => {
     if (backendPlaylistPublishChangesState.value.find(_ => _.$id === changes.$id && _.state === 'succeeded')) { return }
     if (Object.keys(changes).length === 1 && Object.keys(changes)[0] === '$id') {
       playlist.splice(playlist.findIndex(song => song.$id === changes.$id), 1)
-    } else
+    }
+    else
     if (playlist.find(song => song.$id === changes.$id)) {
       playlist[playlist.findIndex(song => song.$id === changes.$id)] = changes
-    } else {
+    }
+    else {
       playlist.push(changes)
     }
   })
@@ -228,7 +235,8 @@ const viewPlaylistData = ref<Playlist>(viewPlaylistDataWithChanges.value)
 async function viewPlaylistDataUpdate () {
   if (viewPlaylistSortingColumn.value === null) {
     viewPlaylistData.value = viewPlaylistDataWithChanges.value
-  } else {
+  }
+  else {
     const playlist: Array<SortingSong> = viewPlaylistDataWithChanges.value.map(song => ({ ...song }))
     const orderModifier = viewPlaylistSortingOrder.value === 'ascending' ? 1 : -1
 
@@ -236,25 +244,28 @@ async function viewPlaylistDataUpdate () {
     if (viewPlaylistSortingColumn.value === 'name' || viewPlaylistSortingColumn.value === 'artist') {
       const pinyinPro = await import('pinyin-pro')
       playlist.forEach((song, index) => {
-        // @ts-ignore
+        // @ts-expect-error
         playlist[index][`${viewPlaylistSortingColumn.value}Pinyin`] =
-          // @ts-ignore
+          // @ts-expect-error
           pinyinPro.pinyin(song[viewPlaylistSortingColumn.value], { toneType: 'none', nonZh: 'consecutive' })
             .replaceAll(' ', '')
       })
       playlist.sort((a, b) => {
-        // @ts-ignore
+        // @ts-expect-error
         if (a[`${viewPlaylistSortingColumn.value}Pinyin`] < b[`${viewPlaylistSortingColumn.value}Pinyin`]) {
           return -1 * orderModifier
-        } else
-        // @ts-ignore
+        }
+        else
+        // @ts-expect-error
         if (a[`${viewPlaylistSortingColumn.value}Pinyin`] > b[`${viewPlaylistSortingColumn.value}Pinyin`]) {
           return 1 * orderModifier
-        } else {
+        }
+        else {
           return 0
         }
       })
-    } else
+    }
+    else
 
     // Sort by payment requirement
     if (viewPlaylistSortingColumn.value === 'payment_amount') {
@@ -264,7 +275,8 @@ async function viewPlaylistDataUpdate () {
         }
         return ((a.payment_amount ?? 0) - (b.payment_amount ?? 0)) * orderModifier
       })
-    } else
+    }
+    else
 
     // Sort by language
     if (viewPlaylistSortingColumn.value === 'language') {
@@ -287,50 +299,58 @@ function viewPlaylistStageChanges (changes: Song) {
     )
   }
 
-  // @ts-ignore
+  // @ts-expect-error
   const songUnmodified = backendPlaylist.value.find(song => song.$id === changes.$id)
   const changesStaged = viewPlaylistChangesData.value.find(song => song.$id === changes.$id)
 
   const changesFieldsAccepted: Set<keyof Song> = new Set(['$id', 'hidden', 'name', 'artist', 'payment_amount', 'language'])
 
   // New song
-  // @ts-ignore
   if (!songUnmodified && Object.keys(changes).length === changesFieldsAccepted.size) {
     const changesFields: Set<string> = new Set(Object.keys(changes))
     let changesFieldsFulfilled: boolean = true
-    changesFieldsAccepted.forEach((field) => {
+    changesFieldsAccepted.forEach(field => {
       if (!changesFields.has(field)) { changesFieldsFulfilled = false }
     })
     if (changesFieldsFulfilled) {
       changes.payment_required = Boolean(changes.payment_amount)
       viewPlaylistChangesData.value.push(changes)
     }
-  } else
+  }
+  else
 
   // Modify song
   if (viewPlaylistData.value.find(song => song.$id === changes.$id) && Object.keys(changes).length > 1) {
     if (changesStaged) {
       let diffFromStaged = false
       for (const field in changes) {
-        // @ts-ignore
-        if (field !== '$id' && changes[field] !== changesStaged[field]) { diffFromStaged = true; break }
+        // @ts-expect-error
+        if (field !== '$id' && changes[field] !== changesStaged[field]) {
+          diffFromStaged = true
+          break
+        }
       }
       if (diffFromStaged) {
         for (const field in changesStaged) {
-          // @ts-ignore
+          // @ts-expect-error
           if (field !== 'payment_required' && changes[field] === undefined) { changes[field] = changesStaged[field] }
         }
-      } else { return }
+      }
+      else { return }
     }
     let diffFromUnmodified = false
-    if (changes.$id.includes('-')) { diffFromUnmodified = true } else {
+    if (changes.$id.includes('-')) { diffFromUnmodified = true }
+    else {
       for (const field in changes) {
-      // @ts-ignore
-        if (field !== '$id' && changes[field] !== songUnmodified[field]) { diffFromUnmodified = true; break }
+      // @ts-expect-error
+        if (field !== '$id' && changes[field] !== songUnmodified[field]) {
+          diffFromUnmodified = true
+          break
+        }
       }
       if (!changesStaged && diffFromUnmodified) {
-        changesFieldsAccepted.forEach((field) => {
-        // @ts-ignore
+        changesFieldsAccepted.forEach(field => {
+        // @ts-expect-error
           if (field !== 'payment_required' && changes[field] === undefined) { changes[field] = songUnmodified[field] }
         })
       }
@@ -340,14 +360,17 @@ function viewPlaylistStageChanges (changes: Song) {
       changes.payment_required = Boolean(changes.payment_amount)
       if (changesStaged) {
         viewPlaylistChangesData.value[viewPlaylistChangesData.value.findIndex(_ => _.$id === changes.$id)] = changes
-      } else {
+      }
+      else {
         viewPlaylistChangesData.value.push(changes)
       }
-    } else
+    }
+    else
     if (changesStaged) {
       viewPlaylistChangesData.value.splice(viewPlaylistChangesData.value.findIndex(_ => _.$id === changes.$id), 1)
     }
-  } else
+  }
+  else
 
   // Delete song
   if (
@@ -357,17 +380,19 @@ function viewPlaylistStageChanges (changes: Song) {
   ) {
     if (!songUnmodified) {
       viewPlaylistChangesData.value.splice(viewPlaylistChangesData.value.findIndex(_ => _.$id === changes.$id), 1)
-    } else
+    }
+    else
     if (changesStaged) {
       viewPlaylistChangesData.value[viewPlaylistChangesData.value.findIndex(_ => _.$id === changes.$id)] = changes
-    } else {
+    }
+    else {
       viewPlaylistChangesData.value.push(changes)
     }
   }
 }
 
 function viewPlaylistUndoChanges (changesIds: Set<Song['$id']>) {
-  changesIds.forEach((changesId) => {
+  changesIds.forEach(changesId => {
     viewPlaylistChangesData.value.splice(
       viewPlaylistChangesData.value.findIndex(changes => changes.$id === changesId),
       1
@@ -377,10 +402,11 @@ function viewPlaylistUndoChanges (changesIds: Set<Song['$id']>) {
 
 function viewPlaylistClearPublishedChanges () {
   const stateCleaned: PlaylistPublishingState = []
-  backendPlaylistPublishChangesState.value.forEach((_) => {
+  backendPlaylistPublishChangesState.value.forEach(_ => {
     if (_.state === 'succeeded') {
       viewPlaylistChangesData.value.splice(viewPlaylistChangesData.value.findIndex(changes => changes.$id === _.$id), 1)
-    } else {
+    }
+    else {
       stateCleaned.push(_)
     }
   })
diff --git a/packages/admin/plugins/fontawesome.ts b/packages/admin/plugins/fontawesome.ts
index 85a816b..e35578e 100644
--- a/packages/admin/plugins/fontawesome.ts
+++ b/packages/admin/plugins/fontawesome.ts
@@ -7,7 +7,6 @@
  */
 
 import { library, config } from '@fortawesome/fontawesome-svg-core'
-// eslint-disable-next-line import/named
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 
 import {
@@ -56,6 +55,6 @@ library.add(
   faCloudArrowUp
 )
 
-export default defineNuxtPlugin((nuxtApp) => {
+export default defineNuxtPlugin(nuxtApp => {
   nuxtApp.vueApp.component('font-awesome-icon', FontAwesomeIcon)
 })
diff --git a/packages/home/app.vue b/packages/home/app.vue
index 18ca8a7..ad37be0 100644
--- a/packages/home/app.vue
+++ b/packages/home/app.vue
@@ -275,7 +275,6 @@ import { Client, Databases, Query } from 'appwrite'
 const { data: biliApiRoomPlayInfo } = await useFetch<{
   data: {
     live_status: 0 | 1
-    [key: string]: any
   }
 }>(
   useAppConfig().biliApiRoomPlayInfoEndpoint,
@@ -302,7 +301,7 @@ type Playlist = Array<Song>
 
 const { data: backendPlaylist } = await useAsyncData<Playlist>(
   'backend-databases-home-playlist',
-  // @ts-ignore
+  // @ts-expect-error
   () => backendDatabases.listDocuments('home', 'playlist', [
     useAppConfig().monitoringDataCollectorUserAgentMatch.test(useRequestHeader('user-agent') ?? '') ?
       Query.limit(1) :
@@ -343,7 +342,8 @@ function viewPlaylistToggleSorting (column: PlaylistColumn) {
   if (viewPlaylistSortingColumn.value === null || column !== viewPlaylistSortingColumn.value) {
     viewPlaylistSortingColumn.value = column
     viewPlaylistSortingOrder.value = viewPlaylistSortingOrderOptions.value[0]
-  } else
+  }
+  else
   // Disable sorting because out of ordering options
   if (
     column === viewPlaylistSortingColumn.value &&
@@ -351,8 +351,9 @@ function viewPlaylistToggleSorting (column: PlaylistColumn) {
   ) {
     viewPlaylistSortingColumn.value = null
     viewPlaylistSortingOrder.value = viewPlaylistSortingOrderOptions.value[0]
+  }
   // Rotate between ordering options
-  } else {
+  else {
     const sortingOrderOptionIndex: number =
       viewPlaylistSortingOrderOptions.value.findIndex(option => option === viewPlaylistSortingOrder.value) + 1 >
       viewPlaylistSortingOrderOptions.value.length - 1 ?
@@ -366,10 +367,10 @@ function viewPlaylistToggleSorting (column: PlaylistColumn) {
 const viewPlaylistData = useState<Playlist>('viewPlaylistData')
 const viewPlaylistDataShuffled = ref<Playlist>([])
 function viewPlaylistDataUpdate (tasks: Array<'shuffle' | 'sort'>) {
-  // @ts-ignore
+  // @ts-expect-error
   if (backendPlaylist.value.length !== 0) {
     function shuffle () {
-      // @ts-ignore
+      // @ts-expect-error
       const playlist = backendPlaylist.value.slice()
       let currentSong = playlist.length
       while (currentSong !== 0) {
@@ -384,7 +385,7 @@ function viewPlaylistDataUpdate (tasks: Array<'shuffle' | 'sort'>) {
     }
 
     async function sort () {
-      // @ts-ignore
+      // @ts-expect-error
       const playlist: Array<SortingSong> = backendPlaylist.value.slice()
       const orderModifier = viewPlaylistSortingOrder.value === 'ascending' ? 1 : -1
 
@@ -392,25 +393,28 @@ function viewPlaylistDataUpdate (tasks: Array<'shuffle' | 'sort'>) {
       if (viewPlaylistSortingColumn.value === 'name' || viewPlaylistSortingColumn.value === 'artist') {
         const pinyinPro = await import('pinyin-pro')
         playlist.forEach((song, index) => {
-          // @ts-ignore
+          // @ts-expect-error
           playlist[index][`${viewPlaylistSortingColumn.value}Pinyin`] =
-            // @ts-ignore
+            // @ts-expect-error
             pinyinPro.pinyin(song[viewPlaylistSortingColumn.value], { toneType: 'none', nonZh: 'consecutive' })
               .replaceAll(' ', '')
         })
         playlist.sort((a, b) => {
-          // @ts-ignore
+          // @ts-expect-error
           if (a[`${viewPlaylistSortingColumn.value}Pinyin`] < b[`${viewPlaylistSortingColumn.value}Pinyin`]) {
             return -1 * orderModifier
-          } else
-          // @ts-ignore
+          }
+          else
+          // @ts-expect-error
           if (a[`${viewPlaylistSortingColumn.value}Pinyin`] > b[`${viewPlaylistSortingColumn.value}Pinyin`]) {
             return 1 * orderModifier
-          } else {
+          }
+          else {
             return 0
           }
         })
-      } else
+      }
+      else
 
       // Sort by payment requirement
       if (viewPlaylistSortingColumn.value === 'payment_amount') {
@@ -420,7 +424,8 @@ function viewPlaylistDataUpdate (tasks: Array<'shuffle' | 'sort'>) {
           }
           return ((a.payment_amount ?? 0) - (b.payment_amount ?? 0)) * orderModifier
         })
-      } else
+      }
+      else
 
       // Sort by language
       if (viewPlaylistSortingColumn.value === 'language') {
@@ -441,7 +446,8 @@ function viewPlaylistDataUpdate (tasks: Array<'shuffle' | 'sort'>) {
         viewPlaylistSortingColumn.value = null
         viewPlaylistDataUpdate(['sort'])
         viewPlaylistData.value = viewPlaylistDataShuffled.value
-      } else
+      }
+      else
       if (task === 'sort') {
         if (index !== tasks.length - 1) { return }
         viewPlaylistData.value = viewPlaylistSortingColumn.value === null ? viewPlaylistDataShuffled.value : await sort()
@@ -450,7 +456,7 @@ function viewPlaylistDataUpdate (tasks: Array<'shuffle' | 'sort'>) {
   }
 }
 callOnce(() => viewPlaylistDataUpdate(['shuffle']))
-if (process.client && useNuxtApp().isHydrating && useNuxtApp().payload.serverRendered) {
+if (import.meta.client && useNuxtApp().isHydrating && useNuxtApp().payload.serverRendered) {
   viewPlaylistDataShuffled.value = viewPlaylistData.value
 }
 
@@ -475,7 +481,7 @@ function viewPlaylistCopySongName (name: Song['name'], id: Song['$id']) {
   )
 }
 
-// @ts-ignore
+// @ts-expect-error
 const viewPlaylistCountTotal = computed<number>(() => backendPlaylist.value.length)
 const viewPlaylistCountDisplayed = computed<number>(() => viewPlaylistData.value.length)
 </script>
diff --git a/packages/home/ecosystem.config.js b/packages/home/ecosystem.config.js
index 14ba4ca..eacb620 100644
--- a/packages/home/ecosystem.config.js
+++ b/packages/home/ecosystem.config.js
@@ -15,7 +15,7 @@ module.exports = {
       port: 12320,
       max_memory_restart: '200M',
       env: {
-        'NITRO_PORT': 12320
+        NITRO_PORT: 12320
       }
     }
   ]
diff --git a/packages/home/nuxt.config.ts b/packages/home/nuxt.config.ts
index e2e5016..0eba7a2 100644
--- a/packages/home/nuxt.config.ts
+++ b/packages/home/nuxt.config.ts
@@ -30,20 +30,22 @@ export default defineNuxtConfig({
     }
   },
 
-  build: {
-    transpile: ['@fortawesome/vue-fontawesome']
-  },
-
   css: [
     '@/../../assets/css/main.css',
     '@fortawesome/fontawesome-svg-core/styles.css'
   ],
 
+  build: {
+    transpile: ['@fortawesome/vue-fontawesome']
+  },
+
   devServer: {
     host: '0.0.0.0'
   },
 
-  devtools: false,
+  devtools: {
+    enabled: false
+  },
 
   nitro: {
     preset: 'bun'
@@ -51,8 +53,8 @@ export default defineNuxtConfig({
 
   postcss: {
     plugins: {
-      'tailwindcss': {},
-      'autoprefixer': {}
+      tailwindcss: {},
+      autoprefixer: {}
     }
   }
 })
diff --git a/packages/home/plugins/fontawesome.ts b/packages/home/plugins/fontawesome.ts
index 704ccac..28aa74c 100644
--- a/packages/home/plugins/fontawesome.ts
+++ b/packages/home/plugins/fontawesome.ts
@@ -7,7 +7,6 @@
  */
 
 import { library, config } from '@fortawesome/fontawesome-svg-core'
-// eslint-disable-next-line import/named
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 
 import {
@@ -44,6 +43,6 @@ library.add(
   faDice
 )
 
-export default defineNuxtPlugin((nuxtApp) => {
+export default defineNuxtPlugin(nuxtApp => {
   nuxtApp.vueApp.component('font-awesome-icon', FontAwesomeIcon)
 })