Vue3 Migration

.eslintrc.js

@@ -44,7 +44,7 @@ module.exports = {
   extends: [
     'prettier',
     'eslint:recommended',
-    'plugin:vue/recommended',
+    'plugin:vue/vue3-recommended',
     'standard',
     'plugin:jsonc/recommended-with-json',
     'plugin:vuejs-accessibility/recommended'

_scripts/webpack.main.config.js

@@ -36,6 +36,8 @@ const config = {
   },
   plugins: [
     new webpack.DefinePlugin({
+      '__VUE_PROD_DEVTOOLS__': true,
+      '__VUE_OPTIONS_API__': true,
       'process.env.IS_ELECTRON_MAIN': true
     })
   ],

_scripts/webpack.renderer.config.js

@@ -2,7 +2,7 @@ const path = require('path')
 const { readFileSync } = require('fs')
 const webpack = require('webpack')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
-const VueLoaderPlugin = require('vue-loader/lib/plugin')
+const { VueLoaderPlugin } = require('vue-loader')
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
 const ProcessLocalesPlugin = require('./ProcessLocalesPlugin')
@@ -115,6 +115,8 @@ const config = {
   plugins: [
     processLocalesPlugin,
     new webpack.DefinePlugin({
+      '__VUE_PROD_DEVTOOLS__': true,
+      '__VUE_OPTIONS_API__': true,
       'process.env.IS_ELECTRON': true,
       'process.env.IS_ELECTRON_MAIN': false,
       'process.env.LOCALE_NAMES': JSON.stringify(processLocalesPlugin.localeNames)
@@ -147,7 +149,7 @@ const config = {
   ],
   resolve: {
     alias: {
-      vue$: 'vue/dist/vue.runtime.esm.js',
+      vue$: 'vue/dist/vue.runtime.esm-bundler.js',
 
       'youtubei.js$': 'youtubei.js/web',
 

_scripts/webpack.web.config.js

@@ -2,7 +2,7 @@ const path = require('path')
 const fs = require('fs')
 const webpack = require('webpack')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
-const VueLoaderPlugin = require('vue-loader/lib/plugin')
+const { VueLoaderPlugin } = require('vue-loader')
 const CopyWebpackPlugin = require('copy-webpack-plugin')
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const JsonMinimizerPlugin = require('json-minimizer-webpack-plugin')
@@ -112,6 +112,8 @@ const config = {
   },
   plugins: [
     new webpack.DefinePlugin({
+      '__VUE_PROD_DEVTOOLS__': true,
+      '__VUE_OPTIONS_API__': true,
       'process.env.IS_ELECTRON': false,
       'process.env.IS_ELECTRON_MAIN': false,
 
@@ -156,8 +158,6 @@ const config = {
   ],
   resolve: {
     alias: {
-      vue$: 'vue/dist/vue.runtime.esm.js',
-
       // video.js's mpd-parser uses @xmldom/xmldom so that it can support both node and web browsers
       // As FreeTube only runs in electron and web browsers, we can use the native DOMParser class, instead of the "polyfill"
       // https://caniuse.com/mdn-api_domparser

jsconfig.json

@@ -1,5 +1,5 @@
 {
   "vueCompilerOptions": {
-    "target": 2.7
+    "target": 3.0
   }
 }

package.json

@@ -56,7 +56,7 @@
     "@fortawesome/fontawesome-svg-core": "^6.5.1",
     "@fortawesome/free-brands-svg-icons": "^6.5.1",
     "@fortawesome/free-solid-svg-icons": "^6.5.1",
-    "@fortawesome/vue-fontawesome": "^2.0.10",
+    "@fortawesome/vue-fontawesome": "^3.0.5",
     "@seald-io/nedb": "^4.0.3",
     "@silvermine/videojs-quality-selector": "^1.3.1",
     "autolinker": "^4.0.0",
@@ -72,11 +72,11 @@
     "videojs-mobile-ui": "^0.8.0",
     "videojs-overlay": "^3.1.0",
     "videojs-vtt-thumbnails-freetube": "0.0.15",
-    "vue": "^2.7.15",
-    "vue-i18n": "^8.28.2",
-    "vue-observe-visibility": "^1.0.0",
-    "vue-router": "^3.6.5",
-    "vuex": "^3.6.2",
+    "vue": "^3.3.10",
+    "vue-i18n": "^9.8.0",
+    "vue-observe-visibility": "^2.0.0-alpha.1",
+    "vue-router": "^4.2.5",
+    "vuex": "^4.1.0",
     "youtubei.js": "^7.0.0"
   },
   "devDependencies": {
@@ -123,7 +123,7 @@
     "tree-kill": "1.2.2",
     "vue-devtools": "^5.1.4",
     "vue-eslint-parser": "^9.3.2",
-    "vue-loader": "^15.10.0",
+    "vue-loader": "^17.3.1",
     "webpack": "^5.89.0",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^4.15.1",

src/renderer/App.js

@@ -1,6 +1,5 @@
-import Vue, { defineComponent } from 'vue'
+import { defineComponent } from 'vue'
 import { mapActions, mapMutations } from 'vuex'
-import { ObserveVisibility } from 'vue-observe-visibility'
 import FtFlexBox from './components/ft-flex-box/ft-flex-box.vue'
 import TopNav from './components/top-nav/top-nav.vue'
 import SideNav from './components/side-nav/side-nav.vue'
@@ -16,8 +15,6 @@ import { openExternalLink, openInternalPath, showToast } from './helpers/utils'
 
 let ipcRenderer = null
 
-Vue.directive('observe-visibility', ObserveVisibility)
-
 export default defineComponent({
   name: 'App',
   components: {
@@ -68,7 +65,7 @@ export default defineComponent({
     },
     windowTitle: function () {
       const routeTitle = this.$route.meta.title
-      if (routeTitle !== 'Channel' && routeTitle !== 'Watch' && routeTitle !== 'Hashtag') {
+      if (routeTitle !== 'Channel' && routeTitle !== 'Watch' && routeTitle !== 'Hashtag' && routeTitle) {
         let title =
         this.$route.meta.path === '/home'
           ? packageDetails.productName
@@ -182,11 +179,9 @@ export default defineComponent({
         this.$refs.topNav?.navigateHistory()
       })
 
-      this.$router.onReady(() => {
-        if (this.$router.currentRoute.path === '/' && this.landingPage !== '/subscriptions') {
-          this.$router.replace({ path: this.landingPage })
-        }
-      })
+      if (this.$router.currentRoute.path === '/' && this.landingPage !== '/subscriptions') {
+        this.$router.replace({ path: this.landingPage })
+      }
     })
   },
   methods: {

src/renderer/App.vue

@@ -32,18 +32,17 @@
           @click="handleNewBlogBannerClick"
         />
       </div>
-      <transition
-        v-if="dataReady"
-        mode="out-in"
-        name="fade"
+      <!-- <keep-alive> -->
+      <RouterView
+        ref="router"
+        v-slot="{ Component }"
+        class="routerView"
       >
-        <!-- <keep-alive> -->
-        <RouterView
-          ref="router"
-          class="routerView"
-        />
+        <transition>
+          <component :is="Component" />
+        </transition>
+      </RouterView>
       <!-- </keep-alive> -->
-      </transition>
     </ft-flex-box>
 
     <ft-prompt

src/renderer/components/ft-button/ft-button.js

@@ -19,5 +19,11 @@ export default defineComponent({
       type: String,
       default: ''
     }
+  },
+  emits: ['click'],
+  methods: {
+    click: function() {
+      this.$emit('click')
+    }
   }
 })

src/renderer/components/ft-button/ft-button.vue

@@ -7,7 +7,7 @@
       backgroundColor: backgroundColor,
       border: `2px solid ${backgroundColor}`
     }"
-    @click="$emit('click')"
+    @click="click"
   >
     <slot>
       {{ label }}

src/renderer/components/ft-card/ft-card.js

@@ -1,5 +1,11 @@
 import { defineComponent } from 'vue'
 
 export default defineComponent({
-  name: 'FtCard'
+  name: 'FtCard',
+  emits: ['focusout'],
+  methods: {
+    focusOut: function () {
+      this.$emit('focusout')
+    }
+  }
 })

src/renderer/components/ft-card/ft-card.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     class="ft-card"
-    @focusout="$emit('focusout')"
+    @focusout="focusout"
   >
     <slot />
   </div>

src/renderer/components/ft-channel-bubble/ft-channel-bubble.js

@@ -20,6 +20,7 @@ export default defineComponent({
       default: false
     }
   },
+  emits: ['click'],
   data: function () {
     return {
       selected: false

src/renderer/components/ft-icon-button/ft-icon-button.js

@@ -61,6 +61,7 @@ export default defineComponent({
       default: false
     }
   },
+  emits: ['click'],
   data: function () {
     return {
       dropdownShown: false,
@@ -74,7 +75,7 @@ export default defineComponent({
       window.addEventListener('resize', this.handleResize)
     }
   },
-  beforeDestroy: function () {
+  beforeUnmount: function () {
     if (this.dropdownModalOnMobile) {
       window.removeEventListener('resize', this.handleResize)
     }

src/renderer/components/ft-input-tags/ft-input-tags.js

@@ -44,6 +44,7 @@ export default defineComponent({
       default: (_) => ({ preferredName: '', icon: '' }),
     }
   },
+  emits: ['invalid-name', 'error-find-tag-info', 'change', 'already-exists'],
   methods: {
     updateTags: async function (text, _e) {
       // get text without spaces after last '/' in url, if any

src/renderer/components/ft-input/ft-input.js

@@ -63,6 +63,7 @@ export default defineComponent({
       default: ''
     }
   },
+  emits: ['input', 'click', 'clear'],
   data: function () {
     let actionIcon = ['fas', 'search']
     if (this.forceActionButtonIconName !== null) {
@@ -136,7 +137,7 @@ export default defineComponent({
     }
   },
   mounted: function () {
-    this.id = this._uid
+    this.id = this._.uid
     this.inputData = this.value
     this.updateVisibleDataList()
   },

src/renderer/components/ft-list-video-lazy/ft-list-video-lazy.js

@@ -48,6 +48,7 @@ export default defineComponent({
       default: false,
     },
   },
+  emits: ['pause-player'],
   data: function () {
     return {
       visible: false
@@ -80,6 +81,9 @@ export default defineComponent({
       if (visible && this.shouldBeVisible) {
         this.visible = visible
       }
+    },
+    pausePlayer: function () {
+      this.$emit('pause-player')
     }
   }
 })

src/renderer/components/ft-list-video-lazy/ft-list-video-lazy.vue

@@ -15,7 +15,7 @@
       :playlist-loop="playlistLoop"
       :force-list-type="forceListType"
       :appearance="appearance"
-      @pause-player="$emit('pause-player')"
+      @pause-player="pausePlayer"
     />
   </div>
 </template>

src/renderer/components/ft-list-video/ft-list-video.js

@@ -55,6 +55,7 @@ export default defineComponent({
       default: false
     },
   },
+  emits: ['pause-player'],
   data: function () {
     return {
       id: '',

src/renderer/components/ft-notification-banner/ft-notification-banner.js

@@ -8,6 +8,7 @@ export default defineComponent({
       required: true
     }
   },
+  emits: ['click'],
   methods: {
     handleClick: function (response) {
       this.$emit('click', response)

src/renderer/components/ft-profile-bubble/ft-profile-bubble.js

@@ -22,6 +22,7 @@ export default defineComponent({
       required: true
     }
   },
+  emits: ['click'],
   computed: {
     isMainProfile: function () {
       return this.profileId === MAIN_PROFILE_ID
@@ -35,5 +36,10 @@ export default defineComponent({
     translatedProfileName: function () {
       return this.isMainProfile ? this.$t('Profile.All Channels') : this.profileName
     }
+  },
+  methods: {
+    click: function() {
+      this.$emit('click')
+    }
   }
 })

src/renderer/components/ft-profile-bubble/ft-profile-bubble.vue

@@ -4,8 +4,8 @@
     tabindex="0"
     role="button"
     :aria-labelledby="sanitizedId"
-    @click="$emit('click')"
-    @keydown.space.enter.prevent="$emit('click')"
+    @click="click"
+    @keydown.space.enter.prevent="click"
   >
     <div
       class="bubble"

src/renderer/components/ft-profile-edit/ft-profile-edit.js

@@ -32,6 +32,7 @@ export default defineComponent({
       required: true
     }
   },
+  emits: ['new-profile-created', 'profile-deleted'],
   data: function () {
     return {
       showDeletePrompt: false,

src/renderer/components/ft-prompt/ft-prompt.js

@@ -38,6 +38,7 @@ export default defineComponent({
       default: false
     }
   },
+  emits: ['click'],
   data: function () {
     return {
       promptButtons: []
@@ -48,7 +49,7 @@ export default defineComponent({
       return sanitizeForHtmlId(this.label)
     }
   },
-  beforeDestroy: function () {
+  beforeUnmount: function () {
     document.removeEventListener('keydown', this.closeEventFunction, true)
   },
   mounted: function () {
@@ -100,6 +101,10 @@ export default defineComponent({
       }
     },
 
+    click: function(option) {
+      this.$emit('click', option)
+    },
+
     ...mapActions([
       'showOutlines'
     ])

src/renderer/components/ft-prompt/ft-prompt.vue

@@ -32,7 +32,7 @@
             :id="'prompt-' + sanitizedLabel + '-' + index"
             :key="index"
             :label="option"
-            @click="$emit('click', optionValues[index])"
+            @click="click(optionValues[index])"
           />
           <ft-button
             v-if="showClose"