style(frontend): added strongly recommended eslint vue rules

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

frontend/.eslintrc

@@ -13,7 +13,7 @@
 	},
 	"extends": [
 		"airbnb-base",
-		"plugin:vue/essential",
+		"plugin:vue/strongly-recommended",
 		"eslint:recommended",
 		"prettier",
 		"prettier/vue"

frontend/src/components/Modal.vue

@@ -23,7 +23,7 @@ import { mapActions } from "vuex";
 
 export default {
 	props: {
-		title: { type: String }
+		title: { type: String, default: "Modal" }
 	},
 	methods: {
 		toCamelCase: str => {

frontend/src/components/Sidebar.vue

@@ -10,7 +10,7 @@
 <script>
 export default {
 	props: {
-		title: { type: String }
+		title: { type: String, default: "Sidebar" }
 	}
 };
 </script>

frontend/src/components/common/UserIdToUsername.vue

@@ -15,7 +15,10 @@
 import { mapActions } from "vuex";
 
 export default {
-	props: ["userId", "link"],
+	props: {
+		userId: { type: String, default: "" },
+		link: Boolean
+	},
 	data() {
 		return {
 			username: "unknown"

frontend/src/components/modals/CreatePlaylist.vue

@@ -1,6 +1,6 @@
 <template>
 	<modal title="Create Playlist">
-		<template v-slot:body>
+		<template #body>
 			<p class="control is-expanded">
 				<input
 					v-model="playlist.displayName"
@@ -12,8 +12,8 @@
 				/>
 			</p>
 		</template>
-		<template v-slot:footer>
-			<a class="button is-info" v-on:click="createPlaylist()"
+		<template #footer>
+			<a class="button is-info" @click="createPlaylist()"
 				>Create Playlist</a
 			>
 		</template>

frontend/src/components/modals/EditPlaylist.vue

@@ -17,7 +17,7 @@
 					<li v-for="(song, index) in playlist.songs" :key="index">
 						<a href="#" target="_blank">{{ song.title }}</a>
 						<div class="controls">
-							<a href="#" v-on:click="promoteSong(song.songId)">
+							<a href="#" @click="promoteSong(song.songId)">
 								<i class="material-icons" v-if="index > 0"
 									>keyboard_arrow_up</i
 								>
@@ -28,7 +28,7 @@
 									>error</i
 								>
 							</a>
-							<a href="#" v-on:click="demoteSong(song.songId)">
+							<a href="#" @click="demoteSong(song.songId)">
 								<i
 									v-if="playlist.songs.length - 1 !== index"
 									class="material-icons"
@@ -43,7 +43,7 @@
 							</a>
 							<a
 								href="#"
-								v-on:click="removeSongFromPlaylist(song.songId)"
+								@click="removeSongFromPlaylist(song.songId)"
 							>
 								<i class="material-icons">delete</i>
 							</a>
@@ -154,7 +154,7 @@
 			</div>
 		</div>
 		<div slot="footer">
-			<a class="button is-danger" v-on:click="removePlaylist()" href="#"
+			<a class="button is-danger" @click="removePlaylist()" href="#"
 				>Remove Playlist</a
 			>
 		</div>

frontend/src/components/modals/EditSong.vue

@@ -15,33 +15,31 @@
 								<div class="player-footer-left">
 									<i
 										class="material-icons player-play-pause"
-										v-on:click="settings('play')"
-										v-on:keyup.enter="settings('play')"
+										@click="settings('play')"
+										@keyup.enter="settings('play')"
 										tabindex="0"
 										v-if="video.paused"
 										>play_arrow</i
 									>
 									<i
 										class="material-icons player-play-pause"
-										v-on:click="settings('pause')"
-										v-on:keyup.enter="settings('pause')"
+										@click="settings('pause')"
+										@keyup.enter="settings('pause')"
 										tabindex="0"
 										v-if="!video.paused"
 										>pause</i
 									>
 									<i
 										class="material-icons player-stop"
-										v-on:click="settings('stop')"
-										v-on:keyup.enter="settings('stop')"
+										@click="settings('stop')"
+										@keyup.enter="settings('stop')"
 										tabindex="0"
 										>stop</i
 									>
 									<i
 										class="material-icons player-fast-forward"
-										v-on:click="
-											settings('skipToLast10Secs')
-										"
-										v-on:keyup.enter="
+										@click="settings('skipToLast10Secs')"
+										@keyup.enter="
 											settings('skipToLast10Secs')
 										"
 										tabindex="0"
@@ -68,8 +66,8 @@
 										min="0"
 										max="10000"
 										class="active"
-										v-on:change="changeVolume()"
-										v-on:input="changeVolume()"
+										@change="changeVolume()"
+										@input="changeVolume()"
 									/>
 								</div>
 							</div>
@@ -90,13 +88,13 @@
 										type="text"
 										id="title-input"
 										v-model="editing.song.title"
-										v-on:keyup.ctrl.alt.68="
+										@keyup.ctrl.alt.68="
 											getAlbumData('title')
 										"
 									/>
 									<button
 										class="button album-get-button"
-										v-on:click="getAlbumData('title')"
+										@click="getAlbumData('title')"
 									>
 										<i class="material-icons">album</i>
 									</button>
@@ -112,7 +110,7 @@
 									/>
 									<button
 										class="button duration-fill-button"
-										v-on:click="fillDuration()"
+										@click="fillDuration()"
 									>
 										<i class="material-icons">sync</i>
 									</button>
@@ -139,13 +137,13 @@
 										class="input"
 										type="text"
 										v-model="editing.song.thumbnail"
-										v-on:keyup.ctrl.alt.68="
+										@keyup.ctrl.alt.68="
 											getAlbumData('albumArt')
 										"
 									/>
 									<button
 										class="button album-get-button"
-										v-on:click="getAlbumData('albumArt')"
+										@click="getAlbumData('albumArt')"
 									>
 										<i class="material-icons">album</i>
 									</button>
@@ -161,23 +159,23 @@
 										type="text"
 										id="new-artist"
 										v-model="artistInputValue"
-										v-on:blur="blurArtistInput()"
-										v-on:focus="focusArtistInput()"
-										v-on:keydown="keydownArtistInput()"
-										v-on:keyup.enter="addTag('artists')"
-										v-on:keyup.ctrl.alt.68="
+										@blur="blurArtistInput()"
+										@focus="focusArtistInput()"
+										@keydown="keydownArtistInput()"
+										@keyup.enter="addTag('artists')"
+										@keyup.ctrl.alt.68="
 											getAlbumData('artists')
 										"
 									/>
 									<button
 										class="button album-get-button"
-										v-on:click="getAlbumData('artists')"
+										@click="getAlbumData('artists')"
 									>
 										<i class="material-icons">album</i>
 									</button>
 									<button
 										class="button is-info add-button"
-										v-on:click="addTag('artists')"
+										@click="addTag('artists')"
 									>
 										<i class="material-icons">add</i>
 									</button>
@@ -195,9 +193,7 @@
 									<span
 										class="autosuggest-item"
 										tabindex="0"
-										v-on:click="
-											selectArtistAutosuggest(item)
-										"
+										@click="selectArtistAutosuggest(item)"
 										v-for="(item,
 										index) in artistAutosuggestItems"
 										:key="index"
@@ -213,9 +209,7 @@
 									>
 										<div
 											class="list-item-circle"
-											v-on:click="
-												removeTag('artists', index)
-											"
+											@click="removeTag('artists', index)"
 										>
 											<i class="material-icons">close</i>
 										</div>
@@ -239,23 +233,23 @@
 										type="text"
 										id="new-genre"
 										v-model="genreInputValue"
-										v-on:blur="blurGenreInput()"
-										v-on:focus="focusGenreInput()"
-										v-on:keydown="keydownGenreInput()"
-										v-on:keyup.enter="addTag('genres')"
-										v-on:keyup.ctrl.alt.68="
+										@blur="blurGenreInput()"
+										@focus="focusGenreInput()"
+										@keydown="keydownGenreInput()"
+										@keyup.enter="addTag('genres')"
+										@keyup.ctrl.alt.68="
 											getAlbumData('genres')
 										"
 									/>
 									<button
 										class="button album-get-button"
-										v-on:click="getAlbumData('genres')"
+										@click="getAlbumData('genres')"
 									>
 										<i class="material-icons">album</i>
 									</button>
 									<button
 										class="button is-info add-button"
-										v-on:click="addTag('genres')"
+										@click="addTag('genres')"
 									>
 										<i class="material-icons">add</i>
 									</button>
@@ -272,9 +266,7 @@
 								>
 									<span
 										class="autosuggest-item"
-										v-on:click="
-											selectGenreAutosuggest(item)
-										"
+										@click="selectGenreAutosuggest(item)"
 										v-for="(item,
 										index) in genreAutosuggestItems"
 										:key="index"
@@ -290,9 +282,7 @@
 									>
 										<div
 											class="list-item-circle"
-											v-on:click="
-												removeTag('genres', index)
-											"
+											@click="removeTag('genres', index)"
 										>
 											<i class="material-icons">close</i>
 										</div>
@@ -389,14 +379,14 @@
 								type="text"
 								id="discogs-input"
 								v-model="discogsQuery"
-								v-on:keyup.enter="searchDiscogsForPage(1)"
+								@keyup.enter="searchDiscogsForPage(1)"
 								@change="onDiscogsQueryChange"
 								v-focus
 							/>
 						</p>
 						<button
 							class="button is-info is-fullwidth"
-							v-on:click="searchDiscogsForPage(1)"
+							@click="searchDiscogsForPage(1)"
 						>
 							Search
 						</button>
@@ -414,8 +404,8 @@
 								v-for="(result, index) in discogs.apiResults"
 								:key="index"
 								tabindex="0"
-								v-on:keydown.prevent.32
-								v-on:keyup.13="toggleAPIResult(index)"
+								@keydown.prevent.32
+								@keyup.13="toggleAPIResult(index)"
 							>
 								<div class="top-container">
 									<img :src="result.album.albumArt" />
@@ -427,16 +417,12 @@
 											<img
 												src="/assets/arrow_up.svg"
 												v-if="result.expanded"
-												v-on:click="
-													toggleAPIResult(index)
-												"
+												@click="toggleAPIResult(index)"
 											/>
 											<img
 												src="/assets/arrow_down.svg"
 												v-if="!result.expanded"
-												v-on:click="
-													toggleAPIResult(index)
-												"
+												@click="toggleAPIResult(index)"
 											/>
 											<p class="type-year">
 												<span>{{
@@ -477,10 +463,10 @@
 											v-for="(track,
 											trackIndex) in result.tracks"
 											:key="trackIndex"
-											v-on:click="
+											@click="
 												selectTrack(index, trackIndex)
 											"
-											v-on:keyup.enter="
+											@keyup.enter="
 												selectTrack(index, trackIndex)
 											"
 										>
@@ -508,23 +494,21 @@
 			<div slot="footer" class="footer-buttons">
 				<button
 					class="button is-success"
-					v-on:click="save(editing.song, false)"
+					@click="save(editing.song, false)"
 				>
 					<i class="material-icons save-changes">done</i>
 					<span>&nbsp;Save</span>
 				</button>
 				<button
 					class="button is-success"
-					v-on:click="save(editing.song, true)"
+					@click="save(editing.song, true)"
 				>
 					<i class="material-icons save-changes">done</i>
 					<span>&nbsp;Save and close</span>
 				</button>
 				<button
 					class="button is-danger"
-					v-on:click="
-						closeModal({ sector: 'admin', modal: 'editSong' })
-					"
+					@click="closeModal({ sector: 'admin', modal: 'editSong' })"
 				>
 					<span>&nbsp;Close</span>
 				</button>
@@ -532,7 +516,7 @@
 		</modal>
 		<div
 			id="genre-helper-container"
-			v-bind:style="{
+			:style="{
 				width: genreHelper.width + 'px',
 				height: genreHelper.height + 'px',
 				top: genreHelper.top + 'px',

frontend/src/components/modals/EditStation.vue

@@ -1,6 +1,6 @@
 <template>
 	<modal title="Edit Station" class="edit-station-modal">
-		<template v-slot:body>
+		<template #body>
 			<div class="custom-modal-body">
 				<!--  Station Preferences -->
 				<div class="section left-section">
@@ -47,14 +47,14 @@
 									type="text"
 									id="new-genre"
 									v-model="genreInputValue"
-									v-on:blur="blurGenreInput()"
-									v-on:focus="focusGenreInput()"
-									v-on:keydown="keydownGenreInput()"
-									v-on:keyup.enter="addTag('genres')"
+									@blur="blurGenreInput()"
+									@focus="focusGenreInput()"
+									@keydown="keydownGenreInput()"
+									@keyup.enter="addTag('genres')"
 								/>
 								<button
 									class="button is-info add-button blue"
-									v-on:click="addTag('genres')"
+									@click="addTag('genres')"
 								>
 									<i class="material-icons">add</i>
 								</button>
@@ -72,7 +72,7 @@
 								<span
 									class="autosuggest-item"
 									tabindex="0"
-									v-on:click="selectGenreAutosuggest(item)"
+									@click="selectGenreAutosuggest(item)"
 									v-for="(item,
 									index) in genreAutosuggestItems"
 									:key="index"
@@ -87,7 +87,7 @@
 								>
 									<div
 										class="list-item-circle blue"
-										v-on:click="removeTag('genres', index)"
+										@click="removeTag('genres', index)"
 									>
 										<i class="material-icons">close</i>
 									</div>
@@ -102,16 +102,14 @@
 									class="input"
 									type="text"
 									v-model="blacklistGenreInputValue"
-									v-on:blur="blurBlacklistGenreInput()"
-									v-on:focus="focusBlacklistGenreInput()"
-									v-on:keydown="keydownBlacklistGenreInput()"
-									v-on:keyup.enter="
-										addTag('blacklist-genres')
-									"
+									@blur="blurBlacklistGenreInput()"
+									@focus="focusBlacklistGenreInput()"
+									@keydown="keydownBlacklistGenreInput()"
+									@keyup.enter="addTag('blacklist-genres')"
 								/>
 								<button
 									class="button is-info add-button red"
-									v-on:click="addTag('blacklist-genres')"
+									@click="addTag('blacklist-genres')"
 								>
 									<i class="material-icons">add</i>
 								</button>
@@ -130,7 +128,7 @@
 								<span
 									class="autosuggest-item"
 									tabindex="0"
-									v-on:click="
+									@click="
 										selectBlacklistGenreAutosuggest(item)
 									"
 									v-for="(item,
@@ -148,7 +146,7 @@
 								>
 									<div
 										class="list-item-circle red"
-										v-on:click="
+										@click="
 											removeTag('blacklist-genres', index)
 										"
 									>
@@ -223,9 +221,7 @@
 							class="button-wrapper"
 						>
 							<button
-								v-bind:class="
-									privacyButtons[editing.privacy].style
-								"
+								:class="privacyButtons[editing.privacy].style"
 								style="text-transform: capitalize"
 								@click="updatePrivacyLocal(editing.privacy)"
 							>
@@ -290,7 +286,7 @@
 							class="button-wrapper"
 						>
 							<button
-								v-bind:class="{
+								:class="{
 									blue: !editing.partyMode,
 									yellow: editing.partyMode
 								}"
@@ -346,7 +342,7 @@
 							class="button-wrapper"
 						>
 							<button
-								v-bind:class="{
+								:class="{
 									green: editing.locked,
 									red: !editing.locked
 								}"
@@ -392,8 +388,8 @@
 				</div>
 			</div>
 		</template>
-		<template v-slot:footer>
-			<button class="button is-success" v-on:click="update()">
+		<template #footer>
+			<button class="button is-success" @click="update()">
 				Update Settings
 			</button>
 			<button
@@ -547,7 +543,7 @@ export default {
 			playlists: []
 		};
 	},
-	props: ["store"],
+	props: { store: { type: Object, default: () => {} } },
 	methods: {
 		isPlaylistSelected(id) {
 			// TODO Also change this once it changes for a station

frontend/src/components/modals/Login.vue

@@ -69,7 +69,7 @@
 					</div>
 					&nbsp;&nbsp;Login with GitHub
 				</a>
-				<a href="/reset_password" v-on:click="resetPassword()"
+				<a href="/reset_password" @click="resetPassword()"
 					>Forgot password?</a
 				>
 			</footer>

frontend/src/components/modals/WhatIsNew.vue

@@ -11,7 +11,7 @@
 					<strong>{{ news.title }}</strong>
 					({{ formatDate(news.createdAt) }})
 				</p>
-				<button class="delete" v-on:click="toggleModal()" />
+				<button class="delete" @click="toggleModal()" />
 			</header>
 			<section class="modal-card-body">
 				<div class="content">

frontend/src/components/ui/PlaylistItem.vue

@@ -19,7 +19,7 @@ import utils from "../../../js/utils";
 
 export default {
 	props: {
-		playlist: Object
+		playlist: { type: Object, default: () => {} }
 	},
 	data() {
 		return {

frontend/src/main.js

@@ -10,7 +10,7 @@ const handleMetadata = attrs => {
 	document.title = `Musare | ${attrs.title}`;
 };
 
-Vue.component("metadata", {
+Vue.component("Metadata", {
 	watch: {
 		$attrs: {
 			// eslint-disable-next-line vue/no-arrow-functions-in-watch

frontend/src/pages/Admin/EditUser.vue

@@ -10,7 +10,7 @@
 						placeholder="Username"
 						autofocus
 					/>
-					<a class="button is-info" v-on:click="updateUsername()"
+					<a class="button is-info" @click="updateUsername()"
 						>Update Username</a
 					>
 				</p>
@@ -22,7 +22,7 @@
 						placeholder="Email Address"
 						autofocus
 					/>
-					<a class="button is-info" v-on:click="updateEmail()"
+					<a class="button is-info" @click="updateEmail()"
 						>Update Email Address</a
 					>
 				</p>
@@ -33,7 +33,7 @@
 							<option>admin</option>
 						</select>
 					</span>
-					<a class="button is-info" v-on:click="updateRole()"
+					<a class="button is-info" @click="updateRole()"
 						>Update Role</a
 					>
 				</p>
@@ -58,9 +58,7 @@
 						placeholder="Ban reason"
 						autofocus
 					/>
-					<a class="button is-error" v-on:click="banUser()"
-						>Ban user</a
-					>
+					<a class="button is-error" @click="banUser()">Ban user</a>
 				</p>
 			</div>
 			<div slot="footer">
@@ -70,7 +68,7 @@
 				<button class='button is-warning'>
 					<span>&nbsp;Send Password Reset Email</span>
         </button-->
-				<button class="button is-warning" v-on:click="removeSessions()">
+				<button class="button is-warning" @click="removeSessions()">
 					<span>&nbsp;Remove all sessions</span>
 				</button>
 				<button

frontend/src/pages/Admin/IssuesModal.vue

@@ -19,7 +19,7 @@
 					<br />
 					<strong>Author:</strong>
 					<user-id-to-username
-						:userId="report.createdBy"
+						:user-id="report.createdBy"
 						:alt="report.createdBy"
 					/>
 					<br />

frontend/src/pages/Admin/ViewPunishment.vue

@@ -48,7 +48,7 @@
 						<br />
 						<strong>Punished by:</strong>
 						<user-id-to-username
-							:userId="punishment.punishedBy"
+							:user-id="punishment.punishedBy"
 							:alt="punishment.punishedBy"
 						/>
 						<br />

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

@@ -23,20 +23,22 @@
 							</thead>
 							<tbody>
 								<tr
-									v-for="module_ in modules"
-									:key="module_.name"
+									v-for="moduleItem in modules"
+									:key="moduleItem.name"
 								>
 									<td>
 										<router-link
-											:to="'?moduleName=' + module_.name"
-											>{{ module_.name }}</router-link
+											:to="
+												'?moduleName=' + moduleItem.name
+											"
+											>{{ moduleItem.name }}</router-link
 										>
 									</td>
-									<td>{{ module_.status }}</td>
-									<td>{{ module_.stage }}</td>
-									<td>{{ module_.jobsInQueue }}</td>
-									<td>{{ module_.jobsInProgress }}</td>
-									<td>{{ module_.concurrency }}</td>
+									<td>{{ moduleItem.status }}</td>
+									<td>{{ moduleItem.stage }}</td>
+									<td>{{ moduleItem.jobsInQueue }}</td>
+									<td>{{ moduleItem.jobsInProgress }}</td>
+									<td>{{ moduleItem.concurrency }}</td>
 								</tr>
 							</tbody>
 						</table>
@@ -45,7 +47,7 @@
 			</div>
 		</div>
 		<br />
-		<div class="columns" v-if="module_">
+		<div class="columns" v-if="module">
 			<div
 				class="card column is-10-desktop is-offset-1-desktop is-12-mobile"
 			>
@@ -63,7 +65,7 @@
 							</thead>
 							<tbody>
 								<tr
-									v-for="job in module_.runningJobs"
+									v-for="job in module.runningJobs"
 									:key="JSON.stringify(job)"
 								>
 									<td>{{ job.name }}</td>
@@ -78,7 +80,7 @@
 			</div>
 		</div>
 		<br />
-		<div class="columns" v-if="module_">
+		<div class="columns" v-if="module">
 			<div
 				class="card column is-10-desktop is-offset-1-desktop is-12-mobile"
 			>
@@ -100,7 +102,7 @@
 							<tbody>
 								<tr
 									v-for="(job,
-									jobName) in module_.jobStatistics"
+									jobName) in module.jobStatistics"
 									:key="jobName"
 								>
 									<td>{{ jobName }}</td>
@@ -134,7 +136,7 @@ export default {
 	data() {
 		return {
 			modules: [],
-			module_: null
+			module: null
 		};
 	},
 	mounted() {
@@ -160,7 +162,7 @@ export default {
 					data => {
 						console.log(data);
 						if (data.status === "success") {
-							this.module_ = {
+							this.module = {
 								runningJobs: data.runningJobs,
 								jobStatistics: data.jobStatistics
 							};

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

@@ -79,7 +79,7 @@
 					</div>
 				</div>
 				<footer class="card-footer">
-					<a class="card-footer-item" v-on:click="banIP()" href="#"
+					<a class="card-footer-item" @click="banIP()" href="#"
 						>Ban IP</a
 					>
 				</footer>

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

@@ -39,13 +39,13 @@
 						v-for="(song, index) in filteredSongs"
 						:key="index"
 						tabindex="0"
-						v-on:keydown.prevent.38
-						v-on:keydown.prevent.40
-						v-on:keyup.38="selectPrevious($event)"
-						v-on:keyup.40="selectNext($event)"
-						v-on:keyup.69="edit(song, index)"
-						v-on:keyup.65="add(song)"
-						v-on:keyup.88="remove(song._id, index)"
+						@keydown.prevent.38
+						@keydown.prevent.40
+						@keyup.38="selectPrevious($event)"
+						@keyup.40="selectNext($event)"
+						@keyup.69="edit(song, index)"
+						@keyup.65="add(song)"
+						@keyup.88="remove(song._id, index)"
 					>
 						<td>
 							<img
@@ -74,7 +74,7 @@
 						</td>
 						<td>
 							<user-id-to-username
-								:userId="song.requestedBy"
+								:user-id="song.requestedBy"
 								:link="true"
 							/>
 						</td>

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

@@ -23,7 +23,7 @@
 						</td>
 						<td>
 							<user-id-to-username
-								:userId="report.createdBy"
+								:user-id="report.createdBy"
 								:link="true"
 							/>
 						</td>

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

@@ -73,7 +73,7 @@
 						</td>
 						<td>
 							<user-id-to-username
-								:userId="song.requestedBy"
+								:user-id="song.requestedBy"
 								:link="true"
 							/>
 						</td>

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

@@ -48,12 +48,12 @@
 							>
 							<user-id-to-username
 								v-else
-								:userId="station.owner"
+								:user-id="station.owner"
 								:link="true"
 							/>
 						</td>
 						<td>
-							<a class="button is-info" v-on:click="edit(station)"
+							<a class="button is-info" @click="edit(station)"
 								>Edit</a
 							>
 							<a

frontend/src/pages/Home/CreateCommunityStation.vue

@@ -1,6 +1,6 @@
 <template>
 	<modal title="Create Community Station">
-		<template v-slot:body>
+		<template #body>
 			<!-- validation to check if exists http://bulma.io/documentation/elements/form/ -->
 			<label class="label">Name (unique lowercase station id)</label>
 			<p class="control">
@@ -32,8 +32,8 @@
 				/>
 			</p>
 		</template>
-		<template v-slot:footer>
-			<a class="button is-primary" v-on:click="submitModal()">Create</a>
+		<template #footer>
+			<a class="button is-primary" @click="submitModal()">Create</a>
 		</template>
 	</modal>
 </template>

frontend/src/pages/Home/index.vue

@@ -39,7 +39,7 @@
 							<div
 								v-if="station.currentSong.ytThumbnail"
 								class="ytThumbnailBg"
-								v-bind:style="{
+								:style="{
 									'background-image':
 										'url(' +
 										station.currentSong.ytThumbnail +
@@ -86,7 +86,7 @@
 									>
 									<user-id-to-username
 										v-else
-										:userId="station.owner"
+										:user-id="station.owner"
 										:link="true"
 									/>
 								</span>

frontend/src/pages/News.vue

@@ -24,8 +24,9 @@
 							</div>
 							<ul class="sect-body">
 								<li
-									v-for="(feature, index) in item.features"
-									:key="index"
+									v-for="(feature,
+									itemIndex) in item.features"
+									:key="itemIndex"
 								>
 									{{ feature }}
 								</li>
@@ -38,8 +39,8 @@
 							<ul class="sect-body">
 								<li
 									v-for="(improvement,
-									ind) in item.improvements"
-									:key="ind"
+									itemIndex) in item.improvements"
+									:key="itemIndex"
 								>
 									{{ improvement }}
 								</li>
@@ -49,8 +50,8 @@
 							<div class="sect-head-bugs">Bugs Smashed</div>
 							<ul class="sect-body">
 								<li
-									v-for="(bug, index) in item.bugs"
-									:key="index"
+									v-for="(bug, itemIndex) in item.bugs"
+									:key="itemIndex"
 								>
 									{{ bug }}
 								</li>
@@ -62,8 +63,9 @@
 							</div>
 							<ul class="sect-body">
 								<li
-									v-for="(upcoming, index) in item.upcoming"
-									:key="index"
+									v-for="(upcoming,
+									itemIndex) in item.upcoming"
+									:key="itemIndex"
 								>
 									{{ upcoming }}
 								</li>

frontend/src/pages/Profile.vue

@@ -1,6 +1,6 @@
 <template>
 	<div v-if="isUser">
-		<metadata v-bind:title="`Profile | ${user.username}`" />
+		<metadata :title="`Profile | ${user.username}`" />
 		<edit-playlist v-if="modals.editPlaylist" />
 		<create-playlist v-if="modals.createPlaylist" />
 		<main-header />

frontend/src/pages/ResetPassword.vue

@@ -20,11 +20,7 @@
 
 				<transition name="steps-fade" mode="out-in">
 					<!-- Step 1 -- Enter email address -->
-					<div
-						class="content-box"
-						v-if="step === 1"
-						v-bind:key="step"
-					>
+					<div class="content-box" v-if="step === 1" :key="step">
 						<h2 class="content-box-title">
 							Enter your email address
 						</h2>
@@ -79,11 +75,7 @@
 					</div>
 
 					<!-- Step 2 -- Enter code -->
-					<div
-						class="content-box"
-						v-if="step === 2"
-						v-bind:key="step"
-					>
+					<div class="content-box" v-if="step === 2" :key="step">
 						<h2 class="content-box-title">
 							Enter the code sent to your email
 						</h2>
@@ -127,11 +119,7 @@
 					</div>
 
 					<!-- Step 3 -- Set new password -->
-					<div
-						class="content-box"
-						v-if="step === 3"
-						v-bind:key="step"
-					>
+					<div class="content-box" v-if="step === 3" :key="step">
 						<h2 class="content-box-title">
 							Set a new password
 						</h2>
@@ -206,7 +194,7 @@
 					<div
 						class="content-box reset-status-box"
 						v-if="step === 4"
-						v-bind:key="step"
+						:key="step"
 					>
 						<i class="material-icons success-icon">check_circle</i>
 						<h2>Password successfully {{ mode }}</h2>
@@ -222,7 +210,7 @@
 					<div
 						class="content-box reset-status-box"
 						v-if="step === 5"
-						v-bind:key="step"
+						:key="step"
 					>
 						<i class="material-icons error-icon">error</i>
 						<h2>

frontend/src/pages/Station/AddSongToPlaylist.vue

@@ -1,6 +1,6 @@
 <template>
 	<modal title="Add Song To Playlist">
-		<template v-slot:body>
+		<template #body>
 			<h4 class="songTitle">
 				{{ currentSong.title }}
 			</h4>

frontend/src/pages/Station/AddSongToQueue.vue

@@ -25,7 +25,7 @@
 					<p class="control">
 						<a
 							class="button is-info"
-							v-on:click="submitQuery()"
+							@click="submitQuery()"
 							href="#"
 							><i class="material-icons icon-with-button"
 								>search</i
@@ -74,7 +74,7 @@
 									<a
 										class="button is-dark"
 										v-else
-										v-on:click="
+										@click="
 											addSongToQueue(result.id, index)
 										"
 										href="#"
@@ -129,7 +129,7 @@
 							</span>
 							<a
 								class="button is-info"
-								v-on:click="importPlaylist()"
+								@click="importPlaylist()"
 								href="#"
 								><i class="material-icons icon-with-button"
 									>publish</i
@@ -176,14 +176,12 @@
 									<div slot="actions">
 										<a
 											class="button is-danger"
-											v-on:click="
-												addSongToQueue(result.id)
-											"
 											href="#"
 											@click="
-												togglePlaylistSelection(
-													playlist._id
-												)
+												addSongToQueue(result.id) &&
+													togglePlaylistSelection(
+														playlist._id
+													)
 											"
 											v-if="
 												isPlaylistSelected(playlist._id)
@@ -197,15 +195,13 @@
 										</a>
 										<a
 											class="button is-success"
-											v-on:click="
-												addSongToQueue(result.id)
-											"
-											href="#"
 											@click="
-												togglePlaylistSelection(
-													playlist._id
-												)
+												addSongToQueue(result.id) &&
+													togglePlaylistSelection(
+														playlist._id
+													)
 											"
+											href="#"
 											v-else
 											><i
 												class="material-icons icon-with-button"

frontend/src/pages/Station/Report.vue

@@ -88,15 +88,15 @@
 			<div class="edit-report-wrapper">
 				<div class="columns is-multiline">
 					<div
-						v-for="(issue, index) in issues"
+						v-for="(issue, issueIndex) in issues"
 						class="column is-half"
-						:key="index"
+						:key="issueIndex"
 					>
 						<label class="label">{{ issue.name }}</label>
 						<p
-							v-for="(reason, index) in issue.reasons"
+							v-for="(reason, reasonIndex) in issue.reasons"
 							class="control"
-							:key="index"
+							:key="reasonIndex"
 						>
 							<label class="checkbox">
 								<input

frontend/src/pages/Station/SongsList.vue

@@ -1,6 +1,6 @@
 <template>
 	<sidebar :title="station.type === 'community' ? 'Queue' : 'Playlist'">
-		<template v-slot:content>
+		<template #content>
 			<article v-if="!noSong" class="media">
 				<figure v-if="currentSong.thumbnail" class="media-left">
 					<p class="image is-64x64">
@@ -52,7 +52,7 @@
 								Requested by
 								<b>
 									<user-id-to-username
-										:userId="song.requestedBy"
+										:user-id="song.requestedBy"
 										:link="true"
 									/>
 								</b>

frontend/src/pages/Station/StationHeader.vue

@@ -14,7 +14,7 @@
 				<h4>{{ station.displayName }}</h4>
 			</div>
 
-			<span class="nav-toggle" v-on:click="controlBar = !controlBar">
+			<span class="nav-toggle" @click="controlBar = !controlBar">
 				<span />
 				<span />
 				<span />

frontend/src/pages/Station/UsersList.vue

@@ -1,6 +1,6 @@
 <template>
 	<sidebar title="Users">
-		<template v-slot:content>
+		<template #content>
 			<h5 class="has-text-centered">Total users: {{ userCount }}</h5>
 			<aside class="menu">
 				<ul class="menu-list">

frontend/src/pages/Station/index.vue

@@ -1,10 +1,7 @@
 <template>
 	<div>
-		<metadata
-			v-if="exists && !loading"
-			v-bind:title="`${station.displayName}`"
-		/>
-		<metadata v-else-if="!exists && !loading" v-bind:title="`Not found`" />
+		<metadata v-if="exists && !loading" :title="`${station.displayName}`" />
+		<metadata v-else-if="!exists && !loading" :title="`Not found`" />
 
 		<station-header
 			v-if="exists"
@@ -152,7 +149,7 @@
 											Requested by
 											<b>
 												<user-id-to-username
-													:userId="song.requestedBy"
+													:user-id="song.requestedBy"
 													:link="true"
 												/>
 											</b>