diff --git a/src/renderer/App.js b/src/renderer/App.js
index a4500b93f..bfe3f74e8 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 ca61126f3..eca9b0f96 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 939ecba67..fa5b08326 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 9e4faabca..e60d1a56c 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 ff2a1cb7c..b4d5e8923 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 69c58c056..c2fc0647d 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 cc38888f3..7e925441b 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 2befee458..d9d1e2152 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 74eb0ba84..808b8949b 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 baea9fec7..29d02d724 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 ca2a775cb..d3d2430de 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 319d31dc7..50b2e5137 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 41e5bf881..6982d31ed 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 bbb7d9a90..49a6aedcb 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 7e4f2b6f3..08f8907af 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 25b7e8c8c..91c80340f 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 09e33e2fe..137f86bd0 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 b53ca8941..f9d20dfa3 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 5d13c0a56..7cee6fd49 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 b310135f3..1f8c7ade0 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 fcffb9278..a2e9391ce 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 40b12e9ba..cef6a2560 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 592de4600..72643c4db 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 f5333c67b..ce6e4adc2 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 4652e17cc..63d9f0139 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 9d0483041..45fe6d35a 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 d8eb17951..9cb26020c 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 2e4cea562..ece62f7ac 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 fc5b89c8c..e68a29047 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 c5e7fcbc0..14b91aa2c 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 22b6c2bf0..da1711946 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 ee9554bc7..f91358115 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 47c812a80..aaf0c7b66 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 120a0e55a..e6050edad 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 8d1640951..3b0e9ebaf 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 9c12f296e..fe9a63fab 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 fb0b56ee8..31028d74f 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 96b6290fd..a0318f55a 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 b093092d4..940213031 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 81c97fd51..cc6b1ad84 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 3df674d11..0e61f0c46 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 fc34ec65d..2b4e61a83 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 54bae1570..f1eb5ee4b 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 4c19aba53..de94dea2e 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 10a678e3f..fd064ae63 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 b201e57c3..ed4b5e99c 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 ca6f03894..079bbbf48 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 c2c7551bd..ecaea38b1 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 bf421ae1f..54ec8b9ad 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 74046499c..145fe6eb4 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 33df0bf8d..f288467d2 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 0a943afae..83bae2a4d 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 b9940b4a0..31709f258 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 80ad8e516..af1fd5abf 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 510c42f5e..97508e40f 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 b8bc2e161..2d322d673 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 90026ea8d..a0e003726 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 36a88bc48..3ec1e191f 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 b79d2f7ac..bad2f65b5 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 eb370e175..fcfe1458c 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 44ac81aa8..03ca3496f 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 11f558153..4df8793ff 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 05f32a003..6839c27a9 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 bc52a540b..0c6f34dee 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 3e65a78dd..669f9854f 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 ecc5ed23c..8070a675f 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 bf6569be8..172bdcf30 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 bba96d2ca..65e4445b4 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 03f35f875..ea6d32253 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 3c5c5d8ec..1987f62f2 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 007be833e..0324f4608 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 344dbf733..853dded9c 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 3e5168811..df06cdb04 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 60c9910fc..022e96977 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 b1c3c2cf8..a368884e8 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 2ab09df50..0426f7231 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 a849f8d4a..685a0fd5a 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 485744854..9a8f34222 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,