diff --git a/frontend_nuxt/components/AchievementList.vue b/frontend_nuxt/components/AchievementList.vue
index 1f84ec9de..f69c1fb21 100644
--- a/frontend_nuxt/components/AchievementList.vue
+++ b/frontend_nuxt/components/AchievementList.vue
@@ -37,8 +37,8 @@
 
 <script setup>
 import { computed } from 'vue'
-import { API_BASE_URL, toast } from '../main'
-import { getToken } from '../utils/auth'
+import { API_BASE_URL, toast } from '~/main'
+import { getToken } from '~/utils/auth'
 
 const props = defineProps({
   medals: {
diff --git a/frontend_nuxt/components/CommentEditor.vue b/frontend_nuxt/components/CommentEditor.vue
index 03c31d308..0914d3ef1 100644
--- a/frontend_nuxt/components/CommentEditor.vue
+++ b/frontend_nuxt/components/CommentEditor.vue
@@ -14,15 +14,15 @@
 </template>
 
 <script>
-import { ref, onMounted, computed, watch, onUnmounted, useId } from 'vue'
-import { themeState } from '../utils/theme'
+import { computed, onMounted, onUnmounted, ref, useId, watch } from 'vue'
+import { clearVditorStorage } from '~/utils/clearVditorStorage'
+import { themeState } from '~/utils/theme'
 import {
   createVditor,
   getEditorTheme as getEditorThemeUtil,
   getPreviewTheme as getPreviewThemeUtil,
-} from '../utils/vditor'
-import LoginOverlay from './LoginOverlay.vue'
-import { clearVditorStorage } from '../utils/clearVditorStorage'
+} from '~/utils/vditor'
+import LoginOverlay from '~/components/LoginOverlay.vue'
 
 export default {
   name: 'CommentEditor',
diff --git a/frontend_nuxt/components/CommentItem.vue b/frontend_nuxt/components/CommentItem.vue
index 53e1dc191..f22524622 100644
--- a/frontend_nuxt/components/CommentItem.vue
+++ b/frontend_nuxt/components/CommentItem.vue
@@ -89,19 +89,19 @@
 </template>
 
 <script>
-import { ref, watch, computed, nextTick } from 'vue'
+import { computed, ref, watch } from 'vue'
 import VueEasyLightbox from 'vue-easy-lightbox'
 import { useRouter } from 'vue-router'
-import CommentEditor from './CommentEditor.vue'
-import { renderMarkdown, handleMarkdownClick } from '../utils/markdown'
-import { getMedalTitle } from '../utils/medal'
-import TimeManager from '../utils/time'
-import BaseTimeline from './BaseTimeline.vue'
-import { API_BASE_URL, toast } from '../main'
-import { getToken, authState } from '../utils/auth'
-import ReactionsGroup from './ReactionsGroup.vue'
-import DropdownMenu from './DropdownMenu.vue'
-import LoginOverlay from './LoginOverlay.vue'
+import { API_BASE_URL, toast } from '~/main'
+import { authState, getToken } from '~/utils/auth'
+import { handleMarkdownClick, renderMarkdown } from '~/utils/markdown'
+import { getMedalTitle } from '~/utils/medal'
+import TimeManager from '~/utils/time'
+import BaseTimeline from '~/components/BaseTimeline.vue'
+import CommentEditor from '~/components/CommentEditor.vue'
+import DropdownMenu from '~/components/DropdownMenu.vue'
+import LoginOverlay from '~/components/LoginOverlay.vue'
+import ReactionsGroup from '~/components/ReactionsGroup.vue'
 
 const CommentItem = {
   name: 'CommentItem',
diff --git a/frontend_nuxt/components/LevelProgress.vue b/frontend_nuxt/components/LevelProgress.vue
index 8d0def95c..2c17b13ea 100644
--- a/frontend_nuxt/components/LevelProgress.vue
+++ b/frontend_nuxt/components/LevelProgress.vue
@@ -10,8 +10,8 @@
 </template>
 
 <script>
-import ProgressBar from './ProgressBar.vue'
-import { prevLevelExp } from '../utils/level'
+import { prevLevelExp } from '~/utils/level'
+import ProgressBar from '~/components/ProgressBar.vue'
 export default {
   name: 'LevelProgress',
   components: { ProgressBar },
diff --git a/frontend_nuxt/components/MilkTeaActivityComponent.vue b/frontend_nuxt/components/MilkTeaActivityComponent.vue
index 4221270b1..715d11c7b 100644
--- a/frontend_nuxt/components/MilkTeaActivityComponent.vue
+++ b/frontend_nuxt/components/MilkTeaActivityComponent.vue
@@ -58,12 +58,12 @@
 </template>
 
 <script>
-import ProgressBar from './ProgressBar.vue'
-import LevelProgress from './LevelProgress.vue'
-import BaseInput from './BaseInput.vue'
-import BasePopup from './BasePopup.vue'
-import { API_BASE_URL, toast } from '../main'
-import { getToken, fetchCurrentUser } from '../utils/auth'
+import { API_BASE_URL, toast } from '~/main'
+import { fetchCurrentUser, getToken } from '~/utils/auth'
+import BaseInput from '~/components/BaseInput.vue'
+import BasePopup from '~/components/BasePopup.vue'
+import LevelProgress from '~/components/LevelProgress.vue'
+import ProgressBar from '~/components/ProgressBar.vue'
 
 export default {
   name: 'MilkTeaActivityComponent',
@@ -218,24 +218,30 @@ export default {
   border-radius: 10px;
   cursor: pointer;
 }
+
 .redeem-submit-button:disabled {
   background-color: var(--primary-color-disabled);
   cursor: not-allowed;
 }
+
 .redeem-submit-button:hover {
   background-color: var(--primary-color-hover);
 }
+
 .redeem-submit-button:disabled:hover {
   background-color: var(--primary-color-disabled);
 }
+
 .redeem-cancel-button {
   color: var(--primary-color);
   border-radius: 10px;
   cursor: pointer;
 }
+
 .redeem-cancel-button:hover {
   text-decoration: underline;
 }
+
 .user-level-text {
   opacity: 0.8;
   font-size: 12px;
diff --git a/frontend_nuxt/components/NotificationContainer.vue b/frontend_nuxt/components/NotificationContainer.vue
index 045934a05..db002aab4 100644
--- a/frontend_nuxt/components/NotificationContainer.vue
+++ b/frontend_nuxt/components/NotificationContainer.vue
@@ -13,7 +13,7 @@
 </template>
 
 <script>
-import { useIsMobile } from '../utils/screen'
+import { useIsMobile } from '~/utils/screen'
 export default {
   name: 'NotificationContainer',
   props: {
diff --git a/frontend_nuxt/components/PostEditor.vue b/frontend_nuxt/components/PostEditor.vue
index 72c8f0c4f..06994e041 100644
--- a/frontend_nuxt/components/PostEditor.vue
+++ b/frontend_nuxt/components/PostEditor.vue
@@ -8,14 +8,14 @@
 </template>
 
 <script>
-import { ref, onMounted, watch, onUnmounted, useId } from 'vue'
-import { themeState } from '../utils/theme'
+import { onMounted, onUnmounted, ref, useId, watch } from 'vue'
+import { clearVditorStorage } from '~/utils/clearVditorStorage'
+import { themeState } from '~/utils/theme'
 import {
   createVditor,
   getEditorTheme as getEditorThemeUtil,
   getPreviewTheme as getPreviewThemeUtil,
-} from '../utils/vditor'
-import { clearVditorStorage } from '../utils/clearVditorStorage'
+} from '~/utils/vditor'
 
 export default {
   name: 'PostEditor',
diff --git a/frontend_nuxt/components/ReactionsGroup.vue b/frontend_nuxt/components/ReactionsGroup.vue
index 895cb9f03..af751d09e 100644
--- a/frontend_nuxt/components/ReactionsGroup.vue
+++ b/frontend_nuxt/components/ReactionsGroup.vue
@@ -47,10 +47,10 @@
 </template>
 
 <script>
-import { ref, computed, watch, onMounted } from 'vue'
-import { API_BASE_URL, toast } from '../main'
-import { getToken, authState } from '../utils/auth'
-import { reactionEmojiMap } from '../utils/reactions'
+import { computed, onMounted, ref, watch } from 'vue'
+import { API_BASE_URL, toast } from '~/main'
+import { authState, getToken } from '~/utils/auth'
+import { reactionEmojiMap } from '~/utils/reactions'
 
 let cachedTypes = null
 const fetchTypes = async () => {
diff --git a/frontend_nuxt/components/UserList.vue b/frontend_nuxt/components/UserList.vue
index 26110552c..f1177abec 100644
--- a/frontend_nuxt/components/UserList.vue
+++ b/frontend_nuxt/components/UserList.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import BasePlaceholder from './BasePlaceholder.vue'
+import BasePlaceholder from '~/components/BasePlaceholder.vue'
 
 export default {
   name: 'UserList',
diff --git a/frontend_nuxt/jsconfig.json b/frontend_nuxt/jsconfig.json
new file mode 100644
index 000000000..035e48b4b
--- /dev/null
+++ b/frontend_nuxt/jsconfig.json
@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "baseUrl": ".",
+    "paths": {
+      "~/*": ["./*"]
+    }
+  },
+  "include": ["./**/*.js", "./**/*.vue"],
+  "exclude": ["node_modules"]
+}
diff --git a/frontend_nuxt/pages/about/index.vue b/frontend_nuxt/pages/about/index.vue
index dfe2339d7..1858a6402 100644
--- a/frontend_nuxt/pages/about/index.vue
+++ b/frontend_nuxt/pages/about/index.vue
@@ -23,8 +23,8 @@
 </template>
 
 <script>
-import { ref, onMounted } from 'vue'
-import { renderMarkdown, handleMarkdownClick } from '../utils/markdown'
+import { onMounted, ref } from 'vue'
+import { handleMarkdownClick, renderMarkdown } from '~/utils/markdown'
 
 export default {
   name: 'AboutPageView',
diff --git a/frontend_nuxt/pages/about/stats.vue b/frontend_nuxt/pages/about/stats.vue
index 40c9329cc..93035db61 100644
--- a/frontend_nuxt/pages/about/stats.vue
+++ b/frontend_nuxt/pages/about/stats.vue
@@ -30,19 +30,19 @@
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue'
-import VChart from 'vue-echarts'
-import { use } from 'echarts/core'
 import { LineChart } from 'echarts/charts'
 import {
+  DataZoomComponent,
+  GridComponent,
   TitleComponent,
   TooltipComponent,
-  GridComponent,
-  DataZoomComponent,
 } from 'echarts/components'
+import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
-import { API_BASE_URL } from '../main'
-import { getToken } from '../utils/auth'
+import { onMounted, ref } from 'vue'
+import VChart from 'vue-echarts'
+import { API_BASE_URL } from '~/main'
+import { getToken } from '~/utils/auth'
 
 use([LineChart, TitleComponent, TooltipComponent, GridComponent, DataZoomComponent, CanvasRenderer])
 
diff --git a/frontend_nuxt/pages/activities.vue b/frontend_nuxt/pages/activities.vue
index e7067cfdd..09553ef59 100644
--- a/frontend_nuxt/pages/activities.vue
+++ b/frontend_nuxt/pages/activities.vue
@@ -30,9 +30,9 @@
 </template>
 
 <script>
-import { API_BASE_URL } from '../main'
-import TimeManager from '../utils/time'
-import MilkTeaActivityComponent from '../components/MilkTeaActivityComponent.vue'
+import { API_BASE_URL } from '~/main'
+import TimeManager from '~/utils/time'
+import MilkTeaActivityComponent from '~/components/MilkTeaActivityComponent.vue'
 
 export default {
   name: 'ActivityListPageView',
diff --git a/frontend_nuxt/pages/discord-callback.vue b/frontend_nuxt/pages/discord-callback.vue
index 7cadf8020..e58993458 100644
--- a/frontend_nuxt/pages/discord-callback.vue
+++ b/frontend_nuxt/pages/discord-callback.vue
@@ -3,8 +3,8 @@
 </template>
 
 <script>
-import CallbackPage from '../components/CallbackPage.vue'
-import { discordExchange } from '../utils/discord'
+import CallbackPage from '~/components/CallbackPage.vue'
+import { discordExchange } from '~/utils/discord'
 
 export default {
   name: 'DiscordCallbackPageView',
diff --git a/frontend_nuxt/pages/forgot-password.vue b/frontend_nuxt/pages/forgot-password.vue
index cdda065ef..3e4ab38a3 100644
--- a/frontend_nuxt/pages/forgot-password.vue
+++ b/frontend_nuxt/pages/forgot-password.vue
@@ -24,8 +24,8 @@
 </template>
 
 <script>
-import { API_BASE_URL, toast } from '../main'
-import BaseInput from '../components/BaseInput.vue'
+import { API_BASE_URL, toast } from '~/main'
+import BaseInput from '~/components/BaseInput.vue'
 export default {
   name: 'ForgotPasswordPageView',
   components: { BaseInput },
diff --git a/frontend_nuxt/pages/github-callback.vue b/frontend_nuxt/pages/github-callback.vue
index e1b696029..4cd737b45 100644
--- a/frontend_nuxt/pages/github-callback.vue
+++ b/frontend_nuxt/pages/github-callback.vue
@@ -3,8 +3,8 @@
 </template>
 
 <script>
-import CallbackPage from '../components/CallbackPage.vue'
-import { githubExchange } from '../utils/github'
+import CallbackPage from '~/components/CallbackPage.vue'
+import { githubExchange } from '~/utils/github'
 
 export default {
   name: 'GithubCallbackPageView',
diff --git a/frontend_nuxt/pages/google-callback.vue b/frontend_nuxt/pages/google-callback.vue
index 211d07cf8..d453bcc31 100644
--- a/frontend_nuxt/pages/google-callback.vue
+++ b/frontend_nuxt/pages/google-callback.vue
@@ -3,8 +3,8 @@
 </template>
 
 <script>
-import CallbackPage from '../components/CallbackPage.vue'
-import { googleAuthWithToken } from '../utils/google'
+import CallbackPage from '~/components/CallbackPage.vue'
+import { googleAuthWithToken } from '~/utils/google'
 
 export default {
   name: 'GoogleCallbackPageView',
diff --git a/frontend_nuxt/pages/login.vue b/frontend_nuxt/pages/login.vue
index 21ecb5c3a..020a364f8 100644
--- a/frontend_nuxt/pages/login.vue
+++ b/frontend_nuxt/pages/login.vue
@@ -52,14 +52,14 @@
 </template>
 
 <script>
-import { API_BASE_URL, toast } from '../main'
-import { setToken, loadCurrentUser } from '../utils/auth'
-import { googleAuthorize } from '../utils/google'
-import { githubAuthorize } from '../utils/github'
-import { discordAuthorize } from '../utils/discord'
-import { twitterAuthorize } from '../utils/twitter'
-import BaseInput from '../components/BaseInput.vue'
-import { registerPush } from '../utils/push'
+import { API_BASE_URL, toast } from '~/main'
+import { setToken, loadCurrentUser } from '~/utils/auth'
+import { googleAuthorize } from '~/utils/google'
+import { githubAuthorize } from '~/utils/github'
+import { discordAuthorize } from '~/utils/discord'
+import { twitterAuthorize } from '~/utils/twitter'
+import BaseInput from '~/components/BaseInput.vue'
+import { registerPush } from '~/utils/push'
 export default {
   name: 'LoginPageView',
   components: { BaseInput },
diff --git a/frontend_nuxt/pages/message.vue b/frontend_nuxt/pages/message.vue
index 3aed2af0d..39a8d5195 100644
--- a/frontend_nuxt/pages/message.vue
+++ b/frontend_nuxt/pages/message.vue
@@ -480,23 +480,17 @@
 
 <script>
 import { ref, onMounted, computed } from 'vue'
-import { useRouter, useRoute } from 'vue-router'
-import { API_BASE_URL } from '../main'
-import BaseTimeline from '../components/BaseTimeline.vue'
-import BasePlaceholder from '../components/BasePlaceholder.vue'
-import NotificationContainer from '../components/NotificationContainer.vue'
-import { getToken, authState } from '../utils/auth'
-import {
-  markNotificationsRead,
-  fetchUnreadCount,
-  notificationState,
-  fetchNotificationPreferences,
-  updateNotificationPreference,
-} from '../utils/notification'
-import { toast } from '../main'
-import { stripMarkdownLength } from '../utils/markdown'
-import TimeManager from '../utils/time'
-import { reactionEmojiMap } from '../utils/reactions'
+import { useRouter } from 'vue-router'
+import { API_BASE_URL } from '~/main'
+import BaseTimeline from '~/components/BaseTimeline.vue'
+import BasePlaceholder from '~/components/BasePlaceholder.vue'
+import NotificationContainer from '~/components/NotificationContainer.vue'
+import { getToken, authState } from '~/utils/auth'
+import { markNotificationsRead, fetchUnreadCount, notificationState } from '~/utils/notification'
+import { toast } from '~/main'
+import { stripMarkdownLength } from '~/utils/markdown'
+import TimeManager from '~/utils/time'
+import { reactionEmojiMap } from '~/utils/reactions'
 
 export default {
   name: 'MessagePageView',
diff --git a/frontend_nuxt/pages/new-post.vue b/frontend_nuxt/pages/new-post.vue
index 32b776d95..04618530c 100644
--- a/frontend_nuxt/pages/new-post.vue
+++ b/frontend_nuxt/pages/new-post.vue
@@ -78,18 +78,18 @@
 </template>
 
 <script>
-import { ref, onMounted, computed, watch } from 'vue'
-import PostEditor from '../components/PostEditor.vue'
-import CategorySelect from '../components/CategorySelect.vue'
-import TagSelect from '../components/TagSelect.vue'
-import PostTypeSelect from '../components/PostTypeSelect.vue'
-import AvatarCropper from '../components/AvatarCropper.vue'
-import FlatPickr from 'vue-flatpickr-component'
 import 'flatpickr/dist/flatpickr.css'
-import { API_BASE_URL, toast } from '../main'
-import { getToken, authState } from '../utils/auth'
-import LoginOverlay from '../components/LoginOverlay.vue'
-import BaseInput from '../components/BaseInput.vue'
+import { computed, onMounted, ref, watch } from 'vue'
+import FlatPickr from 'vue-flatpickr-component'
+import AvatarCropper from '~/components/AvatarCropper.vue'
+import BaseInput from '~/components/BaseInput.vue'
+import CategorySelect from '~/components/CategorySelect.vue'
+import LoginOverlay from '~/components/LoginOverlay.vue'
+import PostEditor from '~/components/PostEditor.vue'
+import PostTypeSelect from '~/components/PostTypeSelect.vue'
+import TagSelect from '~/components/TagSelect.vue'
+import { API_BASE_URL, toast } from '~/main'
+import { authState, getToken } from '~/utils/auth'
 
 export default {
   name: 'NewPostPageView',
diff --git a/frontend_nuxt/pages/posts/[id]/edit.vue b/frontend_nuxt/pages/posts/[id]/edit.vue
index 02dda5184..9e69c54fa 100644
--- a/frontend_nuxt/pages/posts/[id]/edit.vue
+++ b/frontend_nuxt/pages/posts/[id]/edit.vue
@@ -38,12 +38,12 @@
 <script>
 import { ref, onMounted, computed } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import PostEditor from '../../../components/PostEditor.vue'
-import CategorySelect from '../../../components/CategorySelect.vue'
-import TagSelect from '../../../components/TagSelect.vue'
-import { API_BASE_URL, toast } from '../../../main'
-import { getToken, authState } from '../../../utils/auth'
-import LoginOverlay from '../../../components/LoginOverlay.vue'
+import PostEditor from '~/components/PostEditor.vue'
+import CategorySelect from '~/components/CategorySelect.vue'
+import TagSelect from '~/components/TagSelect.vue'
+import { API_BASE_URL, toast } from '~/main'
+import { getToken, authState } from '~/utils/auth'
+import LoginOverlay from '~/components/LoginOverlay.vue'
 
 export default {
   name: 'EditPostPageView',
diff --git a/frontend_nuxt/pages/posts/[id]/index.vue b/frontend_nuxt/pages/posts/[id]/index.vue
index 936e8e554..3d6cc917d 100644
--- a/frontend_nuxt/pages/posts/[id]/index.vue
+++ b/frontend_nuxt/pages/posts/[id]/index.vue
@@ -234,21 +234,21 @@
 import { ref, computed, onMounted, onBeforeUnmount, nextTick, watch } from 'vue'
 import VueEasyLightbox from 'vue-easy-lightbox'
 import { useRoute } from 'vue-router'
-import CommentItem from '../../../components/CommentItem.vue'
-import CommentEditor from '../../../components/CommentEditor.vue'
-import BaseTimeline from '../../../components/BaseTimeline.vue'
-import ArticleTags from '../../../components/ArticleTags.vue'
-import ArticleCategory from '../../../components/ArticleCategory.vue'
-import ReactionsGroup from '../../../components/ReactionsGroup.vue'
-import DropdownMenu from '../../../components/DropdownMenu.vue'
-import { renderMarkdown, handleMarkdownClick, stripMarkdownLength } from '../../../utils/markdown'
-import { getMedalTitle } from '../../../utils/medal'
-import { API_BASE_URL, toast } from '../../../main'
-import { getToken, authState } from '../../../utils/auth'
-import TimeManager from '../../../utils/time'
+import CommentItem from '~/components/CommentItem.vue'
+import CommentEditor from '~/components/CommentEditor.vue'
+import BaseTimeline from '~/components/BaseTimeline.vue'
+import ArticleTags from '~/components/ArticleTags.vue'
+import ArticleCategory from '~/components/ArticleCategory.vue'
+import ReactionsGroup from '~/components/ReactionsGroup.vue'
+import DropdownMenu from '~/components/DropdownMenu.vue'
+import { renderMarkdown, handleMarkdownClick, stripMarkdownLength } from '~/utils/markdown'
+import { getMedalTitle } from '~/utils/medal'
+import { API_BASE_URL, toast } from '~/main'
+import { getToken, authState } from '~/utils/auth'
+import TimeManager from '~/utils/time'
 import { useRouter } from 'vue-router'
-import { useIsMobile } from '../../../utils/screen'
-import Dropdown from '../../../components/Dropdown.vue'
+import { useIsMobile } from '~/utils/screen'
+import Dropdown from '~/components/Dropdown.vue'
 
 export default {
   name: 'PostPageView',
diff --git a/frontend_nuxt/pages/settings.vue b/frontend_nuxt/pages/settings.vue
index 45f346643..51151e8e3 100644
--- a/frontend_nuxt/pages/settings.vue
+++ b/frontend_nuxt/pages/settings.vue
@@ -65,11 +65,11 @@
 </template>
 
 <script>
-import { API_BASE_URL, toast } from '../main'
-import { getToken, fetchCurrentUser, setToken } from '../utils/auth'
-import BaseInput from '../components/BaseInput.vue'
-import Dropdown from '../components/Dropdown.vue'
-import AvatarCropper from '../components/AvatarCropper.vue'
+import AvatarCropper from '~/components/AvatarCropper.vue'
+import BaseInput from '~/components/BaseInput.vue'
+import Dropdown from '~/components/Dropdown.vue'
+import { API_BASE_URL, toast } from '~/main'
+import { fetchCurrentUser, getToken, setToken } from '~/utils/auth'
 export default {
   name: 'SettingsPageView',
   components: { BaseInput, Dropdown, AvatarCropper },
diff --git a/frontend_nuxt/pages/signup-reason.vue b/frontend_nuxt/pages/signup-reason.vue
index 64be9fde9..1e08c57b1 100644
--- a/frontend_nuxt/pages/signup-reason.vue
+++ b/frontend_nuxt/pages/signup-reason.vue
@@ -19,8 +19,8 @@
 </template>
 
 <script>
-import BaseInput from '../components/BaseInput.vue'
-import { API_BASE_URL, toast } from '../main'
+import BaseInput from '~/components/BaseInput.vue'
+import { API_BASE_URL, toast } from '~/main'
 
 export default {
   name: 'SignupReasonPageView',
diff --git a/frontend_nuxt/pages/signup.vue b/frontend_nuxt/pages/signup.vue
index 3d7c1e3f4..17df0db84 100644
--- a/frontend_nuxt/pages/signup.vue
+++ b/frontend_nuxt/pages/signup.vue
@@ -70,19 +70,19 @@
 
     <div class="other-signup-page-content">
       <div class="signup-page-button" @click="googleAuthorize">
-        <img class="signup-page-button-icon" src="../assets/icons/google.svg" alt="Google Logo" />
+        <img class="signup-page-button-icon" src="~/assets/icons/google.svg" alt="Google Logo" />
         <div class="signup-page-button-text">Google 注册</div>
       </div>
       <div class="signup-page-button" @click="signupWithGithub">
-        <img class="signup-page-button-icon" src="../assets/icons/github.svg" alt="GitHub Logo" />
+        <img class="signup-page-button-icon" src="~/assets/icons/github.svg" alt="GitHub Logo" />
         <div class="signup-page-button-text">GitHub 注册</div>
       </div>
       <div class="signup-page-button" @click="signupWithDiscord">
-        <img class="signup-page-button-icon" src="../assets/icons/discord.svg" alt="Discord Logo" />
+        <img class="signup-page-button-icon" src="~/assets/icons/discord.svg" alt="Discord Logo" />
         <div class="signup-page-button-text">Discord 注册</div>
       </div>
       <div class="signup-page-button" @click="signupWithTwitter">
-        <img class="signup-page-button-icon" src="../assets/icons/twitter.svg" alt="Twitter Logo" />
+        <img class="signup-page-button-icon" src="~/assets/icons/twitter.svg" alt="Twitter Logo" />
         <div class="signup-page-button-text">Twitter 注册</div>
       </div>
     </div>
@@ -90,12 +90,12 @@
 </template>
 
 <script>
-import { API_BASE_URL, toast } from '../main'
-import { googleAuthorize } from '../utils/google'
-import { githubAuthorize } from '../utils/github'
-import { discordAuthorize } from '../utils/discord'
-import { twitterAuthorize } from '../utils/twitter'
-import BaseInput from '../components/BaseInput.vue'
+import BaseInput from '~/components/BaseInput.vue'
+import { API_BASE_URL, toast } from '~/main'
+import { discordAuthorize } from '~/utils/discord'
+import { githubAuthorize } from '~/utils/github'
+import { googleAuthorize } from '~/utils/google'
+import { twitterAuthorize } from '~/utils/twitter'
 export default {
   name: 'SignupPageView',
   components: { BaseInput },
diff --git a/frontend_nuxt/pages/twitter-callback.vue b/frontend_nuxt/pages/twitter-callback.vue
index a5fddd509..daa4553c9 100644
--- a/frontend_nuxt/pages/twitter-callback.vue
+++ b/frontend_nuxt/pages/twitter-callback.vue
@@ -3,8 +3,8 @@
 </template>
 
 <script>
-import CallbackPage from '../components/CallbackPage.vue'
-import { twitterExchange } from '../utils/twitter'
+import CallbackPage from '~/components/CallbackPage.vue'
+import { twitterExchange } from '~/utils/twitter'
 
 export default {
   name: 'TwitterCallbackPageView',
diff --git a/frontend_nuxt/pages/users/[id].vue b/frontend_nuxt/pages/users/[id].vue
index e2d2d1561..607f5e0b5 100644
--- a/frontend_nuxt/pages/users/[id].vue
+++ b/frontend_nuxt/pages/users/[id].vue
@@ -299,16 +299,16 @@
 <script>
 import { ref, computed, onMounted, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { API_BASE_URL, toast } from '../main'
-import { getToken, authState } from '../../utils/auth'
-import BaseTimeline from '../components/BaseTimeline.vue'
-import UserList from '../components/UserList.vue'
-import BasePlaceholder from '../components/BasePlaceholder.vue'
-import LevelProgress from '../components/LevelProgress.vue'
-import { stripMarkdown, stripMarkdownLength } from '../utils/markdown'
-import TimeManager from '../utils/time'
-import { prevLevelExp } from '../utils/level'
-import AchievementList from '../components/AchievementList.vue'
+import { API_BASE_URL, toast } from '~/main'
+import { getToken, authState } from '~/utils/auth'
+import BaseTimeline from '~/components/BaseTimeline.vue'
+import UserList from '~/components/UserList.vue'
+import BasePlaceholder from '~/components/BasePlaceholder.vue'
+import LevelProgress from '~/components/LevelProgress.vue'
+import { stripMarkdown, stripMarkdownLength } from '~/utils/markdown'
+import TimeManager from '~/utils/time'
+import { prevLevelExp } from '~/utils/level'
+import AchievementList from '~/components/AchievementList.vue'
 
 definePageMeta({
   alias: ['/users/:id/'],