vue 3

Author: tamland

.eslintrc.js

@@ -4,7 +4,7 @@ module.exports = {
     node: true
   },
   extends: [
-    'plugin:vue/recommended',
+    'plugin:vue/vue3-recommended',
     'eslint:recommended',
     '@vue/standard',
     '@vue/typescript',

package.json

@@ -9,23 +9,24 @@
   },
   "dependencies": {
     "@iconify-icons/bi": "^1.2.2",
+    "@ts-pro/vue-eternal-loading": "^1.1.1",
     "@vueuse/core": "^11.1.0",
     "bootstrap": "^5.3.3",
-    "bootstrap-vue": "^2.23.1",
+    "bootstrap-vue-next": "^0.26.28",
     "icecast-metadata-stats": "^0.1.1",
     "lodash-es": "^4.17.21",
     "md5-es": "^1.8.2",
-    "pinia": "^2.0.28",
-    "vue": "^2.7.0",
+    "pinia": "^3.0.1",
+    "vue": "^3.2.31",
     "vue-infinite-loading": "^2.4.5",
-    "vue-router": "^3.5.2",
-    "vue-slider-component": "^3.2.22"
+    "vue-router": "^4.0.0",
+    "vue-slider-component": "^4.1.0-beta.7"
   },
   "devDependencies": {
     "@types/lodash-es": "^4.17.6",
     "@typescript-eslint/eslint-plugin": "^5.18.0",
     "@typescript-eslint/parser": "^5.18.0",
-    "@vitejs/plugin-vue2": "^2.3.3",
+    "@vitejs/plugin-vue": "^5.2.1",
     "@vue/eslint-config-standard": "^8.0.1",
     "@vue/eslint-config-typescript": "^11.0.2",
     "autoprefixer": "^10.4.20",
@@ -39,7 +40,7 @@
     "sass": "^1.34.0",
     "typescript": "^5.0.4",
     "vite": "^6.1.0",
-    "vite-plugin-checker": "^0.8.0",
+    "vite-plugin-checker": "^0.9.0",
     "vue-tsc": "^2.2.2"
   },
   "postcss": {

src/app/ErrorToast.vue

@@ -18,7 +18,7 @@
 <script lang="ts">
   import { computed, defineComponent } from 'vue'
   import { useMainStore } from '@/shared/store'
-  import { BToast } from 'bootstrap-vue'
+  import { BToast } from 'bootstrap-vue-next'
 
   export default defineComponent({
     components: {

src/auth/Login.vue

@@ -43,7 +43,7 @@
   import Logo from '@/app/Logo.vue'
   import { useMainStore } from '@/shared/store'
   import { useAuth } from '@/auth/service'
-  import { BOverlay } from 'bootstrap-vue'
+  import { BOverlay } from 'bootstrap-vue-next'
 
   export default defineComponent({
     components: {

src/auth/service.ts

@@ -1,7 +1,6 @@
 import { md5, randomString, toQueryString } from '@/shared/utils'
 import { config } from '@/shared/config'
-import { inject } from 'vue'
-import { App, PluginObject } from '@/shared/compat'
+import { App, Plugin, inject } from 'vue'
 import { pickBy } from 'lodash-es'
 
 type Auth = { password?: string, salt?: string, hash?: string }
@@ -144,7 +143,7 @@ export function useAuth(): AuthService {
   return inject(apiSymbol) as AuthService
 }
 
-export function createAuth(): AuthService & PluginObject<never> {
+export function createAuth(): AuthService & Plugin {
   const instance = new AuthService()
   return Object.assign(instance, {
     install: (app: App) => {

src/global.d.ts

@@ -2,3 +2,4 @@ declare module '*.svg';
 declare module 'md5-es';
 declare module 'vue-slider-component';
 declare module 'icecast-metadata-stats';
+declare module 'bootstrap-vue-next';

src/library/album/AlbumList.vue

@@ -8,9 +8,9 @@
       :draggable="true" @dragstart="dragstart(item.id, $event)"
     >
       <template #text>
-        <template v-for="(artist, index) in item.artists">
+        <template v-for="(artist, index) in item.artists" :key="artist.id">
           <span v-if="index > 0" :key="artist.id" class="text-muted">, </span>
-          <router-link :key="`${artist.id}-link`" :to="{name: 'artist', params: { id: artist.id }}" class="text-muted">
+          <router-link :to="{name: 'artist', params: { id: artist.id }}" class="text-muted">
             {{ artist.name }}
           </router-link>
         </template>

src/library/artist/ArtistList.vue

@@ -1,6 +1,6 @@
-<template functional>
+<template>
   <Tiles>
-    <Tile v-for="item in props.items" :key="item.id"
+    <Tile v-for="item in $attrs.items" :key="item.id"
           :to="{name: 'artist', params: { id: item.id } }"
           :title="item.name" :image="item.image">
       <template #text>

src/library/favourite/store.ts

@@ -1,4 +1,3 @@
-import Vue from 'vue'
 import { defineStore } from 'pinia'
 
 type MediaType = 'track' | 'album' | 'artist'
@@ -20,10 +19,11 @@ export const useFavouriteStore = defineStore('favourite', {
     toggle(type: MediaType, id: string) {
       const field = getTypeKey(type)
       if (this[field][id]) {
-        Vue.delete(this[field], id)
+        // TODO
+        delete this[field][id]
         return this.api.removeFavourite(id, type)
       } else {
-        Vue.set(this[field], id, true)
+        this[field][id] = true
         return this.api.addFavourite(id, type)
       }
     },

src/library/radio/RadioStations.vue

@@ -23,7 +23,7 @@
     <EmptyIndicator v-else-if="unsupported" label="Not supported" />
     <EmptyIndicator v-else />
 
-    <EditModal :visible.sync="modalVisible" :item="editItem" @confirm="saveRadioStation">
+    <EditModal v-model:visible="modalVisible" :item="editItem" @confirm="saveRadioStation">
       <template #title="{ item }">
         {{ item?.id ? "Edit" : "Add" }} Radio Station
       </template>

src/library/track/BaseTable.vue

@@ -1,4 +1,4 @@
-<template functional>
+<template>
   <table class="table table-hover table-borderless table-numbered">
     <slot />
   </table>

src/library/track/BaseTableHead.vue

@@ -1,4 +1,4 @@
-<template functional>
+<template>
   <thead>
     <tr>
       <th>#</th>

src/library/track/CellAlbum.vue

@@ -1,12 +1,12 @@
-<template functional>
+<template>
   <td class="d-none d-md-table-cell">
-    <template v-if="props.track.albumId">
-      <router-link :to="{name: 'album', params: {id: props.track.albumId}}" @click.native.stop>
-        {{ props.track.album }}
+    <template v-if="$attrs.track.albumId">
+      <router-link :to="{name: 'album', params: {id: $attrs.track.albumId}}" @click.stop>
+        {{ $attrs.track.album }}
       </router-link>
     </template>
     <template v-else>
-      {{ props.track.album }}
+      {{ $attrs.track.album }}
     </template>
   </td>
 </template>

src/library/track/CellArtist.vue

@@ -1,8 +1,8 @@
-<template functional>
+<template>
   <td class="d-none d-lg-table-cell">
-    <template v-for="(artist, index) in props.track.artists">
+    <template v-for="(artist, index) in $attrs.track.artists" :key="artist.id">
       <span v-if="index > 0" :key="artist.id">, </span>
-      <router-link v-if="artist.id" :key="`${artist.id}-link`" :to="{name: 'artist', params: { id: artist.id }}">
+      <router-link v-if="artist.id" :to="{name: 'artist', params: { id: artist.id }}">
         {{ artist.name }}
       </router-link>
       <template v-else>

src/library/track/CellTrackNumber.vue

@@ -1,8 +1,8 @@
-<template functional>
+<template>
   <td>
     <button>
-      <Icon class="icon" :icon="props.active ? 'pause' :'play'" />
-      <span class="number">{{ props.value || '-' }}</span>
+      <Icon class="icon" :icon="$attrs.active ? 'pause' :'play'" />
+      <span class="number">{{ $attrs.value || '-' }}</span>
     </button>
   </td>
 </template>

src/main.ts

@@ -1,21 +1,20 @@
+import { createApp, markRaw, watch } from 'vue'
 import '@/style/main.scss'
-import Vue, { markRaw, watch } from 'vue'
-import Router from 'vue-router'
 import AppComponent from '@/app/App.vue'
-import { createApp } from '@/shared/compat'
 import { components } from '@/shared/components'
 import { setupRouter } from '@/shared/router'
 import { useMainStore } from '@/shared/store'
 import { API } from '@/shared/api'
 import { createAuth } from '@/auth/service'
 import { setupAudio, usePlayerStore } from './player/store'
 import { createApi } from '@/shared'
-import { createPinia, PiniaVuePlugin } from 'pinia'
+import { createPinia } from 'pinia'
 import { useFavouriteStore } from '@/library/favourite/store'
 import { usePlaylistStore } from '@/library/playlist/store'
 
-declare module 'vue/types/vue' {
-  interface Vue {
+declare module '@vue/runtime-core' {
+  interface ComponentCustomProperties {
+    $router: typeof router
     $api: API
   }
 }
@@ -26,17 +25,12 @@ declare module 'pinia' {
   }
 }
 
-Vue.use(Router)
-Vue.use(PiniaVuePlugin)
-
 const auth = createAuth()
 const api = createApi(auth)
 const router = setupRouter(auth)
 
 const pinia = createPinia()
-  .use(({ store }) => {
-    store.api = markRaw(api)
-  })
+  .use(() => ({ api: markRaw(api) }))
 
 const mainStore = useMainStore(pinia)
 const playerStore = usePlayerStore(pinia)
@@ -50,7 +44,8 @@ watch(
       return Promise.all([
         useFavouriteStore().load(),
         usePlaylistStore().load(),
-        playerStore.loadQueue(),
+        // TODO
+        // playerStore.loadQueue(),
       ])
     }
   })
@@ -60,14 +55,16 @@ router.beforeEach((to, from, next) => {
   next()
 })
 
-const app = createApp(AppComponent, { router, pinia, store: playerStore })
+const app = createApp(AppComponent)
 
-app.config.errorHandler = (err: Error) => {
+app.config.errorHandler = (err) => {
   // eslint-disable-next-line
   console.error(err)
-  mainStore.setError(err)
+  mainStore.setError(err as Error)
 }
 
+app.use(pinia)
+app.use(router)
 app.use(auth)
 app.use(api)
 

src/player/Player.vue

@@ -135,7 +135,7 @@
   import ProgressBar from '@/player/ProgressBar.vue'
   import { useFavouriteStore } from '@/library/favourite/store'
   import { formatArtists } from '@/shared/utils'
-  import { BPopover } from 'bootstrap-vue'
+  import { BPopover } from 'bootstrap-vue-next'
   import SwitchInput from '@/shared/components/SwitchInput.vue'
   import IconReplayGain from '@/shared/components/IconReplayGain.vue'
   import IconReplayGainTrack from '@/shared/components/IconReplayGainTrack.vue'

src/shared/compat.ts

@@ -1,4 +1,4 @@
-<template functional>
+<template>
   <span class="bg-secondary text-white rounded-circle avatar">
     <slot />
   </span>

src/shared/components/Avatar.vue

@@ -1,6 +1,6 @@
-<template functional>
+<template>
   <div>
-    <div v-if="props.loading" class="d-flex justify-content-center">
+    <div v-if="$attrs.loading" class="d-flex justify-content-center">
       <span class="spinner-border" />
     </div>
     <slot v-else />

src/shared/components/ContentLoader.vue

@@ -12,7 +12,7 @@
   </div>
 </template>
 <script lang="ts">
-  import Vue, { defineComponent } from 'vue'
+  import { defineComponent } from 'vue'
 
   export default defineComponent({
     data() {
@@ -25,7 +25,7 @@
     watch: {
       visible: {
         handler(value: boolean) {
-          Vue.set((this.$refs.dropdown as any), 'visible', value)
+          (this.$refs.dropdown as any).visible = value
         }
       }
     },

src/shared/components/ContextMenu.vue

@@ -5,7 +5,7 @@
       'd-flex justify-content-between align-items-center text-nowrap',
       {[`dropdown-item-${variant}`]: variant}
     ]"
-    v-on="$listeners"
+    v-bind="$attrs"
   >
     <slot>
       {{ text }}

src/shared/components/ContextMenuItem.vue

@@ -1,9 +1,9 @@
-<template functional>
+<template>
   <div class="d-flex flex-column align-items-center pt-5">
     <Icon icon="stack" class="empty-icon" />
     <div class="mt-4 text-muted">
       <slot>
-        {{ props.label || 'Empty' }}
+        {{ $attrs.label || 'Empty' }}
       </slot>
     </div>
   </div>

src/shared/components/EmptyIndicator.vue

@@ -1,9 +1,9 @@
-<template functional>
-  <a :href="props.href"
+<template>
+  <a :href="$attrs.href"
      target="_blank"
      rel="noopener noreferrer"
-     :class="[data.class, data.staticClass]"
-     v-bind="data.attrs"
+     :class="[$data.class, $data.staticClass]"
+     v-bind="$data.attrs"
   >
     <slot />
   </a>