From 2cd8f0f2d3e949c46bd5d87eb4ed507a194c8a60 Mon Sep 17 00:00:00 2001
From: absidue <48293849+absidue@users.noreply.github.com>
Date: Wed, 18 Jan 2023 08:50:02 +0100
Subject: [PATCH] Switch from Vue.extend to defineComponent (#3066)

---
 src/renderer/App.js                                       | 4 ++--
 src/renderer/components/data-settings/data-settings.js    | 4 ++--
 .../distraction-settings/distraction-settings.js          | 4 ++--
 .../components/download-settings/download-settings.js     | 4 ++--
 .../experimental-settings/experimental-settings.js        | 4 ++--
 .../external-player-settings/external-player-settings.js  | 4 ++--
 .../components/ft-age-restricted/ft-age-restricted.js     | 4 ++--
 src/renderer/components/ft-auto-grid/ft-auto-grid.js      | 4 ++--
 src/renderer/components/ft-button/ft-button.js            | 4 ++--
 src/renderer/components/ft-card/ft-card.js                | 4 ++--
 .../components/ft-channel-bubble/ft-channel-bubble.js     | 4 ++--
 .../components/ft-element-list/ft-element-list.js         | 4 ++--
 src/renderer/components/ft-flex-box/ft-flex-box.js        | 4 ++--
 src/renderer/components/ft-icon-button/ft-icon-button.js  | 4 ++--
 src/renderer/components/ft-input-tags/ft-input-tags.js    | 4 ++--
 src/renderer/components/ft-input/ft-input.js              | 4 ++--
 .../components/ft-list-channel/ft-list-channel.js         | 4 ++--
 .../components/ft-list-dropdown/ft-list-dropdown.js       | 5 +++--
 .../ft-list-lazy-wrapper/ft-list-lazy-wrapper.js          | 4 ++--
 .../components/ft-list-playlist/ft-list-playlist.js       | 4 ++--
 .../components/ft-list-video-lazy/ft-list-video-lazy.js   | 4 ++--
 src/renderer/components/ft-list-video/ft-list-video.js    | 4 ++--
 src/renderer/components/ft-loader/ft-loader.js            | 4 ++--
 .../ft-notification-banner/ft-notification-banner.js      | 4 ++--
 .../components/ft-profile-bubble/ft-profile-bubble.js     | 4 ++--
 .../ft-profile-channel-list/ft-profile-channel-list.js    | 4 ++--
 .../components/ft-profile-edit/ft-profile-edit.js         | 4 ++--
 .../ft-profile-filter-channels-list.js                    | 4 ++--
 .../components/ft-profile-selector/ft-profile-selector.js | 4 ++--
 .../components/ft-progress-bar/ft-progress-bar.js         | 4 ++--
 src/renderer/components/ft-prompt/ft-prompt.js            | 4 ++--
 .../components/ft-radio-button/ft-radio-button.js         | 4 ++--
 .../components/ft-search-filters/ft-search-filters.js     | 4 ++--
 src/renderer/components/ft-select/ft-select.js            | 4 ++--
 .../components/ft-settings-section/ft-settings-section.js | 4 ++--
 .../components/ft-share-button/ft-share-button.js         | 5 ++---
 src/renderer/components/ft-slider/ft-slider.js            | 4 ++--
 .../ft-sponsor-block-category.js                          | 5 +++--
 .../ft-timestamp-catcher/ft-timestamp-catcher.js          | 4 ++--
 src/renderer/components/ft-toast/ft-toast.js              | 4 ++--
 .../components/ft-toggle-switch/ft-toggle-switch.js       | 4 ++--
 src/renderer/components/ft-tooltip/ft-tooltip.js          | 4 ++--
 .../components/ft-video-player/ft-video-player.js         | 4 ++--
 .../components/general-settings/general-settings.js       | 4 ++--
 .../parental-control-settings.js                          | 4 ++--
 .../components/password-dialog/password-dialog.js         | 4 ++--
 .../components/password-settings/password-settings.js     | 4 ++--
 .../components/player-settings/player-settings.js         | 4 ++--
 src/renderer/components/playlist-info/playlist-info.js    | 4 ++--
 .../components/privacy-settings/privacy-settings.js       | 4 ++--
 src/renderer/components/proxy-settings/proxy-settings.js  | 4 ++--
 .../side-nav-more-options/side-nav-more-options.js        | 4 ++--
 src/renderer/components/side-nav/side-nav.js              | 4 ++--
 .../sponsor-block-settings/sponsor-block-settings.js      | 4 ++--
 .../subscription-settings/subscription-settings.js        | 4 ++--
 src/renderer/components/theme-settings/theme-settings.js  | 4 ++--
 src/renderer/components/top-nav/top-nav.js                | 4 ++--
 .../watch-video-chapters/watch-video-chapters.js          | 4 ++--
 .../watch-video-comments/watch-video-comments.js          | 4 ++--
 .../watch-video-description/watch-video-description.js    | 4 ++--
 .../components/watch-video-info/watch-video-info.js       | 4 ++--
 .../watch-video-live-chat/watch-video-live-chat.js        | 4 ++--
 .../watch-video-playlist/watch-video-playlist.js          | 4 ++--
 .../watch-video-recommendations.js                        | 4 ++--
 src/renderer/views/About/About.js                         | 4 ++--
 src/renderer/views/Channel/Channel.js                     | 4 ++--
 src/renderer/views/History/History.js                     | 8 ++++----
 src/renderer/views/Playlist/Playlist.js                   | 4 ++--
 src/renderer/views/Popular/Popular.js                     | 4 ++--
 src/renderer/views/ProfileEdit/ProfileEdit.js             | 4 ++--
 src/renderer/views/ProfileSettings/ProfileSettings.js     | 4 ++--
 src/renderer/views/Search/Search.js                       | 4 ++--
 src/renderer/views/Settings/Settings.js                   | 4 ++--
 .../views/SubscribedChannels/SubscribedChannels.js        | 4 ++--
 src/renderer/views/Subscriptions/Subscriptions.js         | 4 ++--
 src/renderer/views/Trending/Trending.js                   | 4 ++--
 src/renderer/views/UserPlaylists/UserPlaylists.js         | 8 ++++----
 src/renderer/views/Watch/Watch.js                         | 4 ++--
 78 files changed, 162 insertions(+), 161 deletions(-)

diff --git a/src/renderer/App.js b/src/renderer/App.js
index a4500b93fe95b..bfe3f74e8bb24 100644
--- a/src/renderer/App.js
+++ b/src/renderer/App.js
@@ -1,4 +1,4 @@
-import Vue from 'vue'
+import Vue, { 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'
@@ -18,7 +18,7 @@ let ipcRenderer = null
 
 Vue.directive('observe-visibility', ObserveVisibility)
 
-export default Vue.extend({
+export default defineComponent({
   name: 'App',
   components: {
     FtFlexBox,
diff --git a/src/renderer/components/data-settings/data-settings.js b/src/renderer/components/data-settings/data-settings.js
index ca61126f3eed9..eca9b0f963f07 100644
--- a/src/renderer/components/data-settings/data-settings.js
+++ b/src/renderer/components/data-settings/data-settings.js
@@ -1,4 +1,4 @@
-import Vue from 'vue'
+import { defineComponent } from 'vue'
 import FtSettingsSection from '../ft-settings-section/ft-settings-section.vue'
 import { mapActions, mapMutations } from 'vuex'
 import FtButton from '../ft-button/ft-button.vue'
@@ -18,7 +18,7 @@ import {
 } from '../../helpers/utils'
 import { invidiousAPICall } from '../../helpers/api/invidious'
 
-export default Vue.extend({
+export default defineComponent({
   name: 'DataSettings',
   components: {
     'ft-settings-section': FtSettingsSection,
diff --git a/src/renderer/components/distraction-settings/distraction-settings.js b/src/renderer/components/distraction-settings/distraction-settings.js
index 939ecba67f54e..fa5b08326b135 100644
--- a/src/renderer/components/distraction-settings/distraction-settings.js
+++ b/src/renderer/components/distraction-settings/distraction-settings.js
@@ -1,11 +1,11 @@
-import Vue from 'vue'
+import { defineComponent } from 'vue'
 import { mapActions } from 'vuex'
 import FtSettingsSection from '../ft-settings-section/ft-settings-section.vue'
 import FtToggleSwitch from '../ft-toggle-switch/ft-toggle-switch.vue'
 import FtInputTags from '../../components/ft-input-tags/ft-input-tags.vue'
 import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
 
-export default Vue.extend({
+export default defineComponent({
   name: 'PlayerSettings',
   components: {
     'ft-settings-section': FtSettingsSection,
diff --git a/src/renderer/components/download-settings/download-settings.js b/src/renderer/components/download-settings/download-settings.js
index 9e4faabca71b6..e60d1a56c87f2 100644
--- a/src/renderer/components/download-settings/download-settings.js
+++ b/src/renderer/components/download-settings/download-settings.js
@@ -1,4 +1,4 @@
-import Vue from 'vue'
+import { defineComponent } from 'vue'
 import FtSettingsSection from '../ft-settings-section/ft-settings-section.vue'
 import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
 import FtToggleSwitch from '../ft-toggle-switch/ft-toggle-switch.vue'
@@ -9,7 +9,7 @@ import { mapActions } from 'vuex'
 import { ipcRenderer } from 'electron'
 import { IpcChannels } from '../../../constants'
 
-export default Vue.extend({
+export default defineComponent({
   name: 'DownloadSettings',
   components: {
     'ft-settings-section': FtSettingsSection,
diff --git a/src/renderer/components/experimental-settings/experimental-settings.js b/src/renderer/components/experimental-settings/experimental-settings.js
index ff2a1cb7ca3b1..b4d5e89239d98 100644
--- a/src/renderer/components/experimental-settings/experimental-settings.js
+++ b/src/renderer/components/experimental-settings/experimental-settings.js
@@ -1,5 +1,5 @@
 import fs from 'fs/promises'
-import Vue from 'vue'
+import { defineComponent } from 'vue'
 import FtSettingsSection from '../ft-settings-section/ft-settings-section.vue'
 import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
 import FtToggleSwitch from '../ft-toggle-switch/ft-toggle-switch.vue'
@@ -7,7 +7,7 @@ import FtPrompt from '../ft-prompt/ft-prompt.vue'
 import { pathExists } from '../../helpers/filesystem'
 import { getUserDataPath } from '../../helpers/utils'
 
-export default Vue.extend({
+export default defineComponent({
   name: 'ExperimentalSettings',
   components: {
     'ft-settings-section': FtSettingsSection,
diff --git a/src/renderer/components/external-player-settings/external-player-settings.js b/src/renderer/components/external-player-settings/external-player-settings.js
index 69c58c0561daa..c2fc0647d038f 100644
--- a/src/renderer/components/external-player-settings/external-player-settings.js
+++ b/src/renderer/components/external-player-settings/external-player-settings.js
@@ -1,4 +1,4 @@
-import Vue from 'vue'
+import { defineComponent } from 'vue'
 import { mapActions } from 'vuex'
 import FtSettingsSection from '../ft-settings-section/ft-settings-section.vue'
 import FtSelect from '../ft-select/ft-select.vue'
@@ -6,7 +6,7 @@ import FtInput from '../ft-input/ft-input.vue'
 import FtToggleSwitch from '../ft-toggle-switch/ft-toggle-switch.vue'
 import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
 
-export default Vue.extend({
+export default defineComponent({
   name: 'ExternalPlayerSettings',
   components: {
     'ft-settings-section': FtSettingsSection,
diff --git a/src/renderer/components/ft-age-restricted/ft-age-restricted.js b/src/renderer/components/ft-age-restricted/ft-age-restricted.js
index cc38888f35348..7e925441b4650 100644
--- a/src/renderer/components/ft-age-restricted/ft-age-restricted.js
+++ b/src/renderer/components/ft-age-restricted/ft-age-restricted.js
@@ -1,6 +1,6 @@
-import Vue from 'vue'
+import { defineComponent } from 'vue'
 
-export default Vue.extend({
+export default defineComponent({
   name: 'FtAgeRestricted',
   props: {
     contentTypeString: {
diff --git a/src/renderer/components/ft-auto-grid/ft-auto-grid.js b/src/renderer/components/ft-auto-grid/ft-auto-grid.js
index 2befee458f60a..d9d1e21522e0a 100644
--- a/src/renderer/components/ft-auto-grid/ft-auto-grid.js
+++ b/src/renderer/components/ft-auto-grid/ft-auto-grid.js
@@ -1,6 +1,6 @@
-import Vue from 'vue'
+import { defineComponent } from 'vue'
 
-export default Vue.extend({
+export default defineComponent({
   name: 'FtAutoGrid',
   props: {
     grid: {
diff --git a/src/renderer/components/ft-button/ft-button.js b/src/renderer/components/ft-button/ft-button.js
index 74eb0ba844aa3..808b8949b2b4b 100644
--- a/src/renderer/components/ft-button/ft-button.js
+++ b/src/renderer/components/ft-button/ft-button.js
@@ -1,6 +1,6 @@
-import Vue from 'vue'
+import { defineComponent } from 'vue'
 
-export default Vue.extend({
+export default defineComponent({
   name: 'FtButton',
   props: {
     label: {
diff --git a/src/renderer/components/ft-card/ft-card.js b/src/renderer/components/ft-card/ft-card.js
index baea9fec76b9c..29d02d72472a2 100644
--- a/src/renderer/components/ft-card/ft-card.js
+++ b/src/renderer/components/ft-card/ft-card.js
@@ -1,5 +1,5 @@
-import Vue from 'vue'
+import { defineComponent } from 'vue'
 
-export default Vue.extend({
+export default defineComponent({
   name: 'FtCard'
 })
diff --git a/src/renderer/components/ft-channel-bubble/ft-channel-bubble.js b/src/renderer/components/ft-channel-bubble/ft-channel-bubble.js
index ca2a775cbadc2..d3d2430de624f 100644
--- a/src/renderer/components/ft-channel-bubble/ft-channel-bubble.js
+++ b/src/renderer/components/ft-channel-bubble/ft-channel-bubble.js
@@ -1,7 +1,7 @@
-import Vue from 'vue'
+import { defineComponent } from 'vue'
 import { sanitizeForHtmlId } from '../../helpers/accessibility'
 
-export default Vue.extend({
+export default defineComponent({
   name: 'FtChannelBubble',
   props: {
     channelName: {
diff --git a/src/renderer/components/ft-element-list/ft-element-list.js b/src/renderer/components/ft-element-list/ft-element-list.js
index 319d31dc7b22b..50b2e51370eb0 100644
--- a/src/renderer/components/ft-element-list/ft-element-list.js
+++ b/src/renderer/components/ft-element-list/ft-element-list.js
@@ -1,8 +1,8 @@
-import Vue from 'vue'
+import { defineComponent } from 'vue'
 import FtAutoGrid from '../ft-auto-grid/ft-auto-grid.vue'
 import FtListLazyWrapper from '../ft-list-lazy-wrapper/ft-list-lazy-wrapper.vue'
 
-export default Vue.extend({
+export default defineComponent({
   name: 'FtElementList',
   components: {
     'ft-auto-grid': FtAutoGrid,
diff --git a/src/renderer/components/ft-flex-box/ft-flex-box.js b/src/renderer/components/ft-flex-box/ft-flex-box.js
index 41e5bf8815e22..6982d31ed0c59 100644
--- a/src/renderer/components/ft-flex-box/ft-flex-box.js
+++ b/src/renderer/components/ft-flex-box/ft-flex-box.js
@@ -1,5 +1,5 @@
-import Vue from 'vue'
+import { defineComponent } from 'vue'
 
-export default Vue.extend({
+export default defineComponent({
   name: 'FtFlexBox'
 })
diff --git a/src/renderer/components/ft-icon-button/ft-icon-button.js b/src/renderer/components/ft-icon-button/ft-icon-button.js
index bbb7d9a90d6f3..49a6aedcbfeef 100644
--- a/src/renderer/components/ft-icon-button/ft-icon-button.js
+++ b/src/renderer/components/ft-icon-button/ft-icon-button.js
@@ -1,7 +1,7 @@
-import Vue from 'vue'
+import { defineComponent } from 'vue'
 import { sanitizeForHtmlId } from '../../helpers/accessibility'
 
-export default Vue.extend({
+export default defineComponent({
   name: 'FtIconButton',
   props: {
     title: {
diff --git a/src/renderer/components/ft-input-tags/ft-input-tags.js b/src/renderer/components/ft-input-tags/ft-input-tags.js
index 7e4f2b6f39b63..08f8907af353d 100644
--- a/src/renderer/components/ft-input-tags/ft-input-tags.js
+++ b/src/renderer/components/ft-input-tags/ft-input-tags.js
@@ -1,8 +1,8 @@
-import Vue from 'vue'
+import { defineComponent } from 'vue'
 import FtInput from '../ft-input/ft-input.vue'
 import FtTooltip from '../ft-tooltip/ft-tooltip.vue'
 
-export default Vue.extend({
+export default defineComponent({
   name: 'FtInputTags',
   components: {
     'ft-input': FtInput,
diff --git a/src/renderer/components/ft-input/ft-input.js b/src/renderer/components/ft-input/ft-input.js
index 25b7e8c8ca44c..91c80340f72c6 100644
--- a/src/renderer/components/ft-input/ft-input.js
+++ b/src/renderer/components/ft-input/ft-input.js
@@ -1,8 +1,8 @@
-import Vue from 'vue'
+import { defineComponent } from 'vue'
 import FtTooltip from '../ft-tooltip/ft-tooltip.vue'
 import { mapActions } from 'vuex'
 
-export default Vue.extend({
+export default defineComponent({
   name: 'FtInput',
   components: {
     'ft-tooltip': FtTooltip
diff --git a/src/renderer/components/ft-list-channel/ft-list-channel.js b/src/renderer/components/ft-list-channel/ft-list-channel.js
index 09e33e2fe5b27..137f86bd05341 100644
--- a/src/renderer/components/ft-list-channel/ft-list-channel.js
+++ b/src/renderer/components/ft-list-channel/ft-list-channel.js
@@ -1,8 +1,8 @@
-import Vue from 'vue'
+import { defineComponent } from 'vue'
 import { youtubeImageUrlToInvidious } from '../../helpers/api/invidious'
 import { formatNumber } from '../../helpers/utils'
 
-export default Vue.extend({
+export default defineComponent({
   name: 'FtListChannel',
   props: {
     data: {
diff --git a/src/renderer/components/ft-list-dropdown/ft-list-dropdown.js b/src/renderer/components/ft-list-dropdown/ft-list-dropdown.js
index b53ca8941237e..f9d20dfa3383a 100644
--- a/src/renderer/components/ft-list-dropdown/ft-list-dropdown.js
+++ b/src/renderer/components/ft-list-dropdown/ft-list-dropdown.js
@@ -1,6 +1,7 @@
-import Vue from 'vue'
+import { defineComponent } from 'vue'
 import { sanitizeForHtmlId, handleDropdownKeyboardEvent } from '../../helpers/accessibility'
-export default Vue.extend({
+
+export default defineComponent({
   name: 'FtListDropdown',
   props: {
     title: {
diff --git a/src/renderer/components/ft-list-lazy-wrapper/ft-list-lazy-wrapper.js b/src/renderer/components/ft-list-lazy-wrapper/ft-list-lazy-wrapper.js
index 5d13c0a560889..7cee6fd49e4fe 100644
--- a/src/renderer/components/ft-list-lazy-wrapper/ft-list-lazy-wrapper.js
+++ b/src/renderer/components/ft-list-lazy-wrapper/ft-list-lazy-wrapper.js
@@ -1,9 +1,9 @@
-import Vue from 'vue'
+import { defineComponent } from 'vue'
 import FtListVideo from '../ft-list-video/ft-list-video.vue'
 import FtListChannel from '../ft-list-channel/ft-list-channel.vue'
 import FtListPlaylist from '../ft-list-playlist/ft-list-playlist.vue'
 
-export default Vue.extend({
+export default defineComponent({
   name: 'FtListLazyWrapper',
   components: {
     'ft-list-video': FtListVideo,
diff --git a/src/renderer/components/ft-list-playlist/ft-list-playlist.js b/src/renderer/components/ft-list-playlist/ft-list-playlist.js
index b310135f30e03..1f8c7ade03da4 100644
--- a/src/renderer/components/ft-list-playlist/ft-list-playlist.js
+++ b/src/renderer/components/ft-list-playlist/ft-list-playlist.js
@@ -1,8 +1,8 @@
-import Vue from 'vue'
+import { defineComponent } from 'vue'
 import FtIconButton from '../ft-icon-button/ft-icon-button.vue'
 import { mapActions } from 'vuex'
 
-export default Vue.extend({
+export default defineComponent({
   name: 'FtListPlaylist',
   components: {
     'ft-icon-button': FtIconButton
diff --git a/src/renderer/components/ft-list-video-lazy/ft-list-video-lazy.js b/src/renderer/components/ft-list-video-lazy/ft-list-video-lazy.js
index fcffb92787967..a2e9391ceef53 100644
--- a/src/renderer/components/ft-list-video-lazy/ft-list-video-lazy.js
+++ b/src/renderer/components/ft-list-video-lazy/ft-list-video-lazy.js
@@ -1,7 +1,7 @@
-import Vue from 'vue'
+import { defineComponent } from 'vue'
 import FtListVideo from '../ft-list-video/ft-list-video.vue'
 
-export default Vue.extend({
+export default defineComponent({
   name: 'FtListVideoLazy',
   components: {
     'ft-list-video': FtListVideo
diff --git a/src/renderer/components/ft-list-video/ft-list-video.js b/src/renderer/components/ft-list-video/ft-list-video.js
index 40b12e9ba1d3d..cef6a25607257 100644
--- a/src/renderer/components/ft-list-video/ft-list-video.js
+++ b/src/renderer/components/ft-list-video/ft-list-video.js
@@ -1,4 +1,4 @@
-import Vue from 'vue'
+import { defineComponent } from 'vue'
 import FtIconButton from '../ft-icon-button/ft-icon-button.vue'
 import { mapActions } from 'vuex'
 import {
@@ -11,7 +11,7 @@ import {
   toDistractionFreeTitle
 } from '../../helpers/utils'
 
-export default Vue.extend({
+export default defineComponent({
   name: 'FtListVideo',
   components: {
     'ft-icon-button': FtIconButton
diff --git a/src/renderer/components/ft-loader/ft-loader.js b/src/renderer/components/ft-loader/ft-loader.js
index 592de46005295..72643c4dbc057 100644
--- a/src/renderer/components/ft-loader/ft-loader.js
+++ b/src/renderer/components/ft-loader/ft-loader.js
@@ -1,6 +1,6 @@
-import Vue from 'vue'
+import { defineComponent } from 'vue'
 
-export default Vue.extend({
+export default defineComponent({
   name: 'FtLoader',
   props: {
     fullscreen: {
diff --git a/src/renderer/components/ft-notification-banner/ft-notification-banner.js b/src/renderer/components/ft-notification-banner/ft-notification-banner.js
index f5333c67bc99b..ce6e4adc215f0 100644
--- a/src/renderer/components/ft-notification-banner/ft-notification-banner.js
+++ b/src/renderer/components/ft-notification-banner/ft-notification-banner.js
@@ -1,6 +1,6 @@
-import Vue from 'vue'
+import { defineComponent } from 'vue'
 
-export default Vue.extend({
+export default defineComponent({
   name: 'FtNotificationBanner',
   props: {
     message: {
diff --git a/src/renderer/components/ft-profile-bubble/ft-profile-bubble.js b/src/renderer/components/ft-profile-bubble/ft-profile-bubble.js
index 4652e17ccf03f..63d9f01392037 100644
--- a/src/renderer/components/ft-profile-bubble/ft-profile-bubble.js
+++ b/src/renderer/components/ft-profile-bubble/ft-profile-bubble.js
@@ -1,6 +1,6 @@
-import Vue from 'vue'
+import { defineComponent } from 'vue'
 
-export default Vue.extend({
+export default defineComponent({
   name: 'FtProfileBubble',
   props: {
     profileName: {
diff --git a/src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.js b/src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.js
index 9d04830416796..45fe6d35afb5e 100644
--- a/src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.js
+++ b/src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.js
@@ -1,4 +1,4 @@
-import Vue from 'vue'
+import { defineComponent } from 'vue'
 import { mapActions } from 'vuex'
 
 import FtCard from '../../components/ft-card/ft-card.vue'
@@ -9,7 +9,7 @@ import FtPrompt from '../../components/ft-prompt/ft-prompt.vue'
 import { showToast } from '../../helpers/utils'
 import { youtubeImageUrlToInvidious } from '../../helpers/api/invidious'
 
-export default Vue.extend({
+export default defineComponent({
   name: 'FtProfileChannelList',
   components: {
     'ft-card': FtCard,
diff --git a/src/renderer/components/ft-profile-edit/ft-profile-edit.js b/src/renderer/components/ft-profile-edit/ft-profile-edit.js
index d8eb17951ceaf..9cb26020c99ce 100644
--- a/src/renderer/components/ft-profile-edit/ft-profile-edit.js
+++ b/src/renderer/components/ft-profile-edit/ft-profile-edit.js
@@ -1,4 +1,4 @@
-import Vue from 'vue'
+import { defineComponent } from 'vue'
 import { mapActions } from 'vuex'
 import FtCard from '../../components/ft-card/ft-card.vue'
 import FtPrompt from '../../components/ft-prompt/ft-prompt.vue'
@@ -9,7 +9,7 @@ import { MAIN_PROFILE_ID } from '../../../constants'
 import { calculateColorLuminance, colors } from '../../helpers/colors'
 import { showToast } from '../../helpers/utils'
 
-export default Vue.extend({
+export default defineComponent({
   name: 'FtProfileEdit',
   components: {
     'ft-card': FtCard,
diff --git a/src/renderer/components/ft-profile-filter-channels-list/ft-profile-filter-channels-list.js b/src/renderer/components/ft-profile-filter-channels-list/ft-profile-filter-channels-list.js
index 2e4cea5623851..ece62f7ac5218 100644
--- a/src/renderer/components/ft-profile-filter-channels-list/ft-profile-filter-channels-list.js
+++ b/src/renderer/components/ft-profile-filter-channels-list/ft-profile-filter-channels-list.js
@@ -1,4 +1,4 @@
-import Vue from 'vue'
+import { defineComponent } from 'vue'
 import { mapActions } from 'vuex'
 
 import FtCard from '../../components/ft-card/ft-card.vue'
@@ -9,7 +9,7 @@ import FtSelect from '../ft-select/ft-select.vue'
 import { showToast } from '../../helpers/utils'
 import { youtubeImageUrlToInvidious } from '../../helpers/api/invidious'
 
-export default Vue.extend({
+export default defineComponent({
   name: 'FtProfileFilterChannelsList',
   components: {
     'ft-card': FtCard,
diff --git a/src/renderer/components/ft-profile-selector/ft-profile-selector.js b/src/renderer/components/ft-profile-selector/ft-profile-selector.js
index fc5b89c8c7702..e68a29047b7ab 100644
--- a/src/renderer/components/ft-profile-selector/ft-profile-selector.js
+++ b/src/renderer/components/ft-profile-selector/ft-profile-selector.js
@@ -1,11 +1,11 @@
-import Vue from 'vue'
+import { defineComponent } from 'vue'
 import { mapActions } from 'vuex'
 
 import FtCard from '../../components/ft-card/ft-card.vue'
 import FtIconButton from '../../components/ft-icon-button/ft-icon-button.vue'
 import { showToast } from '../../helpers/utils'
 
-export default Vue.extend({
+export default defineComponent({
   name: 'FtProfileSelector',
   components: {
     'ft-card': FtCard,
diff --git a/src/renderer/components/ft-progress-bar/ft-progress-bar.js b/src/renderer/components/ft-progress-bar/ft-progress-bar.js
index c5e7fcbc04ab1..14b91aa2cbcb6 100644
--- a/src/renderer/components/ft-progress-bar/ft-progress-bar.js
+++ b/src/renderer/components/ft-progress-bar/ft-progress-bar.js
@@ -1,6 +1,6 @@
-import Vue from 'vue'
+import { defineComponent } from 'vue'
 
-export default Vue.extend({
+export default defineComponent({
   name: 'FtProgressBar',
   computed: {
     progressBarPercentage: function () {
diff --git a/src/renderer/components/ft-prompt/ft-prompt.js b/src/renderer/components/ft-prompt/ft-prompt.js
index 22b6c2bf0212a..da1711946d0a8 100644
--- a/src/renderer/components/ft-prompt/ft-prompt.js
+++ b/src/renderer/components/ft-prompt/ft-prompt.js
@@ -1,10 +1,10 @@
-import Vue from 'vue'
+import { defineComponent } from 'vue'
 import FtCard from '../../components/ft-card/ft-card.vue'
 import FtFlexBox from '../../components/ft-flex-box/ft-flex-box.vue'
 import FtButton from '../../components/ft-button/ft-button.vue'
 import { sanitizeForHtmlId } from '../../helpers/accessibility'
 
-export default Vue.extend({
+export default defineComponent({
   name: 'FtPrompt',
   components: {
     'ft-card': FtCard,
diff --git a/src/renderer/components/ft-radio-button/ft-radio-button.js b/src/renderer/components/ft-radio-button/ft-radio-button.js
index ee9554bc7c733..f9135811536c9 100644
--- a/src/renderer/components/ft-radio-button/ft-radio-button.js
+++ b/src/renderer/components/ft-radio-button/ft-radio-button.js
@@ -1,6 +1,6 @@
-import Vue from 'vue'
+import { defineComponent } from 'vue'
 
-export default Vue.extend({
+export default defineComponent({
   name: 'FtElementList',
   props: {
     title: {
diff --git a/src/renderer/components/ft-search-filters/ft-search-filters.js b/src/renderer/components/ft-search-filters/ft-search-filters.js
index 47c812a808358..aaf0c7b66ac8b 100644
--- a/src/renderer/components/ft-search-filters/ft-search-filters.js
+++ b/src/renderer/components/ft-search-filters/ft-search-filters.js
@@ -1,8 +1,8 @@
-import Vue from 'vue'
+import { defineComponent } from 'vue'
 import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
 import FtRadioButton from '../ft-radio-button/ft-radio-button.vue'
 
-export default Vue.extend({
+export default defineComponent({
   name: 'FtSearchFilters',
   components: {
     'ft-flex-box': FtFlexBox,
diff --git a/src/renderer/components/ft-select/ft-select.js b/src/renderer/components/ft-select/ft-select.js
index 120a0e55a3faa..e6050edadff1a 100644
--- a/src/renderer/components/ft-select/ft-select.js
+++ b/src/renderer/components/ft-select/ft-select.js
@@ -1,8 +1,8 @@
-import Vue from 'vue'
+import { defineComponent } from 'vue'
 import FtTooltip from '../ft-tooltip/ft-tooltip.vue'
 import { sanitizeForHtmlId } from '../../helpers/accessibility'
 
-export default Vue.extend({
+export default defineComponent({
   name: 'FtSelect',
   components: {
     'ft-tooltip': FtTooltip
diff --git a/src/renderer/components/ft-settings-section/ft-settings-section.js b/src/renderer/components/ft-settings-section/ft-settings-section.js
index 8d16409515a94..3b0e9ebaf9561 100644
--- a/src/renderer/components/ft-settings-section/ft-settings-section.js
+++ b/src/renderer/components/ft-settings-section/ft-settings-section.js
@@ -1,6 +1,6 @@
-import Vue from 'vue'
+import { defineComponent } from 'vue'
 
-export default Vue.extend({
+export default defineComponent({
   name: 'FtSettingsSection',
   props: {
     title: {
diff --git a/src/renderer/components/ft-share-button/ft-share-button.js b/src/renderer/components/ft-share-button/ft-share-button.js
index 9c12f296ef516..fe9a63fabec3d 100644
--- a/src/renderer/components/ft-share-button/ft-share-button.js
+++ b/src/renderer/components/ft-share-button/ft-share-button.js
@@ -1,12 +1,11 @@
-import Vue from 'vue'
-
+import { defineComponent } from 'vue'
 import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
 import FtIconButton from '../ft-icon-button/ft-icon-button.vue'
 import FtButton from '../ft-button/ft-button.vue'
 import FtToggleSwitch from '../ft-toggle-switch/ft-toggle-switch.vue'
 import { copyToClipboard, openExternalLink } from '../../helpers/utils'
 
-export default Vue.extend({
+export default defineComponent({
   name: 'FtShareButton',
   components: {
     'ft-flex-box': FtFlexBox,
diff --git a/src/renderer/components/ft-slider/ft-slider.js b/src/renderer/components/ft-slider/ft-slider.js
index fb0b56ee8bdcf..31028d74f08e3 100644
--- a/src/renderer/components/ft-slider/ft-slider.js
+++ b/src/renderer/components/ft-slider/ft-slider.js
@@ -1,6 +1,6 @@
-import Vue from 'vue'
+import { defineComponent } from 'vue'
 
-export default Vue.extend({
+export default defineComponent({
   name: 'FtSlider',
   props: {
     label: {
diff --git a/src/renderer/components/ft-sponsor-block-category/ft-sponsor-block-category.js b/src/renderer/components/ft-sponsor-block-category/ft-sponsor-block-category.js
index 96b6290fd5546..a0318f55ab6ef 100644
--- a/src/renderer/components/ft-sponsor-block-category/ft-sponsor-block-category.js
+++ b/src/renderer/components/ft-sponsor-block-category/ft-sponsor-block-category.js
@@ -1,9 +1,10 @@
-import Vue from 'vue'
+import { defineComponent } from 'vue'
 import { mapActions } from 'vuex'
 import { colors } from '../../helpers/colors'
 import FtSelect from '../ft-select/ft-select.vue'
 import { sanitizeForHtmlId } from '../../helpers/accessibility'
-export default Vue.extend({
+
+export default defineComponent({
   name: 'FtSponsorBlockCategory',
   components: {
     'ft-select': FtSelect
diff --git a/src/renderer/components/ft-timestamp-catcher/ft-timestamp-catcher.js b/src/renderer/components/ft-timestamp-catcher/ft-timestamp-catcher.js
index b093092d43efd..940213031b0bc 100644
--- a/src/renderer/components/ft-timestamp-catcher/ft-timestamp-catcher.js
+++ b/src/renderer/components/ft-timestamp-catcher/ft-timestamp-catcher.js
@@ -1,6 +1,6 @@
-import Vue from 'vue'
+import { defineComponent } from 'vue'
 
-export default Vue.extend({
+export default defineComponent({
   name: 'FtTimestampCatcher',
   props: {
     inputHtml: {
diff --git a/src/renderer/components/ft-toast/ft-toast.js b/src/renderer/components/ft-toast/ft-toast.js
index 81c97fd51b3fa..cc6b1ad8432fc 100644
--- a/src/renderer/components/ft-toast/ft-toast.js
+++ b/src/renderer/components/ft-toast/ft-toast.js
@@ -1,7 +1,7 @@
-import Vue from 'vue'
+import { defineComponent } from 'vue'
 import FtToastEvents from './ft-toast-events.js'
 
-export default Vue.extend({
+export default defineComponent({
   name: 'FtToast',
   data: function () {
     return {
diff --git a/src/renderer/components/ft-toggle-switch/ft-toggle-switch.js b/src/renderer/components/ft-toggle-switch/ft-toggle-switch.js
index 3df674d11500f..0e61f0c464447 100644
--- a/src/renderer/components/ft-toggle-switch/ft-toggle-switch.js
+++ b/src/renderer/components/ft-toggle-switch/ft-toggle-switch.js
@@ -1,7 +1,7 @@
-import Vue from 'vue'
+import { defineComponent } from 'vue'
 import FtTooltip from '../ft-tooltip/ft-tooltip.vue'
 
-export default Vue.extend({
+export default defineComponent({
   name: 'FtToggleSwitch',
   components: {
     'ft-tooltip': FtTooltip
diff --git a/src/renderer/components/ft-tooltip/ft-tooltip.js b/src/renderer/components/ft-tooltip/ft-tooltip.js
index fc34ec65d64df..2b4e61a835c69 100644
--- a/src/renderer/components/ft-tooltip/ft-tooltip.js
+++ b/src/renderer/components/ft-tooltip/ft-tooltip.js
@@ -1,8 +1,8 @@
-import Vue from 'vue'
+import { defineComponent } from 'vue'
 
 let idCounter = 0
 
-export default Vue.extend({
+export default defineComponent({
   name: 'FtTooltip',
   props: {
     position: {
diff --git a/src/renderer/components/ft-video-player/ft-video-player.js b/src/renderer/components/ft-video-player/ft-video-player.js
index 54bae15707c8e..f1eb5ee4bab3f 100644
--- a/src/renderer/components/ft-video-player/ft-video-player.js
+++ b/src/renderer/components/ft-video-player/ft-video-player.js
@@ -1,4 +1,4 @@
-import Vue from 'vue'
+import { defineComponent } from 'vue'
 import { mapActions } from 'vuex'
 
 import videojs from 'video.js'
@@ -18,7 +18,7 @@ import { calculateColorLuminance, colors } from '../../helpers/colors'
 import { pathExists } from '../../helpers/filesystem'
 import { getPicturesPath, showSaveDialog, showToast } from '../../helpers/utils'
 
-export default Vue.extend({
+export default defineComponent({
   name: 'FtVideoPlayer',
   beforeRouteLeave: function () {
     document.removeEventListener('keydown', this.keyboardShortcutHandler)
diff --git a/src/renderer/components/general-settings/general-settings.js b/src/renderer/components/general-settings/general-settings.js
index 4c19aba53f5d5..de94dea2e460f 100644
--- a/src/renderer/components/general-settings/general-settings.js
+++ b/src/renderer/components/general-settings/general-settings.js
@@ -1,4 +1,4 @@
-import Vue from 'vue'
+import { defineComponent } from 'vue'
 import { mapActions, mapMutations } from 'vuex'
 import FtSettingsSection from '../ft-settings-section/ft-settings-section.vue'
 import FtSelect from '../ft-select/ft-select.vue'
@@ -10,7 +10,7 @@ import FtButton from '../ft-button/ft-button.vue'
 import debounce from 'lodash.debounce'
 import { showToast } from '../../helpers/utils'
 
-export default Vue.extend({
+export default defineComponent({
   name: 'GeneralSettings',
   components: {
     'ft-settings-section': FtSettingsSection,
diff --git a/src/renderer/components/parental-control-settings/parental-control-settings.js b/src/renderer/components/parental-control-settings/parental-control-settings.js
index 10a678e3f8efe..fd064ae635dae 100644
--- a/src/renderer/components/parental-control-settings/parental-control-settings.js
+++ b/src/renderer/components/parental-control-settings/parental-control-settings.js
@@ -1,9 +1,9 @@
-import Vue from 'vue'
+import { defineComponent } from 'vue'
 import { mapActions } from 'vuex'
 import FtSettingsSection from '../ft-settings-section/ft-settings-section.vue'
 import FtToggleSwitch from '../ft-toggle-switch/ft-toggle-switch.vue'
 
-export default Vue.extend({
+export default defineComponent({
   name: 'ParentalControlSettings',
   components: {
     'ft-settings-section': FtSettingsSection,
diff --git a/src/renderer/components/password-dialog/password-dialog.js b/src/renderer/components/password-dialog/password-dialog.js
index b201e57c3fee2..ed4b5e99cafe3 100644
--- a/src/renderer/components/password-dialog/password-dialog.js
+++ b/src/renderer/components/password-dialog/password-dialog.js
@@ -1,8 +1,8 @@
-import Vue from 'vue'
+import { defineComponent } from 'vue'
 import FtCard from '../ft-card/ft-card.vue'
 import FtInput from '../ft-input/ft-input.vue'
 
-export default Vue.extend({
+export default defineComponent({
   name: 'PasswordDialog',
   components: {
     'ft-input': FtInput,
diff --git a/src/renderer/components/password-settings/password-settings.js b/src/renderer/components/password-settings/password-settings.js
index ca6f038945a43..079bbbf480378 100644
--- a/src/renderer/components/password-settings/password-settings.js
+++ b/src/renderer/components/password-settings/password-settings.js
@@ -1,11 +1,11 @@
-import Vue from 'vue'
+import { defineComponent } from 'vue'
 import { mapActions } from 'vuex'
 import FtSettingsSection from '../ft-settings-section/ft-settings-section.vue'
 import FtInput from '../ft-input/ft-input.vue'
 import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
 import FtButton from '../ft-button/ft-button.vue'
 
-export default Vue.extend({
+export default defineComponent({
   name: 'PasswordSettings',
   components: {
     'ft-settings-section': FtSettingsSection,
diff --git a/src/renderer/components/player-settings/player-settings.js b/src/renderer/components/player-settings/player-settings.js
index c2c7551bd952c..ecaea38b1dfe3 100644
--- a/src/renderer/components/player-settings/player-settings.js
+++ b/src/renderer/components/player-settings/player-settings.js
@@ -1,4 +1,4 @@
-import Vue from 'vue'
+import { defineComponent } from 'vue'
 import { mapActions } from 'vuex'
 import FtSettingsSection from '../ft-settings-section/ft-settings-section.vue'
 import FtSelect from '../ft-select/ft-select.vue'
@@ -13,7 +13,7 @@ import { IpcChannels } from '../../../constants'
 import path from 'path'
 import { getPicturesPath } from '../../helpers/utils'
 
-export default Vue.extend({
+export default defineComponent({
   name: 'PlayerSettings',
   components: {
     'ft-settings-section': FtSettingsSection,
diff --git a/src/renderer/components/playlist-info/playlist-info.js b/src/renderer/components/playlist-info/playlist-info.js
index bf421ae1f0736..54ec8b9adc904 100644
--- a/src/renderer/components/playlist-info/playlist-info.js
+++ b/src/renderer/components/playlist-info/playlist-info.js
@@ -1,8 +1,8 @@
-import Vue from 'vue'
+import { defineComponent } from 'vue'
 import FtListDropdown from '../ft-list-dropdown/ft-list-dropdown.vue'
 import { copyToClipboard, formatNumber, openExternalLink } from '../../helpers/utils'
 
-export default Vue.extend({
+export default defineComponent({
   name: 'PlaylistInfo',
   components: {
     'ft-list-dropdown': FtListDropdown
diff --git a/src/renderer/components/privacy-settings/privacy-settings.js b/src/renderer/components/privacy-settings/privacy-settings.js
index 74046499c6bc2..145fe6eb48e63 100644
--- a/src/renderer/components/privacy-settings/privacy-settings.js
+++ b/src/renderer/components/privacy-settings/privacy-settings.js
@@ -1,4 +1,4 @@
-import Vue from 'vue'
+import { defineComponent } from 'vue'
 import { mapActions } from 'vuex'
 import FtSettingsSection from '../ft-settings-section/ft-settings-section.vue'
 import FtButton from '../ft-button/ft-button.vue'
@@ -8,7 +8,7 @@ import FtPrompt from '../ft-prompt/ft-prompt.vue'
 import { MAIN_PROFILE_ID } from '../../../constants'
 import { showToast } from '../../helpers/utils'
 
-export default Vue.extend({
+export default defineComponent({
   name: 'PrivacySettings',
   components: {
     'ft-settings-section': FtSettingsSection,
diff --git a/src/renderer/components/proxy-settings/proxy-settings.js b/src/renderer/components/proxy-settings/proxy-settings.js
index 33df0bf8d4068..f288467d29200 100644
--- a/src/renderer/components/proxy-settings/proxy-settings.js
+++ b/src/renderer/components/proxy-settings/proxy-settings.js
@@ -1,4 +1,4 @@
-import Vue from 'vue'
+import { defineComponent } from 'vue'
 import { mapActions } from 'vuex'
 import FtSettingsSection from '../ft-settings-section/ft-settings-section.vue'
 import FtToggleSwitch from '../ft-toggle-switch/ft-toggle-switch.vue'
@@ -14,7 +14,7 @@ import debounce from 'lodash.debounce'
 import { IpcChannels } from '../../../constants'
 import { showToast } from '../../helpers/utils'
 
-export default Vue.extend({
+export default defineComponent({
   name: 'ProxySettings',
   components: {
     'ft-settings-section': FtSettingsSection,
diff --git a/src/renderer/components/side-nav-more-options/side-nav-more-options.js b/src/renderer/components/side-nav-more-options/side-nav-more-options.js
index 0a943afae66fe..83bae2a4de7ff 100644
--- a/src/renderer/components/side-nav-more-options/side-nav-more-options.js
+++ b/src/renderer/components/side-nav-more-options/side-nav-more-options.js
@@ -1,6 +1,6 @@
-import Vue from 'vue'
+import { defineComponent } from 'vue'
 
-export default Vue.extend({
+export default defineComponent({
   name: 'SideNav',
   data: function () {
     return {
diff --git a/src/renderer/components/side-nav/side-nav.js b/src/renderer/components/side-nav/side-nav.js
index b9940b4a03723..31709f2584df0 100644
--- a/src/renderer/components/side-nav/side-nav.js
+++ b/src/renderer/components/side-nav/side-nav.js
@@ -1,9 +1,9 @@
-import Vue from 'vue'
+import { defineComponent } from 'vue'
 import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
 import SideNavMoreOptions from '../side-nav-more-options/side-nav-more-options.vue'
 import { youtubeImageUrlToInvidious } from '../../helpers/api/invidious'
 
-export default Vue.extend({
+export default defineComponent({
   name: 'SideNav',
   components: {
     'ft-flex-box': FtFlexBox,
diff --git a/src/renderer/components/sponsor-block-settings/sponsor-block-settings.js b/src/renderer/components/sponsor-block-settings/sponsor-block-settings.js
index 80ad8e5167cfd..af1fd5abf8ea5 100644
--- a/src/renderer/components/sponsor-block-settings/sponsor-block-settings.js
+++ b/src/renderer/components/sponsor-block-settings/sponsor-block-settings.js
@@ -1,4 +1,4 @@
-import Vue from 'vue'
+import { defineComponent } from 'vue'
 import { mapActions } from 'vuex'
 import FtSettingsSection from '../ft-settings-section/ft-settings-section.vue'
 import FtToggleSwitch from '../ft-toggle-switch/ft-toggle-switch.vue'
@@ -6,7 +6,7 @@ import FtInput from '../ft-input/ft-input.vue'
 import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
 import FtSponsorBlockCategory from '../ft-sponsor-block-category/ft-sponsor-block-category.vue'
 
-export default Vue.extend({
+export default defineComponent({
   name: 'SponsorBlockSettings',
   components: {
     'ft-settings-section': FtSettingsSection,
diff --git a/src/renderer/components/subscription-settings/subscription-settings.js b/src/renderer/components/subscription-settings/subscription-settings.js
index 510c42f5e6769..97508e40f058d 100644
--- a/src/renderer/components/subscription-settings/subscription-settings.js
+++ b/src/renderer/components/subscription-settings/subscription-settings.js
@@ -1,9 +1,9 @@
-import Vue from 'vue'
+import { defineComponent } from 'vue'
 import { mapActions } from 'vuex'
 import FtSettingsSection from '../ft-settings-section/ft-settings-section.vue'
 import FtToggleSwitch from '../ft-toggle-switch/ft-toggle-switch.vue'
 
-export default Vue.extend({
+export default defineComponent({
   name: 'SubscriptionSettings',
   components: {
     'ft-settings-section': FtSettingsSection,
diff --git a/src/renderer/components/theme-settings/theme-settings.js b/src/renderer/components/theme-settings/theme-settings.js
index b8bc2e16169ef..2d322d6736ad9 100644
--- a/src/renderer/components/theme-settings/theme-settings.js
+++ b/src/renderer/components/theme-settings/theme-settings.js
@@ -1,4 +1,4 @@
-import Vue from 'vue'
+import { defineComponent } from 'vue'
 import { mapActions } from 'vuex'
 import FtSettingsSection from '../ft-settings-section/ft-settings-section.vue'
 import FtSelect from '../ft-select/ft-select.vue'
@@ -8,7 +8,7 @@ import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
 import FtPrompt from '../ft-prompt/ft-prompt.vue'
 import { colors } from '../../helpers/colors'
 
-export default Vue.extend({
+export default defineComponent({
   name: 'ThemeSettings',
   components: {
     'ft-settings-section': FtSettingsSection,
diff --git a/src/renderer/components/top-nav/top-nav.js b/src/renderer/components/top-nav/top-nav.js
index 90026ea8db155..a0e00372643a1 100644
--- a/src/renderer/components/top-nav/top-nav.js
+++ b/src/renderer/components/top-nav/top-nav.js
@@ -1,4 +1,4 @@
-import Vue from 'vue'
+import { defineComponent } from 'vue'
 import { mapActions } from 'vuex'
 import FtInput from '../ft-input/ft-input.vue'
 import FtSearchFilters from '../ft-search-filters/ft-search-filters.vue'
@@ -10,7 +10,7 @@ import { openInternalPath, showToast } from '../../helpers/utils'
 import { clearLocalSearchSuggestionsSession, getLocalSearchSuggestions } from '../../helpers/api/local'
 import { invidiousAPICall } from '../../helpers/api/invidious'
 
-export default Vue.extend({
+export default defineComponent({
   name: 'TopNav',
   components: {
     FtInput,
diff --git a/src/renderer/components/watch-video-chapters/watch-video-chapters.js b/src/renderer/components/watch-video-chapters/watch-video-chapters.js
index 36a88bc4841bb..3ec1e191f2681 100644
--- a/src/renderer/components/watch-video-chapters/watch-video-chapters.js
+++ b/src/renderer/components/watch-video-chapters/watch-video-chapters.js
@@ -1,7 +1,7 @@
-import Vue from 'vue'
+import { defineComponent } from 'vue'
 import FtCard from '../ft-card/ft-card.vue'
 
-export default Vue.extend({
+export default defineComponent({
   name: 'WatchVideoChapters',
   components: {
     'ft-card': FtCard
diff --git a/src/renderer/components/watch-video-comments/watch-video-comments.js b/src/renderer/components/watch-video-comments/watch-video-comments.js
index b79d2f7acccaf..bad2f65b5923f 100644
--- a/src/renderer/components/watch-video-comments/watch-video-comments.js
+++ b/src/renderer/components/watch-video-comments/watch-video-comments.js
@@ -1,4 +1,4 @@
-import Vue from 'vue'
+import { defineComponent } from 'vue'
 import FtCard from '../ft-card/ft-card.vue'
 import FtLoader from '../../components/ft-loader/ft-loader.vue'
 import FtSelect from '../../components/ft-select/ft-select.vue'
@@ -13,7 +13,7 @@ import {
 } from '../../helpers/utils'
 import { invidiousGetCommentReplies, invidiousGetComments } from '../../helpers/api/invidious'
 
-export default Vue.extend({
+export default defineComponent({
   name: 'WatchVideoComments',
   components: {
     'ft-card': FtCard,
diff --git a/src/renderer/components/watch-video-description/watch-video-description.js b/src/renderer/components/watch-video-description/watch-video-description.js
index eb370e175413c..fcfe1458c784f 100644
--- a/src/renderer/components/watch-video-description/watch-video-description.js
+++ b/src/renderer/components/watch-video-description/watch-video-description.js
@@ -1,9 +1,9 @@
-import Vue from 'vue'
+import { defineComponent } from 'vue'
 import FtCard from '../ft-card/ft-card.vue'
 import FtTimestampCatcher from '../ft-timestamp-catcher/ft-timestamp-catcher.vue'
 import autolinker from 'autolinker'
 
-export default Vue.extend({
+export default defineComponent({
   name: 'WatchVideoDescription',
   components: {
     'ft-card': FtCard,
diff --git a/src/renderer/components/watch-video-info/watch-video-info.js b/src/renderer/components/watch-video-info/watch-video-info.js
index 44ac81aa82ab6..03ca3496f450a 100644
--- a/src/renderer/components/watch-video-info/watch-video-info.js
+++ b/src/renderer/components/watch-video-info/watch-video-info.js
@@ -1,4 +1,4 @@
-import Vue from 'vue'
+import { defineComponent } from 'vue'
 import { mapActions } from 'vuex'
 import FtCard from '../ft-card/ft-card.vue'
 import FtButton from '../ft-button/ft-button.vue'
@@ -7,7 +7,7 @@ import FtShareButton from '../ft-share-button/ft-share-button.vue'
 import { MAIN_PROFILE_ID } from '../../../constants'
 import { formatNumber, openExternalLink, showToast } from '../../helpers/utils'
 
-export default Vue.extend({
+export default defineComponent({
   name: 'WatchVideoInfo',
   components: {
     'ft-card': FtCard,
diff --git a/src/renderer/components/watch-video-live-chat/watch-video-live-chat.js b/src/renderer/components/watch-video-live-chat/watch-video-live-chat.js
index 11f55815303eb..4df8793ffb54f 100644
--- a/src/renderer/components/watch-video-live-chat/watch-video-live-chat.js
+++ b/src/renderer/components/watch-video-live-chat/watch-video-live-chat.js
@@ -1,4 +1,4 @@
-import Vue from 'vue'
+import { defineComponent } from 'vue'
 import FtLoader from '../ft-loader/ft-loader.vue'
 import FtCard from '../ft-card/ft-card.vue'
 import FtButton from '../ft-button/ft-button.vue'
@@ -7,7 +7,7 @@ import autolinker from 'autolinker'
 import { getRandomColorClass } from '../../helpers/colors'
 import { getLocalVideoInfo, parseLocalTextRuns } from '../../helpers/api/local'
 
-export default Vue.extend({
+export default defineComponent({
   name: 'WatchVideoLiveChat',
   components: {
     'ft-loader': FtLoader,
diff --git a/src/renderer/components/watch-video-playlist/watch-video-playlist.js b/src/renderer/components/watch-video-playlist/watch-video-playlist.js
index 05f32a003a377..6839c27a97b02 100644
--- a/src/renderer/components/watch-video-playlist/watch-video-playlist.js
+++ b/src/renderer/components/watch-video-playlist/watch-video-playlist.js
@@ -1,4 +1,4 @@
-import Vue from 'vue'
+import { defineComponent } from 'vue'
 import { mapMutations } from 'vuex'
 import FtLoader from '../ft-loader/ft-loader.vue'
 import FtCard from '../ft-card/ft-card.vue'
@@ -7,7 +7,7 @@ import { copyToClipboard, showToast } from '../../helpers/utils'
 import { getLocalPlaylist, parseLocalPlaylistVideo } from '../../helpers/api/local'
 import { invidiousGetPlaylistInfo } from '../../helpers/api/invidious'
 
-export default Vue.extend({
+export default defineComponent({
   name: 'WatchVideoPlaylist',
   components: {
     'ft-loader': FtLoader,
diff --git a/src/renderer/components/watch-video-recommendations/watch-video-recommendations.js b/src/renderer/components/watch-video-recommendations/watch-video-recommendations.js
index bc52a540b020a..0c6f34dee20a4 100644
--- a/src/renderer/components/watch-video-recommendations/watch-video-recommendations.js
+++ b/src/renderer/components/watch-video-recommendations/watch-video-recommendations.js
@@ -1,10 +1,10 @@
-import Vue from 'vue'
+import { defineComponent } from 'vue'
 import { mapActions } from 'vuex'
 import FtCard from '../ft-card/ft-card.vue'
 import FtListVideoLazy from '../ft-list-video-lazy/ft-list-video-lazy.vue'
 import FtToggleSwitch from '../ft-toggle-switch/ft-toggle-switch.vue'
 
-export default Vue.extend({
+export default defineComponent({
   name: 'WatchVideoRecommendations',
   components: {
     'ft-card': FtCard,
diff --git a/src/renderer/views/About/About.js b/src/renderer/views/About/About.js
index 3e65a78dd98bd..669f9854fd37a 100644
--- a/src/renderer/views/About/About.js
+++ b/src/renderer/views/About/About.js
@@ -1,8 +1,8 @@
-import Vue from 'vue'
+import { defineComponent } from 'vue'
 import FtCard from '../../components/ft-card/ft-card.vue'
 import packageDetails from '../../../../package.json'
 
-export default Vue.extend({
+export default defineComponent({
   name: 'About',
   components: {
     'ft-card': FtCard
diff --git a/src/renderer/views/Channel/Channel.js b/src/renderer/views/Channel/Channel.js
index ecc5ed23cc75a..8070a675f5175 100644
--- a/src/renderer/views/Channel/Channel.js
+++ b/src/renderer/views/Channel/Channel.js
@@ -1,4 +1,4 @@
-import Vue from 'vue'
+import { defineComponent } from 'vue'
 import { mapActions } from 'vuex'
 import FtCard from '../../components/ft-card/ft-card.vue'
 import FtButton from '../../components/ft-button/ft-button.vue'
@@ -18,7 +18,7 @@ import { copyToClipboard, formatNumber, showToast } from '../../helpers/utils'
 import packageDetails from '../../../../package.json'
 import { invidiousAPICall, invidiousGetChannelInfo, youtubeImageUrlToInvidious } from '../../helpers/api/invidious'
 
-export default Vue.extend({
+export default defineComponent({
   name: 'Search',
   components: {
     'ft-card': FtCard,
diff --git a/src/renderer/views/History/History.js b/src/renderer/views/History/History.js
index bf6569be8d7ee..172bdcf3003f9 100644
--- a/src/renderer/views/History/History.js
+++ b/src/renderer/views/History/History.js
@@ -1,4 +1,4 @@
-import Vue from 'vue'
+import { defineComponent, nextTick } from 'vue'
 import FtLoader from '../../components/ft-loader/ft-loader.vue'
 import FtCard from '../../components/ft-card/ft-card.vue'
 import FtFlexBox from '../../components/ft-flex-box/ft-flex-box.vue'
@@ -6,7 +6,7 @@ import FtElementList from '../../components/ft-element-list/ft-element-list.vue'
 import FtButton from '../../components/ft-button/ft-button.vue'
 import FtInput from '../../components/ft-input/ft-input.vue'
 
-export default Vue.extend({
+export default defineComponent({
   name: 'History',
   components: {
     'ft-loader': FtLoader,
@@ -107,9 +107,9 @@ export default Vue.extend({
     refreshPage: function() {
       const scrollPos = window.scrollY || window.scrollTop || document.getElementsByTagName('html')[0].scrollTop
       this.isLoading = true
-      Vue.nextTick(() => {
+      nextTick(() => {
         this.isLoading = false
-        Vue.nextTick(() => {
+        nextTick(() => {
           window.scrollTo(0, scrollPos)
         })
       })
diff --git a/src/renderer/views/Playlist/Playlist.js b/src/renderer/views/Playlist/Playlist.js
index bba96d2ca109b..65e4445b47ce9 100644
--- a/src/renderer/views/Playlist/Playlist.js
+++ b/src/renderer/views/Playlist/Playlist.js
@@ -1,4 +1,4 @@
-import Vue from 'vue'
+import { defineComponent } from 'vue'
 import { mapActions, mapMutations } from 'vuex'
 import FtLoader from '../../components/ft-loader/ft-loader.vue'
 import FtCard from '../../components/ft-card/ft-card.vue'
@@ -10,7 +10,7 @@ import { getLocalPlaylist, parseLocalPlaylistVideo } from '../../helpers/api/loc
 import { extractNumberFromString } from '../../helpers/utils'
 import { invidiousGetPlaylistInfo, youtubeImageUrlToInvidious } from '../../helpers/api/invidious'
 
-export default Vue.extend({
+export default defineComponent({
   name: 'Playlist',
   components: {
     'ft-loader': FtLoader,
diff --git a/src/renderer/views/Popular/Popular.js b/src/renderer/views/Popular/Popular.js
index 03f35f87530f6..ea6d32253e752 100644
--- a/src/renderer/views/Popular/Popular.js
+++ b/src/renderer/views/Popular/Popular.js
@@ -1,4 +1,4 @@
-import Vue from 'vue'
+import { defineComponent } from 'vue'
 import FtLoader from '../../components/ft-loader/ft-loader.vue'
 import FtCard from '../../components/ft-card/ft-card.vue'
 import FtElementList from '../../components/ft-element-list/ft-element-list.vue'
@@ -6,7 +6,7 @@ import FtIconButton from '../../components/ft-icon-button/ft-icon-button.vue'
 
 import { invidiousAPICall } from '../../helpers/api/invidious'
 
-export default Vue.extend({
+export default defineComponent({
   name: 'Popular',
   components: {
     'ft-loader': FtLoader,
diff --git a/src/renderer/views/ProfileEdit/ProfileEdit.js b/src/renderer/views/ProfileEdit/ProfileEdit.js
index 3c5c5d8ece6ac..1987f62f201da 100644
--- a/src/renderer/views/ProfileEdit/ProfileEdit.js
+++ b/src/renderer/views/ProfileEdit/ProfileEdit.js
@@ -1,4 +1,4 @@
-import Vue from 'vue'
+import { defineComponent } from 'vue'
 import { mapGetters } from 'vuex'
 import FtLoader from '../../components/ft-loader/ft-loader.vue'
 import FtProfileEdit from '../../components/ft-profile-edit/ft-profile-edit.vue'
@@ -8,7 +8,7 @@ import { MAIN_PROFILE_ID } from '../../../constants'
 import { calculateColorLuminance, getRandomColor } from '../../helpers/colors'
 import { showToast } from '../../helpers/utils'
 
-export default Vue.extend({
+export default defineComponent({
   name: 'ProfileEdit',
   components: {
     'ft-loader': FtLoader,
diff --git a/src/renderer/views/ProfileSettings/ProfileSettings.js b/src/renderer/views/ProfileSettings/ProfileSettings.js
index 007be833ef1cc..0324f46087cc3 100644
--- a/src/renderer/views/ProfileSettings/ProfileSettings.js
+++ b/src/renderer/views/ProfileSettings/ProfileSettings.js
@@ -1,10 +1,10 @@
-import Vue from 'vue'
+import { defineComponent } from 'vue'
 import FtCard from '../../components/ft-card/ft-card.vue'
 import FtFlexBox from '../../components/ft-flex-box/ft-flex-box.vue'
 import FtProfileBubble from '../../components/ft-profile-bubble/ft-profile-bubble.vue'
 import FtButton from '../../components/ft-button/ft-button.vue'
 
-export default Vue.extend({
+export default defineComponent({
   name: 'ProfileSettings',
   components: {
     'ft-card': FtCard,
diff --git a/src/renderer/views/Search/Search.js b/src/renderer/views/Search/Search.js
index 344dbf7332c60..853dded9cf198 100644
--- a/src/renderer/views/Search/Search.js
+++ b/src/renderer/views/Search/Search.js
@@ -1,4 +1,4 @@
-import Vue from 'vue'
+import { defineComponent } from 'vue'
 import FtLoader from '../../components/ft-loader/ft-loader.vue'
 import FtCard from '../../components/ft-card/ft-card.vue'
 import FtElementList from '../../components/ft-element-list/ft-element-list.vue'
@@ -6,7 +6,7 @@ import { copyToClipboard, searchFiltersMatch, showToast } from '../../helpers/ut
 import { getLocalSearchContinuation, getLocalSearchResults } from '../../helpers/api/local'
 import { invidiousAPICall } from '../../helpers/api/invidious'
 
-export default Vue.extend({
+export default defineComponent({
   name: 'Search',
   components: {
     'ft-loader': FtLoader,
diff --git a/src/renderer/views/Settings/Settings.js b/src/renderer/views/Settings/Settings.js
index 3e516881131bd..df06cdb04ce37 100644
--- a/src/renderer/views/Settings/Settings.js
+++ b/src/renderer/views/Settings/Settings.js
@@ -1,4 +1,4 @@
-import Vue from 'vue'
+import { defineComponent } from 'vue'
 import GeneralSettings from '../../components/general-settings/general-settings.vue'
 import ThemeSettings from '../../components/theme-settings/theme-settings.vue'
 import PlayerSettings from '../../components/player-settings/player-settings.vue'
@@ -15,7 +15,7 @@ import ExperimentalSettings from '../../components/experimental-settings/experim
 import PasswordSettings from '../../components/password-settings/password-settings.vue'
 import PasswordDialog from '../../components/password-dialog/password-dialog.vue'
 
-export default Vue.extend({
+export default defineComponent({
   name: 'Settings',
   components: {
     'general-settings': GeneralSettings,
diff --git a/src/renderer/views/SubscribedChannels/SubscribedChannels.js b/src/renderer/views/SubscribedChannels/SubscribedChannels.js
index 60c9910fc343c..022e9697786f1 100644
--- a/src/renderer/views/SubscribedChannels/SubscribedChannels.js
+++ b/src/renderer/views/SubscribedChannels/SubscribedChannels.js
@@ -1,4 +1,4 @@
-import Vue from 'vue'
+import { defineComponent } from 'vue'
 import { mapActions } from 'vuex'
 import FtButton from '../../components/ft-button/ft-button.vue'
 import FtCard from '../../components/ft-card/ft-card.vue'
@@ -9,7 +9,7 @@ import ytch from 'yt-channel-info'
 import { showToast } from '../../helpers/utils'
 import { invidiousGetChannelInfo, youtubeImageUrlToInvidious, invidiousImageUrlToInvidious } from '../../helpers/api/invidious'
 
-export default Vue.extend({
+export default defineComponent({
   name: 'SubscribedChannels',
   components: {
     'ft-button': FtButton,
diff --git a/src/renderer/views/Subscriptions/Subscriptions.js b/src/renderer/views/Subscriptions/Subscriptions.js
index b1c3c2cf8625e..a368884e86cb2 100644
--- a/src/renderer/views/Subscriptions/Subscriptions.js
+++ b/src/renderer/views/Subscriptions/Subscriptions.js
@@ -1,4 +1,4 @@
-import Vue from 'vue'
+import { defineComponent } from 'vue'
 import { mapActions, mapMutations } from 'vuex'
 import FtLoader from '../../components/ft-loader/ft-loader.vue'
 import FtCard from '../../components/ft-card/ft-card.vue'
@@ -13,7 +13,7 @@ import { MAIN_PROFILE_ID } from '../../../constants'
 import { calculatePublishedDate, copyToClipboard, showToast } from '../../helpers/utils'
 import { invidiousAPICall } from '../../helpers/api/invidious'
 
-export default Vue.extend({
+export default defineComponent({
   name: 'Subscriptions',
   components: {
     'ft-loader': FtLoader,
diff --git a/src/renderer/views/Trending/Trending.js b/src/renderer/views/Trending/Trending.js
index 2ab09df50741f..0426f723169d7 100644
--- a/src/renderer/views/Trending/Trending.js
+++ b/src/renderer/views/Trending/Trending.js
@@ -1,4 +1,4 @@
-import Vue from 'vue'
+import { defineComponent } from 'vue'
 import FtCard from '../../components/ft-card/ft-card.vue'
 import FtLoader from '../../components/ft-loader/ft-loader.vue'
 import FtElementList from '../../components/ft-element-list/ft-element-list.vue'
@@ -9,7 +9,7 @@ import { copyToClipboard, showToast } from '../../helpers/utils'
 import { getLocalTrending } from '../../helpers/api/local'
 import { invidiousAPICall } from '../../helpers/api/invidious'
 
-export default Vue.extend({
+export default defineComponent({
   name: 'Trending',
   components: {
     'ft-card': FtCard,
diff --git a/src/renderer/views/UserPlaylists/UserPlaylists.js b/src/renderer/views/UserPlaylists/UserPlaylists.js
index a849f8d4acb84..685a0fd5a1805 100644
--- a/src/renderer/views/UserPlaylists/UserPlaylists.js
+++ b/src/renderer/views/UserPlaylists/UserPlaylists.js
@@ -1,4 +1,4 @@
-import Vue from 'vue'
+import { defineComponent, nextTick } from 'vue'
 import FtCard from '../../components/ft-card/ft-card.vue'
 import FtFlexBox from '../../components/ft-flex-box/ft-flex-box.vue'
 import FtTooltip from '../../components/ft-tooltip/ft-tooltip.vue'
@@ -7,7 +7,7 @@ import FtButton from '../../components/ft-button/ft-button.vue'
 import FtElementList from '../../components/ft-element-list/ft-element-list.vue'
 import FtInput from '../../components/ft-input/ft-input.vue'
 
-export default Vue.extend({
+export default defineComponent({
   name: 'UserPlaylists',
   components: {
     'ft-card': FtCard,
@@ -110,9 +110,9 @@ export default Vue.extend({
     refreshPage: function() {
       const scrollPos = window.scrollY || window.scrollTop || document.getElementsByTagName('html')[0].scrollTop
       this.isLoading = true
-      Vue.nextTick(() => {
+      nextTick(() => {
         this.isLoading = false
-        Vue.nextTick(() => {
+        nextTick(() => {
           window.scrollTo(0, scrollPos)
         })
       })
diff --git a/src/renderer/views/Watch/Watch.js b/src/renderer/views/Watch/Watch.js
index 4857448540d4c..9a8f3422298c8 100644
--- a/src/renderer/views/Watch/Watch.js
+++ b/src/renderer/views/Watch/Watch.js
@@ -1,4 +1,4 @@
-import Vue from 'vue'
+import { defineComponent } from 'vue'
 import { mapActions } from 'vuex'
 import fs from 'fs/promises'
 import FtLoader from '../../components/ft-loader/ft-loader.vue'
@@ -30,7 +30,7 @@ import {
 } from '../../helpers/api/local'
 import { invidiousGetVideoInformation, youtubeImageUrlToInvidious } from '../../helpers/api/invidious'
 
-export default Vue.extend({
+export default defineComponent({
   name: 'Watch',
   components: {
     'ft-loader': FtLoader,