2 to 3 Migration – A Practical Journey

// App.ts
import { createApp } from 'vue'
import { clickaway, droppable, focus } from '@/directives'
import App from './App.vue'

createApp(App)
  .directive('koel-focus', focus)
  .directive('koel-clickaway', clickaway)
  .directive('koel-droppable', droppable)
  .mount('#app')

// App.ts
import Vue, { VNode, CreateElement } from 'vue'
import { clickaway, droppable, focus } from '@/directives'
import App from './app.vue'

Vue.config.productionTip = false

new Vue({
  el: '#app',
  render: (h: CreateElement): VNode => h(App)
})

Vue.directive('koel-focus', focus)
Vue.directive('koel-clickaway', clickaway)
Vue.directive('koel-droppable', droppable)

// eventBus.ts
export const eventBus = {
  all: new Map(),

  on (name: string, cb: Function) {
    this.all.has(name) ? this.all.get(name).push(cb) : this.all.set(name, [cb])
    return this
  },

  emit (name: string, ...args: any) {
    this.all.get(name)?.forEach((cb: Function) => cb(...args))
    return this
  }
}

// App.vue
import { eventBus } from '@/utils'


eventBus.on('KOEL_READY', () => initEqualizer())
eventBus.emit('KOEL_READY')

// eventBus.ts
import Vue from 'vue'

export const eventBus = {
  bus: new Vue(),
  
  on (name: string, cb: Function) {
    this.bus.$on(name, cb)
    return this
  },
 
  emit (name: string, ...args: any) {
    this.bus.$emit(name, ...args)
    return this
  }
}

// SongStore.ts
import Vue from 'vue'

Vue.set(song, 'lyrics', '')
Vue.set(song, 'playCount', 0)
Vue.set(song, 'liked', false)
Vue.set(song, 'playbackState', 'Stopped')

// SongStore.ts
import { reactive } from 'vue'

const song = reactive(fetchedData)

song.lyrics = ''
song.playCount = 0
song.liked = false
song.playbackState = 'Stopped'

// mixins/SongMenu.ts
export default Vue.extend({
  props: {
    songs: {
      type: Array,
      required: true
    } as PropOptions<Song[]>
  },

  methods: {
    queueSongsAfterCurrent () {
      queueStore.queueAfterCurrent(this.songs)
    },

    queueSongsToBottom () {
      queueStore.queue(this.songs)
    },

    queueSongsToTop () {
      queueStore.queueToTop(this.songs)
    },

    addSongsToFavorite () {
      favoriteStore.like(this.songs)
    },

    addSongsToExistingPlaylist (playlist: Playlist) {
      playlistStore.addSongs(playlist, this.songs)
    }
  }
})

// composables/useSongMenu.ts
export const useSongMenu = (songs: Ref<Song[]>) => {
  const queueSongsAfterCurrent = () => queueStore.queueAfterCurrent(songs.value)
  const queueSongsToBottom = () => queueStore.queue(songs.value)
  const queueSongsToTop = () => queueStore.queueToTop(songs.value)
  const addSongsToFavorite = () => favoriteStore.like(songs.value)
  const addSongsToExistingPlaylist = (playlist: Playlist) => playlistStore.addSongs(playlist, songs.value)

  return {
    queueSongsAfterCurrent,
    queueSongsToBottom,
    queueSongsToTop,
    addSongsToFavorite,
    addSongsToExistingPlaylist
  }
}

// ModalWrapper.vue
import Vue from 'vue'

export default Vue.extend({
  components: {
    CreateSmartPlaylistForm: () => import('@/components/CreateSmartPlayListForm.vue'),
    EditSmartPlaylistForm: () => import('@/components/EditSmartPlayListForm.vue'),
    AddUserForm: () => import('@/components/AddUserForm.vue'),
    EditUserForm: () => import('@/components/EditUserForm.vue'),
    EditSongForm: () => import('@/components/EditSongForm.vue'),
    AboutDialog: () => import('@/components/AboutDialog.vue')
  }
})

// ModalWrapper.vue
import { defineAsyncComponent } from 'vue'

const CreateSmartPlaylistForm = defineAsyncComponent(() => import('@/components/CreateSmartPlaylistForm.vue'))
const EditSmartPlaylistForm = defineAsyncComponent(() => import('@/components/EditSmartPlaylistForm.vue'))
const AddUserForm = defineAsyncComponent(() => import('@/components/AddUserForm.vue'))
const EditUserForm = defineAsyncComponent(() => import('@/components/EditUserForm.vue'))
const EditSongForm = defineAsyncComponent(() => import('@/components/EditSongForm..vue'))
const AboutKoel = defineAsyncComponent(() => import('@/components/AboutKoel.vue'))

<!-- YouTubeVideoItem.vue -->
<script lang="ts">
import Vue, { PropOptions } from 'vue'
import { youtubeService } from '@/services'

export default Vue.extend({
  props: {
    video: {
      type: Object,
      required: true
    } as PropOptions<YouTubeVideo>
  },
  
  computed: {
    url (): string {
      return `https://youtu.be/${this.video.id.videoId}`)
    }
  },

  methods: {
    play: (video: YouTubeVideo) => youtubeService.play(video)
  }
})
</script>

<!-- YouTubeVideoItem.vue -->
<script lang="ts" setup>
import { computed, toRefs } from 'vue'
import { youTubeService } from '@/services'

const props = defineProps<{ video: YouTubeVideo }>()
const { video } = toRefs(props)

const url = computed(() => `https://youtu.be/${video.value.id.videoId}`)

const play = () => youTubeService.play(video.value)
</script>

<template>
  <a :href="url" @click.prevent="play">
    <img :src="video.snippet.thumbnails.default.url">
    <h3>{{ video.snippet.title }}</h3>
    <p>{{ video.snippet.description }}</p>
  </a>
</template>

// ViewModeSwitch.vue
props: {
  value: {
    type: String as PropType<ViewMode>
  }
},

data: () => ({
  mutatedValue: null as ViewMode | null
}),

watch: {
  value (mode: ViewMode) {
    this.mutatedValue = mode
  }
},

methods: {
  onInput (e: InputEvent): void {
    this.$emit('input', (e.target as HTMLInputElement).value)
  }
}

<!-- ArtistsScreen.vue -->
<ViewModeSwitch v-model="viewMode"/>

<!-- FullName.vue -->
<script setup>
defineProps({ firstName: String, lastName: String })
defineEmits(['update:firstName', 'update:lastName'])
</script>

<template>
  <input
    type="text"
    :value="firstName"
    @input="$emit('update:firstName', $event.target.value)"
  />
  <input
    type="text"
    :value="lastName"
    @input="$emit('update:lastName', $event.target.value)"
  />
</template>