⬆️ Apply nuxt 4 compatibility mode (#2850)

client/components/About.vue → client/app/components/About.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { description, version } from '@/../package.json';
-import BadgeButton from '@/components/buttons/BadgeButton.vue';
+import { description, version } from '~~/../package.json';
+import BadgeButton from '~/components/buttons/BadgeButton.vue';
 
-import { commit, abbreviated_commit, subject } from '@/buildMetadata.json';
-import { useMessagesStore } from '@/store/messages';
+import { commit, abbreviated_commit, subject } from '~~/buildMetadata.json';
+import { useMessagesStore } from '~/store/messages';
 
 defineEmits<{
   (e: 'close'): void;
@@ -28,7 +28,7 @@ const copyCommitHash = () => {
       <VTIcon v-ripple name="mdi:close" class="close-icon" @click.stop="$emit('close')" />
       <h1>About</h1>
       <div class="logo-about">
-        <img class="logo-about-img" src="@/assets/icon.svg" alt="ViewTube" />
+        <img class="logo-about-img" src="~/assets/icon.svg" alt="ViewTube" />
       </div>
       <h2>{{ description }}</h2>
       <div class="last-commit">
@@ -60,7 +60,7 @@ const copyCommitHash = () => {
         <div class="external-service links">
           <img
             class="external-service-image"
-            src="@/assets/icons/sponsorblock.png"
+            src="~/assets/icons/sponsorblock.png"
             alt="Sponsorblock icon"
           />
           <p>

client/components/Comment.vue → client/app/components/Comment.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import BadgeButton from '@/components/buttons/BadgeButton.vue';
-import { useMessagesStore } from '@/store/messages';
+import BadgeButton from '~/components/buttons/BadgeButton.vue';
+import { useMessagesStore } from '~/store/messages';
 import type { ApiDto } from '@viewtube/shared';
 
 const props = defineProps<{

client/components/Logo.vue → client/app/components/Logo.vue

@@ -4,7 +4,7 @@
       <span>View</span>
       <span class="logo-colored">Tube</span>
     </h1>
-    <img class="logo-small" src="@/assets/icon.svg" alt="ViewTube" />
+    <img class="logo-small" src="~/assets/icon.svg" alt="ViewTube" />
   </nuxt-link>
 </template>
 

client/components/Settings.vue → client/app/components/Settings.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import ThemeSelector from '@/components/themes/ThemeSelector.vue';
-import SwitchButton from '@/components/buttons/SwitchButton.vue';
-import MultiOptionButton from '@/components/buttons/MultiOptionButton.vue';
-import Dropdown from '@/components/filter/Dropdown.vue';
-import '@/assets/styles/popup.scss';
-import { type SegmentOption, useSettingsStore } from '@/store/settings';
+import ThemeSelector from '~/components/themes/ThemeSelector.vue';
+import SwitchButton from '~/components/buttons/SwitchButton.vue';
+import MultiOptionButton from '~/components/buttons/MultiOptionButton.vue';
+import Dropdown from '~/components/filter/Dropdown.vue';
+import '~/assets/styles/popup.scss';
+import { type SegmentOption, useSettingsStore } from '~/store/settings';
 import CheckBox from '~/components/form/CheckBox.vue';
 import BadgeButton from './buttons/BadgeButton.vue';
 
@@ -114,7 +114,7 @@ function resetSponsorBlockUrl() {
       <h2>
         <img
           class="sponsorblock-image"
-          src="@/assets/icons/sponsorblock.png"
+          src="~/assets/icons/sponsorblock.png"
           alt="Sponsorblock icon"
         />Block ads and annoyances
       </h2>

client/components/admin/BlockedVideos.vue → client/app/components/admin/BlockedVideos.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import BadgeButton from '@/components/buttons/BadgeButton.vue';
+import BadgeButton from '~/components/buttons/BadgeButton.vue';
 
 const { data, pending, refresh } = useGetBlockedVideos();
 const videoIdToAdd = ref(null);

client/components/admin/CreateUser.vue → client/app/components/admin/CreateUser.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useMessagesStore } from '@/store/messages';
+import { useMessagesStore } from '~/store/messages';
 
 const username = ref('');
 const password = ref('');

client/components/admin/Info.vue → client/app/components/admin/Info.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import BadgeButton from '@/components/buttons/BadgeButton.vue';
+import BadgeButton from '~/components/buttons/BadgeButton.vue';
 const { data, refresh, pending } = useGetAdminInfo();
 </script>
 

client/components/admin/LogFiles.vue → client/app/components/admin/LogFiles.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import BadgeButton from '@/components/buttons/BadgeButton.vue';
+import BadgeButton from '~/components/buttons/BadgeButton.vue';
 import dayjs from 'dayjs';
 
 const { data, error, pending, refresh } = useGetLogs();

client/components/buttons/SubscribeButton.vue → client/app/components/buttons/SubscribeButton.vue

@@ -23,8 +23,8 @@
 </template>
 
 <script lang="ts">
-import { useMessagesStore } from '@/store/messages';
-import { useUserStore } from '@/store/user';
+import { useMessagesStore } from '~/store/messages';
+import { useUserStore } from '~/store/user';
 import type { ApiDto } from '@viewtube/shared';
 
 export default defineComponent({

client/components/channel/BannerSection.vue → client/app/components/channel/BannerSection.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import SubscribeButton from '@/components/buttons/SubscribeButton.vue';
+import SubscribeButton from '~/components/buttons/SubscribeButton.vue';
 import humanNumber from 'human-number';
 import type { ApiDto } from '@viewtube/shared';
 

client/components/channel/PageError.vue → client/app/components/channel/PageError.vue

@@ -7,7 +7,7 @@ defineProps<{
 <template>
   <div class="channel-page-error-container">
     <div class="channel-page-error">
-      <img class="channel-page-icon" src="@/assets/icon-error.svg" alt="Viewtube broken logo" />
+      <img class="channel-page-icon" src="~/assets/icon-error.svg" alt="Viewtube broken logo" />
     </div>
     <p class="error-message">{{ errorMessage }}</p>
   </div>

client/components/channel/PlaylistShelf.vue → client/app/components/channel/PlaylistShelf.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import VideoEntry from '@/components/list/VideoEntry.vue';
+import VideoEntry from '~/components/list/VideoEntry.vue';
 import type { ApiDto } from '@viewtube/shared';
 
 type ShelfType = {

client/components/channel/PlaylistsShelf.vue → client/app/components/channel/PlaylistsShelf.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import PlaylistEntry from '@/components/list/PlaylistEntry.vue';
+import PlaylistEntry from '~/components/list/PlaylistEntry.vue';
 
 type ShelfItemType = {
   title: string;

client/components/channel/VideoPage.vue → client/app/components/channel/VideoPage.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import VideoEntry from '@/components/list/VideoEntry.vue';
-import PlaylistEntry from '@/components/list/PlaylistEntry.vue';
-import MultiOptionButton from '@/components/buttons/MultiOptionButton.vue';
-import BadgeButton from '@/components/buttons/BadgeButton.vue';
+import VideoEntry from '~/components/list/VideoEntry.vue';
+import PlaylistEntry from '~/components/list/PlaylistEntry.vue';
+import MultiOptionButton from '~/components/buttons/MultiOptionButton.vue';
+import BadgeButton from '~/components/buttons/BadgeButton.vue';
 import type { ApiDto } from '@viewtube/shared';
 
 const props = withDefaults(

client/components/channel/page/Channels.vue → client/app/components/channel/page/Channels.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { useMessagesStore } from '@/store/messages';
+import { useMessagesStore } from '~/store/messages';
 import RelatedChannels from '../RelatedChannels.vue';
-import BadgeButton from '@/components/buttons/BadgeButton.vue';
+import BadgeButton from '~/components/buttons/BadgeButton.vue';
 
 const route = useRoute();
 const messagesStore = useMessagesStore();

client/components/channel/page/Community.vue → client/app/components/channel/page/Community.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { useMessagesStore } from '@/store/messages';
-import BadgeButton from '@/components/buttons/BadgeButton.vue';
+import { useMessagesStore } from '~/store/messages';
+import BadgeButton from '~/components/buttons/BadgeButton.vue';
 
 const route = useRoute();
 const messagesStore = useMessagesStore();

client/components/channel/page/Home.vue → client/app/components/channel/page/Home.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import dayjs from 'dayjs';
-import RelatedChannels from '@/components/channel/RelatedChannels.vue';
-import BadgeButton from '@/components/buttons/BadgeButton.vue';
+import RelatedChannels from '~/components/channel/RelatedChannels.vue';
+import BadgeButton from '~/components/buttons/BadgeButton.vue';
 
 const route = useRoute();
 

client/components/flip/SeekbarPreview.vue → client/app/components/flip/SeekbarPreview.vue

@@ -148,7 +148,7 @@ const currentSponsorBlockSegmentColor = computed(() => {
         :class="{ visible: currentSponsorBlockSegmentCategory }"
         class="preview-info-element sponsorblock"
       >
-        <img class="sponsorblock-icon" src="@/assets/icons/sponsorblock.png" />
+        <img class="sponsorblock-icon" src="~/assets/icons/sponsorblock.png" />
         <span class="info-text">{{ currentSponsorBlockSegmentCategory?.text ?? '' }}</span>
       </div>
     </div>

client/components/flip/SkipButton.vue → client/app/components/flip/SkipButton.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useSettingsStore } from '@/store/settings';
+import { useSettingsStore } from '~/store/settings';
 
 const props = defineProps<{
   uiState: UiState;

client/components/form/LoginForm.vue → client/app/components/form/LoginForm.vue

@@ -19,12 +19,12 @@
 </template>
 
 <script lang="ts">
-import InformationHint from '@/components/hints/InformationHint.vue';
-import FormInput from '@/components/form/FormInput.vue';
-import SubmitButton from '@/components/form/SubmitButton.vue';
-import Spinner from '@/components/Spinner.vue';
-import { useMessagesStore } from '@/store/messages';
-import { useUserStore } from '@/store/user';
+import InformationHint from '~/components/hints/InformationHint.vue';
+import FormInput from '~/components/form/FormInput.vue';
+import SubmitButton from '~/components/form/SubmitButton.vue';
+import Spinner from '~/components/Spinner.vue';
+import { useMessagesStore } from '~/store/messages';
+import { useUserStore } from '~/store/user';
 
 export default defineComponent({
   name: 'LoginForm',

client/components/form/PasswordChangeForm.vue → client/app/components/form/PasswordChangeForm.vue

@@ -38,12 +38,12 @@
 </template>
 
 <script lang="ts">
-import FormInput from '@/components/form/FormInput.vue';
-import SubmitButton from '@/components/form/SubmitButton.vue';
-import Spinner from '@/components/Spinner.vue';
-import '@/assets/styles/popup.scss';
-import { useMessagesStore } from '@/store/messages';
-import { useUserStore } from '@/store/user';
+import FormInput from '~/components/form/FormInput.vue';
+import SubmitButton from '~/components/form/SubmitButton.vue';
+import Spinner from '~/components/Spinner.vue';
+import '~/assets/styles/popup.scss';
+import { useMessagesStore } from '~/store/messages';
+import { useUserStore } from '~/store/user';
 
 export default defineComponent({
   name: 'PasswordChangeForm',

client/components/form/RegisterForm.vue → client/app/components/form/RegisterForm.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import FormInput from '@/components/form/FormInput.vue';
-import InformationHint from '@/components/hints/InformationHint.vue';
-import SubmitButton from '@/components/form/SubmitButton.vue';
-import Spinner from '@/components/Spinner.vue';
-import { useMessagesStore } from '@/store/messages';
-import { useUserStore } from '@/store/user';
-import { useCaptchaStore } from '@/store/captcha';
+import FormInput from '~/components/form/FormInput.vue';
+import InformationHint from '~/components/hints/InformationHint.vue';
+import SubmitButton from '~/components/form/SubmitButton.vue';
+import Spinner from '~/components/Spinner.vue';
+import { useMessagesStore } from '~/store/messages';
+import { useUserStore } from '~/store/user';
+import { useCaptchaStore } from '~/store/captcha';
 
 const props = defineProps<{
   complete?: () => void;

client/components/header/MainHeader.vue → client/app/components/header/MainHeader.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import Logo from '@/components/Logo.vue';
-import MainSearchBox from '@/components/MainSearchBox.vue';
-import UserMenu from '@/components/header/UserMenu.vue';
-import { useSettingsStore } from '@/store/settings';
-import { useUserStore } from '@/store/user';
+import Logo from '~/components/Logo.vue';
+import MainSearchBox from '~/components/MainSearchBox.vue';
+import UserMenu from '~/components/header/UserMenu.vue';
+import { useSettingsStore } from '~/store/settings';
+import { useUserStore } from '~/store/user';
 const settingsStore = useSettingsStore();
 const userStore = useUserStore();
 const route = useRoute();

client/components/header/UserMenu.vue → client/app/components/header/UserMenu.vue

@@ -150,10 +150,10 @@
 <script lang="ts">
 import LoginForm from '../form/LoginForm.vue';
 import RegisterForm from '../form/RegisterForm.vue';
-import Settings from '@/components/Settings.vue';
-import About from '@/components/About.vue';
-import { useUserStore } from '@/store/user';
-import { usePopupStore } from '@/store/popup';
+import Settings from '~/components/Settings.vue';
+import About from '~/components/About.vue';
+import { useUserStore } from '~/store/user';
+import { usePopupStore } from '~/store/popup';
 
 export default defineComponent({
   name: 'UserMenu',

client/components/history/HistoryList.vue → client/app/components/history/HistoryList.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import humanizeDuration from 'humanize-duration';
-import BadgeButton from '@/components/buttons/BadgeButton.vue';
+import BadgeButton from '~/components/buttons/BadgeButton.vue';
 import type { ApiDto } from '@viewtube/shared';
-import { useMessagesStore } from '@/store/messages';
+import { useMessagesStore } from '~/store/messages';
 
 defineProps<{
   historyVideos: ApiDto<'HistoryResponseDto'>['videos'];

client/components/home/Subscriptions.vue → client/app/components/home/Subscriptions.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import BadgeButton from '@/components/buttons/BadgeButton.vue';
-import VideoEntry from '@/components/list/VideoEntry.vue';
-import { useSettingsStore } from '@/store/settings';
+import BadgeButton from '~/components/buttons/BadgeButton.vue';
+import VideoEntry from '~/components/list/VideoEntry.vue';
+import { useSettingsStore } from '~/store/settings';
 
 const settingsStore = useSettingsStore();
 const { data: subscriptions, pending: subscriptionsLoading } = useGetUserSubscriptions({

client/components/home/VideosContainer.vue → client/app/components/home/VideosContainer.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import VideoEntry from '@/components/list/VideoEntry.vue';
-import BadgeButton from '@/components/buttons/BadgeButton.vue';
-import { useUserStore } from '@/store/user';
+import VideoEntry from '~/components/list/VideoEntry.vue';
+import BadgeButton from '~/components/buttons/BadgeButton.vue';
+import { useUserStore } from '~/store/user';
 
 const props = defineProps<{
   videos: any[];

client/components/list/VideoEntry.vue → client/app/components/list/VideoEntry.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useLoadingVideoInfoStore } from '@/store/loadingVideoInfo';
+import { useLoadingVideoInfoStore } from '~/store/loadingVideoInfo';
 import dayjs from 'dayjs';
 
 type VideoType = {

client/components/message/MessageBox.vue → client/app/components/message/MessageBox.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { MessageType } from '@/types/MessageType';
-import { useMessagesStore } from '@/store/messages';
+import type { MessageType } from '~/types/MessageType';
+import { useMessagesStore } from '~/store/messages';
 
 const props = defineProps<{
   message: MessageType;

client/components/message/MessageBoxContainer.vue → client/app/components/message/MessageBoxContainer.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import MessageBox from '@/components/message/MessageBox.vue';
-import { useMessagesStore } from '@/store/messages';
+import MessageBox from '~/components/message/MessageBox.vue';
+import { useMessagesStore } from '~/store/messages';
 
 const messagesStore = useMessagesStore();
 </script>

client/components/pagination/Pagination.vue → client/app/components/pagination/Pagination.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import BadgeButton from '@/components/buttons/BadgeButton.vue';
+import BadgeButton from '~/components/buttons/BadgeButton.vue';
 const props = defineProps<{ currentPage: number; pageCount: number }>();
 
 const maxNumber = ref(6);

client/components/popup/Edit.vue → client/app/components/popup/Edit.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import BadgeButton from '@/components/buttons/BadgeButton.vue';
+import BadgeButton from '~/components/buttons/BadgeButton.vue';
 
 const props = defineProps<{
   title: string;

client/components/popup/QrPopUp.vue → client/app/components/popup/QrPopUp.vue

@@ -11,7 +11,7 @@
 
 <script lang="ts">
 import * as QRCode from 'qrcode';
-import '@/assets/styles/popup.scss';
+import '~/assets/styles/popup.scss';
 
 export default defineComponent({
   name: 'QrPopUp',

client/components/popup/SubscriptionIO.vue → client/app/components/popup/SubscriptionIO.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import CheckBox from '@/components/form/CheckBox.vue';
-import BadgeButton from '@/components/buttons/BadgeButton.vue';
-import FileButton from '@/components/form/FileButton.vue';
-import Spinner from '@/components/Spinner.vue';
-import '@/assets/styles/popup.scss';
+import CheckBox from '~/components/form/CheckBox.vue';
+import BadgeButton from '~/components/buttons/BadgeButton.vue';
+import FileButton from '~/components/form/FileButton.vue';
+import Spinner from '~/components/Spinner.vue';
+import '~/assets/styles/popup.scss';
 
 class ChannelDto {
   author: string;

client/components/search/RelatedSearches.vue → client/app/components/search/RelatedSearches.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import BadgeButton from '@/components/buttons/BadgeButton.vue';
+import BadgeButton from '~/components/buttons/BadgeButton.vue';
 defineProps<{
   refinements: string[];
 }>();