chore(frontend): added '@' webpack alias to reduce relative imports

Signed-off-by: Jonathan <theflametrooper@gmail.com>

frontend/src/App.vue

@@ -19,10 +19,10 @@ import keyboardShortcuts from "./keyboardShortcuts";
 
 export default {
 	components: {
-		WhatIsNew: () => import("./components/modals/WhatIsNew.vue"),
-		LoginModal: () => import("./components/modals/Login.vue"),
-		RegisterModal: () => import("./components/modals/Register.vue"),
-		Banned: () => import("./pages/Banned.vue")
+		WhatIsNew: () => import("@/components/modals/WhatIsNew.vue"),
+		LoginModal: () => import("@/components/modals/Login.vue"),
+		RegisterModal: () => import("@/components/modals/Register.vue"),
+		Banned: () => import("@/pages/Banned.vue")
 	},
 	replace: false,
 	data() {

frontend/src/api/admin/reports.js

@@ -1,7 +1,7 @@
 /* eslint-disable import/no-cycle */
 
 import Toast from "toasters";
-import ws from "../../ws";
+import ws from "@/ws";
 
 export default {
 	resolve(reportId) {

frontend/src/api/auth.js

@@ -1,7 +1,7 @@
 /* eslint-disable import/no-cycle */
 
 import Toast from "toasters";
-import ws from "../ws";
+import ws from "@/ws";
 
 // when Vuex needs to interact with websockets
 

frontend/src/components/modals/AddSongToQueue.vue

@@ -210,7 +210,7 @@ import { mapState, mapGetters, mapActions } from "vuex";
 
 import Toast from "toasters";
 
-import SearchYoutube from "../../mixins/SearchYoutube.vue";
+import SearchYoutube from "@/mixins/SearchYoutube.vue";
 
 import PlaylistItem from "../PlaylistItem.vue";
 import SearchQueryItem from "../SearchQueryItem.vue";

frontend/src/components/modals/CreateCommunityStation.vue

@@ -42,8 +42,8 @@
 import { mapGetters, mapActions } from "vuex";
 
 import Toast from "toasters";
+import validation from "@/validation";
 import Modal from "../Modal.vue";
-import validation from "../../validation";
 
 export default {
 	components: { Modal },

frontend/src/components/modals/CreatePlaylist.vue

@@ -36,8 +36,8 @@
 import { mapActions, mapGetters } from "vuex";
 
 import Toast from "toasters";
+import validation from "@/validation";
 import Modal from "../Modal.vue";
-import validation from "../../validation";
 
 export default {
 	components: { Modal },

frontend/src/components/modals/EditPlaylist.vue

@@ -345,13 +345,13 @@ import { mapState, mapGetters, mapActions } from "vuex";
 import draggable from "vuedraggable";
 import Toast from "toasters";
 
-import SearchYoutube from "../../mixins/SearchYoutube.vue";
+import SearchYoutube from "@/mixins/SearchYoutube.vue";
 
+import validation from "@/validation";
 import Modal from "../Modal.vue";
 import SearchQueryItem from "../SearchQueryItem.vue";
 import SongItem from "../SongItem.vue";
 
-import validation from "../../validation";
 import utils from "../../../js/utils";
 
 export default {

frontend/src/components/modals/EditSong.vue

@@ -509,8 +509,8 @@
 import { mapState, mapGetters, mapActions } from "vuex";
 import Toast from "toasters";
 
-import keyboardShortcuts from "../../keyboardShortcuts";
-import validation from "../../validation";
+import validation from "@/validation";
+import keyboardShortcuts from "@/keyboardShortcuts";
 import Modal from "../Modal.vue";
 import FloatingBox from "../FloatingBox.vue";
 import SaveButton from "../SaveButton.vue";

frontend/src/components/modals/EditStation.vue

@@ -489,8 +489,8 @@ import { mapState, mapGetters, mapActions } from "vuex";
 
 import Toast from "toasters";
 
+import validation from "@/validation";
 import Modal from "../Modal.vue";
-import validation from "../../validation";
 import SaveButton from "../SaveButton.vue";
 
 export default {

frontend/src/components/modals/EditUser.vue

@@ -91,8 +91,8 @@
 import { mapState, mapGetters, mapActions } from "vuex";
 
 import Toast from "toasters";
+import validation from "@/validation";
 import Modal from "../Modal.vue";
-import validation from "../../validation";
 
 export default {
 	components: { Modal },

frontend/src/components/modals/Register.vue

@@ -111,10 +111,9 @@
 import { mapActions } from "vuex";
 import Toast from "toasters";
 
+import validation from "@/validation";
 import InputHelpBox from "../InputHelpBox.vue";
 
-import validation from "../../validation";
-
 export default {
 	components: { InputHelpBox },
 	data() {

frontend/src/main.js

@@ -2,10 +2,11 @@ import Vue from "vue";
 
 import VueTippy, { TippyComponent } from "vue-tippy";
 import VueRouter from "vue-router";
+
+import ws from "@/ws";
 import store from "./store";
 
 import App from "./App.vue";
-import ws from "./ws";
 
 const REQUIRED_CONFIG_VERSION = 2;
 
@@ -75,75 +76,75 @@ const router = new VueRouter({
 	routes: [
 		{
 			path: "/",
-			component: () => import("./pages/Home.vue")
+			component: () => import("@/pages/Home.vue")
 		},
 		{
 			path: "/404",
 			alias: ["*"],
-			component: () => import("./pages/404.vue")
+			component: () => import("@/pages/404.vue")
 		},
 		{
 			path: "/terms",
-			component: () => import("./pages/Terms.vue")
+			component: () => import("@/pages/Terms.vue")
 		},
 		{
 			path: "/privacy",
-			component: () => import("./pages/Privacy.vue")
+			component: () => import("@/pages/Privacy.vue")
 		},
 		{
 			path: "/team",
-			component: () => import("./pages/Team.vue")
+			component: () => import("@/pages/Team.vue")
 		},
 		{
 			path: "/news",
-			component: () => import("./pages/News.vue")
+			component: () => import("@/pages/News.vue")
 		},
 		{
 			path: "/about",
-			component: () => import("./pages/About.vue")
+			component: () => import("@/pages/About.vue")
 		},
 		{
 			name: "profile",
 			path: "/u/:username",
-			component: () => import("./pages/Profile/index.vue")
+			component: () => import("@/pages/Profile/index.vue")
 		},
 		{
 			path: "/settings",
-			component: () => import("./pages/Settings/index.vue"),
+			component: () => import("@/pages/Settings/index.vue"),
 			meta: {
 				loginRequired: true
 			}
 		},
 		{
 			path: "/reset_password",
-			component: () => import("./pages/ResetPassword.vue")
+			component: () => import("@/pages/ResetPassword.vue")
 		},
 		{
 			path: "/set_password",
 			props: { mode: "set" },
-			component: () => import("./pages/ResetPassword.vue"),
+			component: () => import("@/pages/ResetPassword.vue"),
 			meta: {
 				loginRequired: true
 			}
 		},
 		{
 			path: "/login",
-			component: () => import("./components/modals/Login.vue")
+			component: () => import("@/components/modals/Login.vue")
 		},
 		{
 			path: "/register",
-			component: () => import("./components/modals/Register.vue")
+			component: () => import("@/components/modals/Register.vue")
 		},
 		{
 			path: "/admin",
-			component: () => import("./pages/Admin/index.vue"),
+			component: () => import("@/pages/Admin/index.vue"),
 			meta: {
 				adminRequired: true
 			}
 		},
 		{
 			path: "/admin/:page",
-			component: () => import("./pages/Admin/index.vue"),
+			component: () => import("@/pages//Admin/index.vue"),
 			meta: {
 				adminRequired: true
 			}
@@ -151,7 +152,7 @@ const router = new VueRouter({
 		{
 			name: "station",
 			path: "/:id",
-			component: () => import("./pages/Station/index.vue")
+			component: () => import("@/pages//Station/index.vue")
 		}
 	]
 });

frontend/src/pages/404.vue

@@ -14,7 +14,7 @@
 </template>
 
 <script>
-import MainFooter from "../components/layout/MainFooter.vue";
+import MainFooter from "@/components/layout/MainFooter.vue";
 
 export default {
 	components: { MainFooter }

frontend/src/pages/About.vue

@@ -66,8 +66,8 @@
 </template>
 
 <script>
-import MainHeader from "../components/layout/MainHeader.vue";
-import MainFooter from "../components/layout/MainFooter.vue";
+import MainHeader from "@/components/layout/MainHeader.vue";
+import MainFooter from "@/components/layout/MainFooter.vue";
 
 export default {
 	components: { MainHeader, MainFooter },

frontend/src/pages/Admin/index.vue

@@ -122,7 +122,7 @@
 </template>
 
 <script>
-import MainHeader from "../../components/layout/MainHeader.vue";
+import MainHeader from "@/components/layout/MainHeader.vue";
 
 export default {
 	components: {

frontend/src/pages/Admin/tabs/HiddenSongs.vue

@@ -175,17 +175,16 @@ import { mapState, mapActions, mapGetters } from "vuex";
 
 import Toast from "toasters";
 
-import UserIdToUsername from "../../../components/UserIdToUsername.vue";
+import UserIdToUsername from "@/components/UserIdToUsername.vue";
+import FloatingBox from "@/components/FloatingBox.vue";
 
-import FloatingBox from "../../../components/FloatingBox.vue";
+import ScrollAndFetchHandler from "@/mixins/ScrollAndFetchHandler.vue";
 
-import ScrollAndFetchHandler from "../../../mixins/ScrollAndFetchHandler.vue";
-
-import ws from "../../../ws";
+import ws from "@/ws";
 
 export default {
 	components: {
-		EditSong: () => import("../../../components/modals/EditSong.vue"),
+		EditSong: () => import("@/components/modals/EditSong.vue"),
 		UserIdToUsername,
 		FloatingBox
 	},

frontend/src/pages/Admin/tabs/News.vue

@@ -218,11 +218,11 @@
 import { mapActions, mapState, mapGetters } from "vuex";
 
 import Toast from "toasters";
-import ws from "../../../ws";
+import ws from "@/ws";
 
 export default {
 	components: {
-		EditNews: () => import("../../../components/modals/EditNews.vue")
+		EditNews: () => import("@/components/modals/EditNews.vue")
 	},
 	data() {
 		return {

frontend/src/pages/Admin/tabs/Playlists.vue

@@ -80,18 +80,17 @@ import { mapState, mapActions, mapGetters } from "vuex";
 
 import Toast from "toasters";
 
-import UserIdToUsername from "../../../components/UserIdToUsername.vue";
+import UserIdToUsername from "@/components/UserIdToUsername.vue";
 
-import ws from "../../../ws";
+import ws from "@/ws";
 import utils from "../../../../js/utils";
 
 export default {
 	components: {
-		EditPlaylist: () =>
-			import("../../../components/modals/EditPlaylist.vue"),
+		EditPlaylist: () => import("@/components/modals/EditPlaylist.vue"),
 		UserIdToUsername,
-		Report: () => import("../../../components/modals/Report.vue"),
-		EditSong: () => import("../../../components/modals/EditSong.vue")
+		Report: () => import("@/components/modals/Report.vue"),
+		EditSong: () => import("@/components/modals/EditSong.vue")
 	},
 	data() {
 		return {

frontend/src/pages/Admin/tabs/Punishments.vue

@@ -97,12 +97,11 @@
 import { mapState, mapGetters, mapActions } from "vuex";
 import Toast from "toasters";
 
-import ws from "../../../ws";
+import ws from "@/ws";
 
 export default {
 	components: {
-		ViewPunishment: () =>
-			import("../../../components/modals/ViewPunishment.vue")
+		ViewPunishment: () => import("@/components/modals/ViewPunishment.vue")
 	},
 	data() {
 		return {

frontend/src/pages/Admin/tabs/Reports.vue

@@ -71,13 +71,12 @@ import { mapState, mapActions, mapGetters } from "vuex";
 import { formatDistance } from "date-fns";
 
 import Toast from "toasters";
-import ws from "../../../ws";
-
-import UserIdToUsername from "../../../components/UserIdToUsername.vue";
+import UserIdToUsername from "@/components/UserIdToUsername.vue";
+import ws from "@/ws";
 
 export default {
 	components: {
-		ViewReport: () => import("../../../components/modals/ViewReport.vue"),
+		ViewReport: () => import("@/components/modals/ViewReport.vue"),
 		UserIdToUsername
 	},
 	data() {

frontend/src/pages/Admin/tabs/Stations.vue

@@ -192,13 +192,12 @@
 import { mapState, mapActions, mapGetters } from "vuex";
 
 import Toast from "toasters";
-import ws from "../../../ws";
-
-import UserIdToUsername from "../../../components/UserIdToUsername.vue";
+import UserIdToUsername from "@/components/UserIdToUsername.vue";
+import ws from "@/ws";
 
 export default {
 	components: {
-		EditStation: () => import("../../../components/modals/EditStation.vue"),
+		EditStation: () => import("@/components/modals/EditStation.vue"),
 		UserIdToUsername
 	},
 	data() {

frontend/src/pages/Admin/tabs/Statistics.vue

@@ -193,7 +193,7 @@
 <script>
 import { mapGetters } from "vuex";
 
-import ws from "../../../ws";
+import ws from "@/ws";
 
 export default {
 	components: {},

frontend/src/pages/Admin/tabs/UnverifiedSongs.vue

@@ -185,17 +185,16 @@ import { mapState, mapActions, mapGetters } from "vuex";
 
 import Toast from "toasters";
 
-import UserIdToUsername from "../../../components/UserIdToUsername.vue";
+import UserIdToUsername from "@/components/UserIdToUsername.vue";
+import FloatingBox from "@/components/FloatingBox.vue";
 
-import FloatingBox from "../../../components/FloatingBox.vue";
+import ScrollAndFetchHandler from "@/mixins/ScrollAndFetchHandler.vue";
 
-import ScrollAndFetchHandler from "../../../mixins/ScrollAndFetchHandler.vue";
-
-import ws from "../../../ws";
+import ws from "@/ws";
 
 export default {
 	components: {
-		EditSong: () => import("../../../components/modals/EditSong.vue"),
+		EditSong: () => import("@/components/modals/EditSong.vue"),
 		UserIdToUsername,
 		FloatingBox
 	},

frontend/src/pages/Admin/tabs/Users.vue

@@ -68,12 +68,12 @@
 <script>
 import { mapState, mapActions, mapGetters } from "vuex";
 
-import ProfilePicture from "../../../components/ProfilePicture.vue";
-import ws from "../../../ws";
+import ProfilePicture from "@/components/ProfilePicture.vue";
+import ws from "@/ws";
 
 export default {
 	components: {
-		EditUser: () => import("../../../components/modals/EditUser.vue"),
+		EditUser: () => import("@/components/modals/EditUser.vue"),
 		ProfilePicture
 	},
 	data() {

frontend/src/pages/Admin/tabs/VerifiedSongs.vue

@@ -204,17 +204,16 @@ import { mapState, mapActions, mapGetters } from "vuex";
 
 import Toast from "toasters";
 
-import UserIdToUsername from "../../../components/UserIdToUsername.vue";
+import UserIdToUsername from "@/components/UserIdToUsername.vue";
+import FloatingBox from "@/components/FloatingBox.vue";
 
-import FloatingBox from "../../../components/FloatingBox.vue";
+import ScrollAndFetchHandler from "@/mixins/ScrollAndFetchHandler.vue";
 
-import ScrollAndFetchHandler from "../../../mixins/ScrollAndFetchHandler.vue";
-
-import ws from "../../../ws";
+import ws from "@/ws";
 
 export default {
 	components: {
-		EditSong: () => import("../../../components/modals/EditSong.vue"),
+		EditSong: () => import("@/components/modals/EditSong.vue"),
 		UserIdToUsername,
 		FloatingBox
 	},

frontend/src/pages/Home.vue

@@ -420,12 +420,12 @@
 import { mapState, mapGetters, mapActions } from "vuex";
 import Toast from "toasters";
 
-import MainHeader from "../components/layout/MainHeader.vue";
-import MainFooter from "../components/layout/MainFooter.vue";
-import SongThumbnail from "../components/SongThumbnail.vue";
-import UserIdToUsername from "../components/UserIdToUsername.vue";
+import MainHeader from "@/components/layout/MainHeader.vue";
+import MainFooter from "@/components/layout/MainFooter.vue";
+import SongThumbnail from "@/components/SongThumbnail.vue";
+import UserIdToUsername from "@/components/UserIdToUsername.vue";
 
-import ws from "../ws";
+import ws from "@/ws";
 
 export default {
 	components: {
@@ -433,7 +433,7 @@ export default {
 		MainFooter,
 		SongThumbnail,
 		CreateCommunityStation: () =>
-			import("../components/modals/CreateCommunityStation.vue"),
+			import("@/components/modals/CreateCommunityStation.vue"),
 		UserIdToUsername
 	},
 	data() {

frontend/src/pages/News.vue

@@ -86,8 +86,8 @@
 import { format } from "date-fns";
 import { mapGetters } from "vuex";
 
-import MainHeader from "../components/layout/MainHeader.vue";
-import MainFooter from "../components/layout/MainFooter.vue";
+import MainHeader from "@/components/layout/MainHeader.vue";
+import MainFooter from "@/components/layout/MainFooter.vue";
 
 export default {
 	components: { MainHeader, MainFooter },

frontend/src/pages/Privacy.vue

@@ -204,8 +204,8 @@
 </template>
 
 <script>
-import MainHeader from "../components/layout/MainHeader.vue";
-import MainFooter from "../components/layout/MainFooter.vue";
+import MainHeader from "@/components/layout/MainHeader.vue";
+import MainFooter from "@/components/layout/MainFooter.vue";
 
 export default {
 	components: { MainHeader, MainFooter }

frontend/src/pages/Profile/index.vue

@@ -98,15 +98,15 @@
 import { mapState, mapGetters } from "vuex";
 import { format, parseISO } from "date-fns";
 
-import TabQueryHandler from "../../mixins/TabQueryHandler.vue";
+import ProfilePicture from "@/components/ProfilePicture";
+import MainHeader from "@/components/layout/MainHeader";
+import MainFooter from "@/components/layout/MainFooter.vue";
+
+import TabQueryHandler from "@/mixins/TabQueryHandler.vue";
 
 import RecentActivity from "./tabs/RecentActivity.vue";
 import Playlists from "./tabs/Playlists.vue";
 
-import ProfilePicture from "../../components/ProfilePicture.vue";
-import MainHeader from "../../components/layout/MainHeader.vue";
-import MainFooter from "../../components/layout/MainFooter.vue";
-
 export default {
 	components: {
 		MainHeader,
@@ -114,9 +114,9 @@ export default {
 		ProfilePicture,
 		RecentActivity,
 		Playlists,
-		EditPlaylist: () => import("../../components/modals/EditPlaylist.vue"),
-		Report: () => import("../../components/modals/Report.vue"),
-		EditSong: () => import("../../components/modals/EditSong.vue")
+		EditPlaylist: () => import("@/components/modals/EditPlaylist.vue"),
+		Report: () => import("@/components/modals/Report.vue"),
+		EditSong: () => import("@/components/modals/EditSong.vue")
 	},
 	mixins: [TabQueryHandler],
 	data() {

frontend/src/pages/Profile/tabs/Playlists.vue

@@ -96,17 +96,15 @@
 import draggable from "vuedraggable";
 import { mapActions, mapState, mapGetters } from "vuex";
 
-import ws from "../../../ws";
-
-import SortablePlaylists from "../../../mixins/SortablePlaylists.vue";
-import PlaylistItem from "../../../components/PlaylistItem.vue";
+import PlaylistItem from "@/components/PlaylistItem.vue";
+import SortablePlaylists from "@/mixins/SortablePlaylists.vue";
+import ws from "@/ws";
 
 export default {
 	components: {
 		PlaylistItem,
 		draggable,
-		CreatePlaylist: () =>
-			import("../../../components/modals/CreatePlaylist.vue")
+		CreatePlaylist: () => import("@/components/modals/CreatePlaylist.vue")
 	},
 	mixins: [SortablePlaylists],
 	props: {

frontend/src/pages/Profile/tabs/RecentActivity.vue

@@ -44,9 +44,8 @@
 import { mapState, mapGetters, mapActions } from "vuex";
 import Toast from "toasters";
 
-import ws from "../../../ws";
-
-import ActivityItem from "../../../components/ActivityItem.vue";
+import ActivityItem from "@/components/ActivityItem.vue";
+import ws from "@/ws";
 
 export default {
 	components: { ActivityItem },

frontend/src/pages/ResetPassword.vue

@@ -229,11 +229,11 @@
 import Toast from "toasters";
 import { mapGetters } from "vuex";
 
-import MainHeader from "../components/layout/MainHeader.vue";
-import MainFooter from "../components/layout/MainFooter.vue";
-import InputHelpBox from "../components/InputHelpBox.vue";
+import MainHeader from "@/components/layout/MainHeader.vue";
+import MainFooter from "@/components/layout/MainFooter.vue";
+import InputHelpBox from "@/components/InputHelpBox.vue";
 
-import validation from "../validation";
+import validation from "@/validation";
 
 export default {
 	components: { MainHeader, MainFooter, InputHelpBox },

frontend/src/pages/Settings/index.vue

@@ -49,10 +49,9 @@
 import { mapActions, mapGetters } from "vuex";
 import Toast from "toasters";
 
-import TabQueryHandler from "../../mixins/TabQueryHandler.vue";
-
-import MainHeader from "../../components/layout/MainHeader.vue";
-import MainFooter from "../../components/layout/MainFooter.vue";
+import MainHeader from "@/components/layout/MainHeader.vue";
+import MainFooter from "@/components/layout/MainFooter.vue";
+import TabQueryHandler from "@/mixins/TabQueryHandler.vue";
 
 export default {
 	components: {

frontend/src/pages/Settings/tabs/Account.vue

@@ -99,10 +99,9 @@
 import { mapState, mapActions, mapGetters } from "vuex";
 import Toast from "toasters";
 
-import validation from "../../../validation";
-
-import InputHelpBox from "../../../components/InputHelpBox.vue";
-import SaveButton from "../../../components/SaveButton.vue";
+import InputHelpBox from "@/components/InputHelpBox.vue";
+import SaveButton from "@/components/SaveButton.vue";
+import validation from "@/validation";
 
 export default {
 	components: { InputHelpBox, SaveButton },

frontend/src/pages/Settings/tabs/Preferences.vue

@@ -44,7 +44,7 @@
 import { mapState, mapActions, mapGetters } from "vuex";
 import Toast from "toasters";
 
-import SaveButton from "../../../components/SaveButton.vue";
+import SaveButton from "@/components/SaveButton.vue";
 
 export default {
 	components: { SaveButton },

frontend/src/pages/Settings/tabs/Profile.vue

@@ -76,10 +76,9 @@
 import { mapState, mapActions, mapGetters } from "vuex";
 import Toast from "toasters";
 
-import validation from "../../../validation";
-
-import ProfilePicture from "../../../components/ProfilePicture.vue";
-import SaveButton from "../../../components/SaveButton.vue";
+import ProfilePicture from "@/components/ProfilePicture.vue";
+import SaveButton from "@/components/SaveButton.vue";
+import validation from "@/validation";
 
 export default {
 	components: { ProfilePicture, SaveButton },

frontend/src/pages/Settings/tabs/Security.vue

@@ -144,9 +144,8 @@
 import Toast from "toasters";
 import { mapGetters, mapState } from "vuex";
 
-import validation from "../../../validation";
-
-import InputHelpBox from "../../../components/InputHelpBox.vue";
+import InputHelpBox from "@/components/InputHelpBox.vue";
+import validation from "@/validation";
 
 export default {
 	components: { InputHelpBox },

frontend/src/pages/Station/Sidebar/Playlists.vue

@@ -80,8 +80,8 @@ import { mapState, mapActions, mapGetters } from "vuex";
 import Toast from "toasters";
 import draggable from "vuedraggable";
 
-import PlaylistItem from "../../../components/PlaylistItem.vue";
-import SortablePlaylists from "../../../mixins/SortablePlaylists.vue";
+import PlaylistItem from "@/components/PlaylistItem.vue";
+import SortablePlaylists from "@/mixins/SortablePlaylists.vue";
 
 export default {
 	components: { PlaylistItem, draggable },

frontend/src/pages/Station/Sidebar/Queue.vue

@@ -112,7 +112,7 @@
 import { mapActions, mapState, mapGetters } from "vuex";
 import Toast from "toasters";
 
-import SongItem from "../../../components/SongItem.vue";
+import SongItem from "@/components/SongItem.vue";
 
 export default {
 	components: { SongItem },

frontend/src/pages/Station/Sidebar/Users.vue

@@ -69,7 +69,7 @@
 import { mapState } from "vuex";
 import Toast from "toasters";
 
-import ProfilePicture from "../../../components/ProfilePicture.vue";
+import ProfilePicture from "@/components/ProfilePicture.vue";
 
 export default {
 	components: { ProfilePicture },

frontend/src/pages/Station/Sidebar/index.vue

@@ -41,7 +41,7 @@
 <script>
 import { mapActions, mapState } from "vuex";
 
-import TabQueryHandler from "../../../mixins/TabQueryHandler.vue";
+import TabQueryHandler from "@/mixins/TabQueryHandler.vue";
 
 import Queue from "./Queue.vue";
 import Users from "./Users.vue";

frontend/src/pages/Station/index.vue

@@ -636,17 +636,17 @@ import { mapState, mapActions, mapGetters } from "vuex";
 import Toast from "toasters";
 import { ContentLoader } from "vue-content-loader";
 
-import MainHeader from "../../components/layout/MainHeader.vue";
-import MainFooter from "../../components/layout/MainFooter.vue";
+import ws from "@/ws";
+import keyboardShortcuts from "@/keyboardShortcuts";
 
-import Z404 from "../404.vue";
+import MainHeader from "@/components/layout/MainHeader.vue";
+import MainFooter from "@/components/layout/MainFooter.vue";
 
-import FloatingBox from "../../components/FloatingBox.vue";
-import AddToPlaylistDropdown from "../../components/AddToPlaylistDropdown.vue";
-import SongItem from "../../components/SongItem.vue";
+import FloatingBox from "@/components/FloatingBox.vue";
+import AddToPlaylistDropdown from "@/components/AddToPlaylistDropdown.vue";
+import SongItem from "@/components/SongItem.vue";
+import Z404 from "../404.vue";
 
-import ws from "../../ws";
-import keyboardShortcuts from "../../keyboardShortcuts";
 import utils from "../../../js/utils";
 
 import StationSidebar from "./Sidebar/index.vue";
@@ -656,17 +656,16 @@ export default {
 		ContentLoader,
 		MainHeader,
 		MainFooter,
-		SongQueue: () => import("../../components/modals/AddSongToQueue.vue"),
-		EditPlaylist: () => import("../../components/modals/EditPlaylist.vue"),
-		CreatePlaylist: () =>
-			import("../../components/modals/CreatePlaylist.vue"),
-		EditStation: () => import("../../components/modals/EditStation.vue"),
-		Report: () => import("../../components/modals/Report.vue"),
+		SongQueue: () => import("@/components/modals/AddSongToQueue.vue"),
+		EditPlaylist: () => import("@/components/modals/EditPlaylist.vue"),
+		CreatePlaylist: () => import("@/components/modals/CreatePlaylist.vue"),
+		EditStation: () => import("@/components/modals/EditStation.vue"),
+		Report: () => import("@/components/modals/Report.vue"),
 		Z404,
 		FloatingBox,
 		StationSidebar,
 		AddToPlaylistDropdown,
-		EditSong: () => import("../../components/modals/EditSong.vue"),
+		EditSong: () => import("@/components/modals/EditSong.vue"),
 		SongItem
 	},
 	data() {

frontend/src/pages/Team.vue

@@ -119,8 +119,8 @@
 </template>
 
 <script>
-import MainHeader from "../components/layout/MainHeader.vue";
-import MainFooter from "../components/layout/MainFooter.vue";
+import MainHeader from "@/components/layout/MainHeader.vue";
+import MainFooter from "@/components/layout/MainFooter.vue";
 
 export default {
 	components: { MainHeader, MainFooter }

frontend/src/pages/Terms.vue

@@ -1096,8 +1096,8 @@
 </template>
 
 <script>
-import MainHeader from "../components/layout/MainHeader.vue";
-import MainFooter from "../components/layout/MainFooter.vue";
+import MainHeader from "@/components/layout/MainHeader.vue";
+import MainFooter from "@/components/layout/MainFooter.vue";
 
 export default {
 	components: { MainHeader, MainFooter }

frontend/src/store/modules/admin.js

@@ -1,7 +1,7 @@
 /* eslint no-param-reassign: 0 */
 /* eslint-disable import/no-cycle */
 
-import admin from "../../api/admin/index";
+import admin from "@/api/admin/index";
 
 const state = {};
 const getters = {};

frontend/src/store/modules/modals/editSong.js

@@ -1,7 +1,7 @@
 /* eslint no-param-reassign: 0 */
 
 // import Vue from "vue";
-// import admin from "../../../api/admin/index";
+// import admin from "@/api/admin/index";
 
 export default {
 	namespaced: true,

frontend/src/store/modules/modals/viewReport.js

@@ -1,7 +1,7 @@
 /* eslint no-param-reassign: 0 */
 /* eslint-disable import/no-cycle */
 
-import admin from "../../../api/admin/index";
+import admin from "@/api/admin/index";
 
 export default {
 	namespaced: true,

frontend/src/store/modules/user.js

@@ -1,9 +1,9 @@
 /* eslint no-param-reassign: 0 */
 /* eslint-disable import/no-cycle */
 
-import auth from "../../api/auth";
-import ws from "../../ws";
-import validation from "../../validation";
+import validation from "@/validation";
+import ws from "@/ws";
+import auth from "@/api/auth";
 
 const state = {};
 const getters = {};

frontend/webpack.common.js

@@ -1,3 +1,4 @@
+const path = require("path");
 const { VueLoaderPlugin } = require("vue-loader");
 const HtmlWebpackPlugin = require("html-webpack-plugin");
 
@@ -7,6 +8,12 @@ module.exports = {
 		path: `${__dirname}/dist/build/`,
 		filename: "[name].[contenthash].js"
 	},
+	resolve: {
+		alias: {
+			"@": path.resolve(__dirname, "./src/")
+		},
+		extensions: [".js", ".vue"]
+	},
 	plugins: [
 		new VueLoaderPlugin(),
 		new HtmlWebpackPlugin({