Switch from Vue.extend to defineComponent

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,

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,

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,

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,

src/renderer/components/experimental-settings/experimental-settings.js

@@ -1,13 +1,13 @@
 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'
 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,

src/renderer/components/external-player-settings/external-player-settings.js

@@ -1,12 +1,12 @@
-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'
 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,

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: {

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: {

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: {

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'
 })

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: {

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,

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'
 })

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: {

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,

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

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: {

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: {

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,

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

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

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

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: {

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: {

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: {

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,

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,

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,

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,

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 () {

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,

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: {

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,

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