diff --git a/.prettierrc b/.prettierrc
index 2fba1be483..6ff41c8ae0 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,6 +1,6 @@
 {
     "htmlWhitespaceSensitivity": "ignore",
-    "printWidth": 100,
+    "printWidth": 120,
     "singleQuote": true,
     "useTabs": true
 }
diff --git a/src/components/transition/expand/transition-expand-methods.ts b/src/components/transition/expand/transition-expand-methods.ts
index 4f78d34b62..4a4c86ee76 100644
--- a/src/components/transition/expand/transition-expand-methods.ts
+++ b/src/components/transition/expand/transition-expand-methods.ts
@@ -13,9 +13,7 @@ interface HTMLExpandElement extends HTMLElement {
 
 export default function (expandedParentClass = '', xAxis = false) {
 	const sizeProperty = xAxis ? 'width' : ('height' as 'width' | 'height');
-	const offsetProperty = `offset${capitalizeFirst(sizeProperty)}` as
-		| 'offsetHeight'
-		| 'offsetWidth';
+	const offsetProperty = `offset${capitalizeFirst(sizeProperty)}` as 'offsetHeight' | 'offsetWidth';
 
 	return {
 		beforeEnter(el: HTMLExpandElement) {
diff --git a/src/components/v-avatar/v-avatar.story.ts b/src/components/v-avatar/v-avatar.story.ts
index 8b3f1c706c..60c9a4ac9c 100644
--- a/src/components/v-avatar/v-avatar.story.ts
+++ b/src/components/v-avatar/v-avatar.story.ts
@@ -1,11 +1,4 @@
-import {
-	withKnobs,
-	text,
-	boolean,
-	number,
-	color,
-	optionsKnob as options,
-} from '@storybook/addon-knobs';
+import { withKnobs, text, boolean, number, color, optionsKnob as options } from '@storybook/addon-knobs';
 import Vue from 'vue';
 import VAvatar from './v-avatar.vue';
 import VIcon from '../v-icon/';
diff --git a/src/components/v-breadcrumb/v-breadcrumb.vue b/src/components/v-breadcrumb/v-breadcrumb.vue
index fd072c69a1..2c7bda1ab3 100644
--- a/src/components/v-breadcrumb/v-breadcrumb.vue
+++ b/src/components/v-breadcrumb/v-breadcrumb.vue
@@ -1,11 +1,6 @@
 <template>
 	<span class="v-breadcrumb">
-		<span
-			v-for="(item, index) in items"
-			:key="item.name"
-			class="section"
-			:class="{ disabled: item.disabled }"
-		>
+		<span v-for="(item, index) in items" :key="item.name" class="section" :class="{ disabled: item.disabled }">
 			<v-icon v-if="index > 0" name="chevron_right" small />
 			<router-link v-if="!item.disabled" :to="item.to" class="section-link">
 				<v-icon v-if="item.icon" :name="item.icon" small />
diff --git a/src/components/v-button/v-button.story.ts b/src/components/v-button/v-button.story.ts
index 2895e829b0..9ef543ecc2 100644
--- a/src/components/v-button/v-button.story.ts
+++ b/src/components/v-button/v-button.story.ts
@@ -1,12 +1,4 @@
-import {
-	withKnobs,
-	text,
-	boolean,
-	number,
-	color,
-	select,
-	optionsKnob as options,
-} from '@storybook/addon-knobs';
+import { withKnobs, text, boolean, number, color, select, optionsKnob as options } from '@storybook/addon-knobs';
 import { action } from '@storybook/addon-actions';
 import Vue from 'vue';
 import VButton from './v-button.vue';
diff --git a/src/components/v-button/v-button.vue b/src/components/v-button/v-button.vue
index aea0f54757..c949d6929f 100644
--- a/src/components/v-button/v-button.vue
+++ b/src/components/v-button/v-button.vue
@@ -335,9 +335,7 @@ body {
 		&.activated {
 			--v-button-color: var(--v-button-color-activated) !important;
 			--v-button-background-color: var(--v-button-background-color-activated) !important;
-			--v-button-background-color-hover: var(
-				--v-button-background-color-activated
-			) !important;
+			--v-button-background-color-hover: var(--v-button-background-color-activated) !important;
 		}
 
 		&.tile {
diff --git a/src/components/v-chip/v-chip.vue b/src/components/v-chip/v-chip.vue
index cd8b4498fc..d385c9a6e7 100644
--- a/src/components/v-chip/v-chip.vue
+++ b/src/components/v-chip/v-chip.vue
@@ -1,18 +1,8 @@
 <template>
-	<span
-		v-if="_active"
-		class="v-chip"
-		:class="[sizeClass, { outlined, label, disabled, close }]"
-		@click="onClick"
-	>
+	<span v-if="_active" class="v-chip" :class="[sizeClass, { outlined, label, disabled, close }]" @click="onClick">
 		<span class="chip-content">
 			<slot />
-			<span
-				v-if="close"
-				class="close-outline"
-				:class="{ disabled }"
-				@click.stop="onCloseClick"
-			>
+			<span v-if="close" class="close-outline" :class="{ disabled }" @click.stop="onCloseClick">
 				<v-icon class="close" :name="closeIcon" x-small />
 			</span>
 		</span>
diff --git a/src/components/v-divider/v-divider.story.ts b/src/components/v-divider/v-divider.story.ts
index b2fcaf492c..1ebd5467c0 100644
--- a/src/components/v-divider/v-divider.story.ts
+++ b/src/components/v-divider/v-divider.story.ts
@@ -3,12 +3,7 @@ import readme from './readme.md';
 import withPadding from '../../../.storybook/decorators/with-padding';
 import { withKnobs, boolean } from '@storybook/addon-knobs';
 import { defineComponent } from '@vue/composition-api';
-import VList, {
-	VListItem,
-	VListItemContent,
-	VListItemTitle,
-	VListItemIcon,
-} from '@/components/v-list';
+import VList, { VListItem, VListItemContent, VListItemTitle, VListItemIcon } from '@/components/v-list';
 import VIcon from '@/components/v-icon/';
 
 export default {
diff --git a/src/components/v-fancy-select/v-fancy-select.vue b/src/components/v-fancy-select/v-fancy-select.vue
index 16e5858fbf..a55755e72b 100644
--- a/src/components/v-fancy-select/v-fancy-select.vue
+++ b/src/components/v-fancy-select/v-fancy-select.vue
@@ -20,11 +20,7 @@
 					<div class="description">{{ item.description }}</div>
 				</div>
 
-				<v-icon
-					v-if="value === item.value && disabled === false"
-					name="cancel"
-					@click.stop="toggle(item)"
-				/>
+				<v-icon v-if="value === item.value && disabled === false" name="cancel" @click.stop="toggle(item)" />
 			</div>
 		</transition-group>
 	</div>
diff --git a/src/components/v-form/v-form.vue b/src/components/v-form/v-form.vue
index c6e7208ea5..66cd921198 100644
--- a/src/components/v-form/v-form.vue
+++ b/src/components/v-form/v-form.vue
@@ -101,9 +101,7 @@ export default defineComponent({
 		function useForm() {
 			const fields = computed(() => {
 				if (props.collection) {
-					return fieldsStore.state.fields.filter(
-						(field) => field.collection === props.collection
-					);
+					return fieldsStore.state.fields.filter((field) => field.collection === props.collection);
 				}
 
 				if (props.fields) {
@@ -231,9 +229,7 @@ export default defineComponent({
 
 			function toggleBatchField(field: Field) {
 				if (batchActiveFields.value.includes(field.field)) {
-					batchActiveFields.value = batchActiveFields.value.filter(
-						(fieldKey) => fieldKey !== field.field
-					);
+					batchActiveFields.value = batchActiveFields.value.filter((fieldKey) => fieldKey !== field.field);
 
 					unsetValue(field);
 				} else {
@@ -264,10 +260,7 @@ body {
 
 		&.with-fill {
 			grid-template-columns:
-				[start] minmax(0, var(--v-form-column-max-width)) [half] minmax(
-					0,
-					var(--v-form-column-max-width)
-				)
+				[start] minmax(0, var(--v-form-column-max-width)) [half] minmax(0, var(--v-form-column-max-width))
 				[full] 1fr [fill];
 		}
 	}
diff --git a/src/components/v-icon/custom-icons/signal_wifi_3_bar.vue b/src/components/v-icon/custom-icons/signal_wifi_3_bar.vue
index 204ce957eb..e3e4ca6d57 100644
--- a/src/components/v-icon/custom-icons/signal_wifi_3_bar.vue
+++ b/src/components/v-icon/custom-icons/signal_wifi_3_bar.vue
@@ -12,9 +12,7 @@
 			d="M24.02 42.98L47.28 14c-.9-.68-9.85-8-23.28-8S1.62 13.32.72 14l23.26 28.98.02.02.02-.02z"
 		/>
 		<path d="M0 0h48v48H0z" fill="none" />
-		<path
-			d="M9.58 25.03l14.41 17.95.01.02.01-.02 14.41-17.95C37.7 24.47 32.2 20 24 20s-13.7 4.47-14.42 5.03z"
-		/>
+		<path d="M9.58 25.03l14.41 17.95.01.02.01-.02 14.41-17.95C37.7 24.47 32.2 20 24 20s-13.7 4.47-14.42 5.03z" />
 	</svg>
 </template>
 
diff --git a/src/components/v-icon/v-icon.story.ts b/src/components/v-icon/v-icon.story.ts
index 44dc3e74fc..7aafce83d7 100644
--- a/src/components/v-icon/v-icon.story.ts
+++ b/src/components/v-icon/v-icon.story.ts
@@ -1,11 +1,4 @@
-import {
-	withKnobs,
-	text,
-	boolean,
-	number,
-	color,
-	optionsKnob as options,
-} from '@storybook/addon-knobs';
+import { withKnobs, text, boolean, number, color, optionsKnob as options } from '@storybook/addon-knobs';
 import { action } from '@storybook/addon-actions';
 import Vue from 'vue';
 import VIcon from '../v-icon/';
diff --git a/src/components/v-icon/v-icon.vue b/src/components/v-icon/v-icon.vue
index f19c32e41b..73d269e712 100644
--- a/src/components/v-icon/v-icon.vue
+++ b/src/components/v-icon/v-icon.vue
@@ -96,8 +96,7 @@ export default defineComponent({
 		});
 
 		const customIconName = computed<string | null>(() => {
-			if (customIcons.includes(props.name))
-				return `custom-icon-${props.name}`.replace(/_/g, '-');
+			if (customIcons.includes(props.name)) return `custom-icon-${props.name}`.replace(/_/g, '-');
 			return null;
 		});
 
diff --git a/src/components/v-input/v-input.test.ts b/src/components/v-input/v-input.test.ts
index 51546810e8..55e89e9ee6 100644
--- a/src/components/v-input/v-input.test.ts
+++ b/src/components/v-input/v-input.test.ts
@@ -25,18 +25,10 @@ describe('Input', () => {
 			},
 		});
 
-		expect(component.find('.v-input > .prepend-outer > div ').html()).toBe(
-			'<div>prepend-outer</div>'
-		);
-		expect(component.find('.v-input > .append-outer > div ').html()).toBe(
-			'<div>append-outer</div>'
-		);
-		expect(component.find('.v-input > .input > .prepend > div ').html()).toBe(
-			'<div>prepend</div>'
-		);
-		expect(component.find('.v-input > .input > .append > div ').html()).toBe(
-			'<div>append</div>'
-		);
+		expect(component.find('.v-input > .prepend-outer > div ').html()).toBe('<div>prepend-outer</div>');
+		expect(component.find('.v-input > .append-outer > div ').html()).toBe('<div>append-outer</div>');
+		expect(component.find('.v-input > .input > .prepend > div ').html()).toBe('<div>prepend</div>');
+		expect(component.find('.v-input > .input > .append > div ').html()).toBe('<div>append</div>');
 	});
 
 	it('Renders prefix / suffix', async () => {
diff --git a/src/components/v-list/v-list-item.vue b/src/components/v-list/v-list-item.vue
index 43ec1b39f4..612844f235 100644
--- a/src/components/v-list/v-list-item.vue
+++ b/src/components/v-list/v-list-item.vue
@@ -73,9 +73,7 @@ export default defineComponent({
 			return 'li';
 		});
 
-		const isClickable = computed(() =>
-			Boolean(props.to || props.href || listeners.click !== undefined)
-		);
+		const isClickable = computed(() => Boolean(props.to || props.href || listeners.click !== undefined));
 
 		return { component, isClickable };
 	},
@@ -102,14 +100,8 @@ body {
 	--v-list-item-color: var(--v-list-color, var(--foreground-normal));
 	--v-list-item-color-hover: var(--v-list-color-hover, var(--foreground-normal));
 	--v-list-item-color-active: var(--v-list-color-active, var(--foreground-normal));
-	--v-list-item-background-color-hover: var(
-		--v-list-background-color-hover,
-		var(--background-normal-alt)
-	);
-	--v-list-item-background-color-active: var(
-		--v-list-background-color-active,
-		var(--background-normal-alt)
-	);
+	--v-list-item-background-color-hover: var(--v-list-background-color-hover, var(--background-normal-alt));
+	--v-list-item-background-color-active: var(--v-list-background-color-active, var(--background-normal-alt));
 }
 </style>
 
diff --git a/src/components/v-list/v-list.story.ts b/src/components/v-list/v-list.story.ts
index 2975487663..a3bad36cfe 100644
--- a/src/components/v-list/v-list.story.ts
+++ b/src/components/v-list/v-list.story.ts
@@ -215,36 +215,16 @@ export const withSubtitle = () =>
 				default: boolean('Dense', false, 'List Item 3'),
 			},
 			lines0: {
-				default: select(
-					'Lines',
-					{ One: 1, Two: 2, Three: 3, Off: null },
-					null,
-					'List Item 0'
-				),
+				default: select('Lines', { One: 1, Two: 2, Three: 3, Off: null }, null, 'List Item 0'),
 			},
 			lines1: {
-				default: select(
-					'Lines',
-					{ One: 1, Two: 2, Three: 3, Off: null },
-					null,
-					'List Item 1'
-				),
+				default: select('Lines', { One: 1, Two: 2, Three: 3, Off: null }, null, 'List Item 1'),
 			},
 			lines2: {
-				default: select(
-					'Lines',
-					{ One: 1, Two: 2, Three: 3, Off: null },
-					null,
-					'List Item 2'
-				),
+				default: select('Lines', { One: 1, Two: 2, Three: 3, Off: null }, null, 'List Item 2'),
 			},
 			lines3: {
-				default: select(
-					'Lines',
-					{ One: 1, Two: 2, Three: 3, Off: null },
-					null,
-					'List Item 3'
-				),
+				default: select('Lines', { One: 1, Two: 2, Three: 3, Off: null }, null, 'List Item 3'),
 			},
 			nav: {
 				default: boolean('Nav', false, 'Full List'),
@@ -253,12 +233,7 @@ export const withSubtitle = () =>
 				default: text('Subtitle 3', '', 'Full List'),
 			},
 			lines: {
-				default: select(
-					'Lines',
-					{ One: 1, Two: 2, Three: 3, Off: null },
-					null,
-					'Full List'
-				),
+				default: select('Lines', { One: 1, Two: 2, Three: 3, Off: null }, null, 'Full List'),
 			},
 		},
 		setup() {
@@ -272,8 +247,7 @@ export const withSubtitle = () =>
 					},
 					2: {
 						title: 'List Item 2',
-						subtitle:
-							"This is yet another example of a list subtitle. It's of medium length.",
+						subtitle: "This is yet another example of a list subtitle. It's of medium length.",
 					},
 				},
 			};
@@ -311,12 +285,7 @@ export const withIconsToo = () =>
 				default: boolean('Subtitle', false, 'Full List'),
 			},
 			lines: {
-				default: select(
-					'Lines',
-					{ One: 1, Two: 2, Three: 3, Off: null },
-					null,
-					'Full List'
-				),
+				default: select('Lines', { One: 1, Two: 2, Three: 3, Off: null }, null, 'Full List'),
 			},
 			leftIconCenter: {
 				default: boolean('Left Icon Centered', false, 'Full List'),
@@ -349,8 +318,7 @@ export const withIconsToo = () =>
 					},
 					2: {
 						title: 'List Item 2',
-						subtitle:
-							"This is yet another example of a list subtitle. It's of medium length.",
+						subtitle: "This is yet another example of a list subtitle. It's of medium length.",
 						checked: false,
 					},
 					3: {
diff --git a/src/components/v-modal/v-modal.vue b/src/components/v-modal/v-modal.vue
index a3a80e0cef..e477688fc7 100644
--- a/src/components/v-modal/v-modal.vue
+++ b/src/components/v-modal/v-modal.vue
@@ -15,12 +15,7 @@
 				<slot name="header:append" />
 			</header>
 			<div class="content" :class="{ 'no-padding': noPadding }">
-				<v-overlay
-					v-if="$slots.sidebar"
-					absolute
-					:active="sidebarActive"
-					@click="sidebarActive = false"
-				/>
+				<v-overlay v-if="$slots.sidebar" absolute :active="sidebarActive" @click="sidebarActive = false" />
 				<nav
 					v-if="$slots.sidebar"
 					class="sidebar"
diff --git a/src/components/v-progress/circular/v-progress-circular.story.ts b/src/components/v-progress/circular/v-progress-circular.story.ts
index e4043ec99e..3cdc3e9036 100644
--- a/src/components/v-progress/circular/v-progress-circular.story.ts
+++ b/src/components/v-progress/circular/v-progress-circular.story.ts
@@ -1,11 +1,4 @@
-import {
-	withKnobs,
-	color,
-	optionsKnob as options,
-	number,
-	text,
-	boolean,
-} from '@storybook/addon-knobs';
+import { withKnobs, color, optionsKnob as options, number, text, boolean } from '@storybook/addon-knobs';
 
 import Vue from 'vue';
 import VProgressCircular from './v-progress-circular.vue';
diff --git a/src/components/v-select/v-select.vue b/src/components/v-select/v-select.vue
index 2d718aaa0a..bdd1c2962d 100644
--- a/src/components/v-select/v-select.vue
+++ b/src/components/v-select/v-select.vue
@@ -7,12 +7,7 @@
 		:close-on-content-click="closeOnContentClick"
 	>
 		<template #activator="{ toggle, active }">
-			<div
-				v-if="inline"
-				class="inline-display"
-				:class="{ placeholder: !displayValue }"
-				@click="toggle"
-			>
+			<div v-if="inline" class="inline-display" :class="{ placeholder: !displayValue }" @click="toggle">
 				{{ displayValue || placeholder }}
 				<v-icon name="expand_more" :class="{ active }" />
 			</div>
@@ -65,11 +60,7 @@
 				</v-list-item-content>
 			</v-list-item>
 
-			<v-list-item
-				v-if="allowOther && multiple === false"
-				:active="usesOtherValue"
-				@click.stop
-			>
+			<v-list-item v-if="allowOther && multiple === false" :active="usesOtherValue" @click.stop>
 				<v-list-item-content>
 					<input
 						class="other-input"
@@ -101,9 +92,7 @@
 							:placeholder="$t('other')"
 							v-focus
 							@input="setOtherValue(otherValue.key, $event.target.value)"
-							@blur="
-								otherValue.value.length === 0 && setOtherValue(otherValue.key, null)
-							"
+							@blur="otherValue.value.length === 0 && setOtherValue(otherValue.key, null)"
 						/>
 					</v-list-item-content>
 					<v-list-item-icon>
@@ -188,11 +177,7 @@ export default defineComponent({
 		const { _items } = useItems();
 		const { displayValue } = useDisplayValue();
 		const { value } = toRefs(props);
-		const { otherValue, usesOtherValue } = useCustomSelection(
-			value as Ref<string>,
-			_items,
-			emit
-		);
+		const { otherValue, usesOtherValue } = useCustomSelection(value as Ref<string>, _items, emit);
 		const { otherValues, addOtherValue, setOtherValue } = useCustomSelectionMultiple(
 			value as Ref<string[]>,
 			_items,
diff --git a/src/components/v-skeleton-loader/v-skeleton-loader.vue b/src/components/v-skeleton-loader/v-skeleton-loader.vue
index 0fd6ca9924..0cb61d001c 100644
--- a/src/components/v-skeleton-loader/v-skeleton-loader.vue
+++ b/src/components/v-skeleton-loader/v-skeleton-loader.vue
@@ -46,12 +46,7 @@ body {
 		left: 0;
 		z-index: 1;
 		height: 100%;
-		background: linear-gradient(
-			90deg,
-			transparent,
-			var(--v-skeleton-loader-color),
-			transparent
-		);
+		background: linear-gradient(90deg, transparent, var(--v-skeleton-loader-color), transparent);
 		transform: translateX(-100%);
 		opacity: 0.5;
 		animation: loading 1.5s infinite;
diff --git a/src/components/v-slider/v-slider.vue b/src/components/v-slider/v-slider.vue
index 97f1958589..4a19d694c8 100644
--- a/src/components/v-slider/v-slider.vue
+++ b/src/components/v-slider/v-slider.vue
@@ -4,15 +4,7 @@
 			<slot name="prepend" :value="value" />
 		</div>
 		<div class="slider">
-			<input
-				type="range"
-				:value="value"
-				:max="max"
-				:min="min"
-				:step="step"
-				@change="onChange"
-				@input="onInput"
-			/>
+			<input type="range" :value="value" :max="max" :min="min" :step="step" @change="onChange" @input="onInput" />
 			<div class="fill" />
 			<div v-if="showTicks" class="ticks">
 				<span class="tick" v-for="i in (max - min) / step + 1" :key="i" />
diff --git a/src/components/v-table/table-header/table-header.test.ts b/src/components/v-table/table-header/table-header.test.ts
index 69fe7138e1..874faeb4e8 100644
--- a/src/components/v-table/table-header/table-header.test.ts
+++ b/src/components/v-table/table-header/table-header.test.ts
@@ -205,14 +205,11 @@ describe('Table / Header', () => {
 				},
 			},
 			scopedSlots: {
-				'header.col2':
-					'<template slot-scope="{header}"><p>{{ header.text }}</p></template>',
+				'header.col2': '<template slot-scope="{header}"><p>{{ header.text }}</p></template>',
 			},
 		});
 
-		expect(component.find('.table-header th:nth-child(2) .content > span > *').html()).toEqual(
-			'<p>Column 2</p>'
-		);
+		expect(component.find('.table-header th:nth-child(2) .content > span > *').html()).toEqual('<p>Column 2</p>');
 	});
 
 	it('Sets the dragging state correctly based on mouse interaction', async () => {
diff --git a/src/components/v-table/table-row/table-row.test.ts b/src/components/v-table/table-row/table-row.test.ts
index cb7656f170..7aa1f70967 100644
--- a/src/components/v-table/table-row/table-row.test.ts
+++ b/src/components/v-table/table-row/table-row.test.ts
@@ -65,9 +65,7 @@ describe('Table / Row', () => {
 			},
 		});
 
-		expect(component.find('.table-row td:nth-child(2) > *').html()).toEqual(
-			'<p>Test 1 Col 2</p>'
-		);
+		expect(component.find('.table-row td:nth-child(2) > *').html()).toEqual('<p>Test 1 Col 2</p>');
 	});
 
 	it('Adds the align class', async () => {
diff --git a/src/components/v-table/table-row/table-row.vue b/src/components/v-table/table-row/table-row.vue
index e9f024f7dd..f9be6670c8 100644
--- a/src/components/v-table/table-row/table-row.vue
+++ b/src/components/v-table/table-row/table-row.vue
@@ -9,21 +9,12 @@
 		}"
 	>
 		<td v-if="showManualSort" class="manual cell">
-			<v-icon
-				name="drag_handle"
-				class="drag-handle"
-				:class="{ 'sorted-manually': sortedManually }"
-			/>
+			<v-icon name="drag_handle" class="drag-handle" :class="{ 'sorted-manually': sortedManually }" />
 		</td>
 		<td v-if="showSelect" class="select cell" @click.stop>
 			<v-checkbox :inputValue="isSelected" @change="toggleSelect" />
 		</td>
-		<td
-			class="cell"
-			:class="getClassesForCell(header)"
-			v-for="header in headers"
-			:key="header.value"
-		>
+		<td class="cell" :class="getClassesForCell(header)" v-for="header in headers" :key="header.value">
 			<slot :name="`item.${header.value}`" :item="item">{{ item[header.value] }}</slot>
 		</td>
 
diff --git a/src/components/v-table/v-table.story.ts b/src/components/v-table/v-table.story.ts
index 9ce8197ffb..eb701c5eb7 100644
--- a/src/components/v-table/v-table.story.ts
+++ b/src/components/v-table/v-table.story.ts
@@ -820,9 +820,7 @@ export const serverSort = () => ({
 			(this as any).loading = true;
 
 			setTimeout(() => {
-				(this as any).items = [...(this as any).items].sort((a, b) =>
-					a[sort.by!] > b[sort.by!] ? 1 : -1
-				);
+				(this as any).items = [...(this as any).items].sort((a, b) => (a[sort.by!] > b[sort.by!] ? 1 : -1));
 
 				if (sort.desc === true) {
 					(this as any).items.reverse();
diff --git a/src/components/v-tabs/v-tab/v-tab.vue b/src/components/v-tabs/v-tab/v-tab.vue
index 8a04d6f2c5..3b8141d144 100644
--- a/src/components/v-tabs/v-tab/v-tab.vue
+++ b/src/components/v-tabs/v-tab/v-tab.vue
@@ -1,11 +1,5 @@
 <template>
-	<v-list-item
-		v-if="vertical"
-		class="v-tab vertical"
-		:active="active"
-		:disabled="disabled"
-		@click="onClick"
-	>
+	<v-list-item v-if="vertical" class="v-tab vertical" :active="active" :disabled="disabled" @click="onClick">
 		<slot v-bind="{ active, toggle }" />
 	</v-list-item>
 	<div v-else class="v-tab horizontal" :class="{ active, disabled }" @click="onClick">
diff --git a/src/components/v-textarea/v-textarea.test.ts b/src/components/v-textarea/v-textarea.test.ts
index e16cc7711d..7d08302c0b 100644
--- a/src/components/v-textarea/v-textarea.test.ts
+++ b/src/components/v-textarea/v-textarea.test.ts
@@ -21,11 +21,7 @@ describe('Textarea', () => {
 
 		await component.vm.$nextTick();
 
-		expect(component.find('.v-textarea').classes()).toEqual([
-			'v-textarea',
-			'disabled',
-			'full-width',
-		]);
+		expect(component.find('.v-textarea').classes()).toEqual(['v-textarea', 'disabled', 'full-width']);
 	});
 
 	it('Emits just the value for the input event', async () => {
diff --git a/src/composables/groupable/groupable.ts b/src/composables/groupable/groupable.ts
index 627c8f9f42..034993562c 100644
--- a/src/composables/groupable/groupable.ts
+++ b/src/composables/groupable/groupable.ts
@@ -115,11 +115,7 @@ export function useGroupableParent(
 		items.value = [...items.value, item];
 
 		// If you're required to select a value, make sure a value is selected on first render
-		if (
-			selection.value.length === 0 &&
-			options?.mandatory?.value === true &&
-			items.value.length === 1
-		) {
+		if (selection.value.length === 0 && options?.mandatory?.value === true && items.value.length === 1) {
 			selection.value = [getValueForItem(item)];
 		}
 	}
@@ -167,11 +163,7 @@ export function useGroupableParent(
 		}
 
 		// Don't add it if when we're already at the maximum number of selections
-		if (
-			options?.max?.value &&
-			options.max.value !== -1 &&
-			selection.value.length >= options.max.value
-		) {
+		if (options?.max?.value && options.max.value !== -1 && selection.value.length >= options.max.value) {
 			// Even though we don't alter selection, we should flush the internal active state of
 			// the children to make sure we don't have any invalid internal active states
 			updateChildren();
diff --git a/src/composables/use-collection-preset/use-collection-preset.ts b/src/composables/use-collection-preset/use-collection-preset.ts
index c727208bf5..058f2cbf55 100644
--- a/src/composables/use-collection-preset/use-collection-preset.ts
+++ b/src/composables/use-collection-preset/use-collection-preset.ts
@@ -5,28 +5,21 @@ import useUserStore from '@/stores/user';
 
 import { Filter, CollectionPreset } from '@/stores/collection-presets/types';
 
-export function useCollectionPreset(
-	collection: Ref<string>,
-	bookmark: Ref<number | null> = ref(null)
-) {
+export function useCollectionPreset(collection: Ref<string>, bookmark: Ref<number | null> = ref(null)) {
 	const collectionPresetsStore = useCollectionPresetStore();
 	const userStore = useUserStore();
 
 	const bookmarkExists = computed(() => {
 		if (!bookmark.value) return false;
 
-		return !!collectionPresetsStore.state.collectionPresets.find(
-			(preset) => preset.id === bookmark.value
-		);
+		return !!collectionPresetsStore.state.collectionPresets.find((preset) => preset.id === bookmark.value);
 	});
 
 	const localPreset = ref<CollectionPreset>({});
 	initLocalPreset();
 
 	const savePreset = async (preset?: Partial<CollectionPreset>) => {
-		const updatedValues = await collectionPresetsStore.savePreset(
-			preset ? preset : localPreset.value
-		);
+		const updatedValues = await collectionPresetsStore.savePreset(preset ? preset : localPreset.value);
 
 		localPreset.value.id = updatedValues.id;
 
diff --git a/src/composables/use-collection/use-collection.ts b/src/composables/use-collection/use-collection.ts
index 5651f7de7d..65bef8f15c 100644
--- a/src/composables/use-collection/use-collection.ts
+++ b/src/composables/use-collection/use-collection.ts
@@ -8,9 +8,7 @@ export function useCollection(collection: Ref<string>) {
 	const fieldsStore = useFieldsStore();
 
 	const info = computed(() => {
-		return collectionsStore.state.collections.find(
-			({ collection: key }) => key === collection.value
-		);
+		return collectionsStore.state.collections.find(({ collection: key }) => key === collection.value);
 	});
 
 	const fields = computed<Field[]>(() => {
@@ -20,9 +18,7 @@ export function useCollection(collection: Ref<string>) {
 	const primaryKeyField = computed(() => {
 		// Every collection has a primary key; rules of the land
 		// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-		return fields.value?.find(
-			(field) => field.collection === collection.value && field.primary_key === true
-		)!;
+		return fields.value?.find((field) => field.collection === collection.value && field.primary_key === true)!;
 	});
 
 	const ownerField = computed(() => {
@@ -54,9 +50,7 @@ export function useCollection(collection: Ref<string>) {
 
 		const statuses = Object.values(statusField.value?.options?.status_mapping || {});
 		return (
-			(statuses.find((status) => (status as Status).soft_delete === true) as
-				| Status
-				| undefined)?.value || null
+			(statuses.find((status) => (status as Status).soft_delete === true) as Status | undefined)?.value || null
 		);
 	});
 
diff --git a/src/composables/use-custom-selection/use-custom-selection.ts b/src/composables/use-custom-selection/use-custom-selection.ts
index a70e3657ac..706691ef10 100644
--- a/src/composables/use-custom-selection/use-custom-selection.ts
+++ b/src/composables/use-custom-selection/use-custom-selection.ts
@@ -46,11 +46,7 @@ export function useCustomSelection(currentValue: Ref<string>, items: Items, emit
 	return { otherValue, usesOtherValue };
 }
 
-export function useCustomSelectionMultiple(
-	currentValues: Ref<string[]>,
-	items: Items,
-	emit: EmitFunction
-) {
+export function useCustomSelectionMultiple(currentValues: Ref<string[]>, items: Items, emit: EmitFunction) {
 	type OtherValue = {
 		key: string;
 		value: string;
diff --git a/src/composables/use-item/use-item.ts b/src/composables/use-item/use-item.ts
index 7b40ecddbf..9f9b63d438 100644
--- a/src/composables/use-item/use-item.ts
+++ b/src/composables/use-item/use-item.ts
@@ -17,9 +17,7 @@ export function useItem(collection: Ref<string>, primaryKey: Ref<string | number
 	const softDeleting = ref(false);
 	const edits = ref({});
 	const isNew = computed(() => primaryKey.value === '+');
-	const isBatch = computed(
-		() => typeof primaryKey.value === 'string' && primaryKey.value.includes(',')
-	);
+	const isBatch = computed(() => typeof primaryKey.value === 'string' && primaryKey.value.includes(','));
 
 	const endpoint = computed(() => {
 		const currentProjectKey = useProjectsStore().state.currentProjectKey;
@@ -149,9 +147,7 @@ export function useItem(collection: Ref<string>, primaryKey: Ref<string | number
 				title: i18n.t('item_create_success'),
 				text: i18n.tc('item_in', isBatch.value ? 2 : 1, {
 					collection: collection.value,
-					primaryKey: isBatch.value
-						? (primaryKey.value as string).split(',').join(', ')
-						: primaryKey.value,
+					primaryKey: isBatch.value ? (primaryKey.value as string).split(',').join(', ') : primaryKey.value,
 				}),
 				type: 'success',
 			});
@@ -162,9 +158,7 @@ export function useItem(collection: Ref<string>, primaryKey: Ref<string | number
 				title: i18n.t('item_create_failed'),
 				text: i18n.tc('item_in', isBatch.value ? 2 : 1, {
 					collection: collection.value,
-					primaryKey: isBatch.value
-						? (primaryKey.value as string).split(',').join(', ')
-						: primaryKey.value,
+					primaryKey: isBatch.value ? (primaryKey.value as string).split(',').join(', ') : primaryKey.value,
 				}),
 				type: 'error',
 			});
@@ -201,9 +195,7 @@ export function useItem(collection: Ref<string>, primaryKey: Ref<string | number
 				title: i18n.tc('item_delete_success', isBatch.value ? 2 : 1),
 				text: i18n.tc('item_in', isBatch.value ? 2 : 1, {
 					collection: collection.value,
-					primaryKey: isBatch.value
-						? (primaryKey.value as string).split(',').join(', ')
-						: primaryKey.value,
+					primaryKey: isBatch.value ? (primaryKey.value as string).split(',').join(', ') : primaryKey.value,
 				}),
 				type: 'success',
 			});
@@ -212,9 +204,7 @@ export function useItem(collection: Ref<string>, primaryKey: Ref<string | number
 				title: i18n.tc('item_delete_failed', isBatch.value ? 2 : 1),
 				text: i18n.tc('item_in', isBatch.value ? 2 : 1, {
 					collection: collection.value,
-					primaryKey: isBatch.value
-						? (primaryKey.value as string).split(',').join(', ')
-						: primaryKey.value,
+					primaryKey: isBatch.value ? (primaryKey.value as string).split(',').join(', ') : primaryKey.value,
 				}),
 				type: 'error',
 			});
diff --git a/src/composables/use-items/use-items.ts b/src/composables/use-items/use-items.ts
index 847efac310..23c4fb98e7 100644
--- a/src/composables/use-items/use-items.ts
+++ b/src/composables/use-items/use-items.ts
@@ -240,8 +240,7 @@ export function useItems(collection: Ref<string>, query: Query) {
 		if (!pk) return;
 
 		const move = newIndex > oldIndex ? 'down' : 'up';
-		const selectionRange =
-			move === 'down' ? [oldIndex + 1, newIndex + 1] : [newIndex, oldIndex];
+		const selectionRange = move === 'down' ? [oldIndex + 1, newIndex + 1] : [newIndex, oldIndex];
 
 		const updates = items.value.slice(...selectionRange).map((toBeUpdatedItem: any) => {
 			const sortValue = getPositionForItem(toBeUpdatedItem);
diff --git a/src/composables/use-time-from-now/use-time-from-now.ts b/src/composables/use-time-from-now/use-time-from-now.ts
index 10c667c2cf..f8d5f5c4cb 100644
--- a/src/composables/use-time-from-now/use-time-from-now.ts
+++ b/src/composables/use-time-from-now/use-time-from-now.ts
@@ -13,11 +13,7 @@ export async function useTimeFromNow(date: Date | number, autoUpdate = 60000) {
 	if (autoUpdate !== 0) {
 		onMounted(() => {
 			interval = window.setInterval(async () => {
-				formattedDate.value = await localizedFormatDistance(
-					date,
-					new Date(),
-					formatOptions
-				);
+				formattedDate.value = await localizedFormatDistance(date, new Date(), formatOptions);
 			}, autoUpdate);
 		});
 
diff --git a/src/directives/click-outside/click-outside.ts b/src/directives/click-outside/click-outside.ts
index 21ef047c35..3ba3730b15 100644
--- a/src/directives/click-outside/click-outside.ts
+++ b/src/directives/click-outside/click-outside.ts
@@ -116,9 +116,7 @@ export function onEvent({
 }) {
 	event.stopPropagation();
 	const path = event.composedPath();
-	const isClickOutside = path
-		? path.indexOf(el) < 0
-		: el.contains(event.target as Element) === false;
+	const isClickOutside = path ? path.indexOf(el) < 0 : el.contains(event.target as Element) === false;
 
 	if (isClickOutside === false) return;
 
diff --git a/src/directives/tooltip/tooltip.test.ts b/src/directives/tooltip/tooltip.test.ts
index d672e923ba..202b250af8 100644
--- a/src/directives/tooltip/tooltip.test.ts
+++ b/src/directives/tooltip/tooltip.test.ts
@@ -1,14 +1,7 @@
 import { createLocalVue } from '@vue/test-utils';
 import VueCompositionAPI from '@vue/composition-api';
 import VButton from '../../components/v-button';
-import Tooltip, {
-	getTooltip,
-	animateIn,
-	animateOut,
-	onLeaveTooltip,
-	updateTooltip,
-	onEnterTooltip,
-} from './tooltip';
+import Tooltip, { getTooltip, animateIn, animateOut, onLeaveTooltip, updateTooltip, onEnterTooltip } from './tooltip';
 
 const localVue = createLocalVue();
 localVue.use(VueCompositionAPI);
@@ -157,9 +150,7 @@ describe('Tooltip', () => {
 					inverted: false,
 				});
 				expect(tooltip.className).toBe('right');
-				expect(tooltip.getAttribute('style')).toBe(
-					'transform: translate(10px, calc(0px - 50%));'
-				);
+				expect(tooltip.getAttribute('style')).toBe('transform: translate(10px, calc(0px - 50%));');
 			});
 
 			test('right start', () => {
@@ -172,9 +163,7 @@ describe('Tooltip', () => {
 					inverted: false,
 				});
 				expect(tooltip.className).toBe('start right');
-				expect(tooltip.getAttribute('style')).toBe(
-					'transform: translate(10px, calc(20px - 100%));'
-				);
+				expect(tooltip.getAttribute('style')).toBe('transform: translate(10px, calc(20px - 100%));');
 			});
 
 			test('right end', () => {
@@ -187,9 +176,7 @@ describe('Tooltip', () => {
 					inverted: false,
 				});
 				expect(tooltip.className).toBe('end right');
-				expect(tooltip.getAttribute('style')).toBe(
-					'transform: translate(10px, calc(-20px - 0%));'
-				);
+				expect(tooltip.getAttribute('style')).toBe('transform: translate(10px, calc(-20px - 0%));');
 			});
 
 			test('bottom', () => {
@@ -202,9 +189,7 @@ describe('Tooltip', () => {
 					inverted: false,
 				});
 				expect(tooltip.className).toBe('bottom');
-				expect(tooltip.getAttribute('style')).toBe(
-					'transform: translate(calc(0px - 50%), 10px);'
-				);
+				expect(tooltip.getAttribute('style')).toBe('transform: translate(calc(0px - 50%), 10px);');
 			});
 
 			test('bottom start', () => {
@@ -217,9 +202,7 @@ describe('Tooltip', () => {
 					inverted: false,
 				});
 				expect(tooltip.className).toBe('start bottom');
-				expect(tooltip.getAttribute('style')).toBe(
-					'transform: translate(calc(20px - 100%), 10px);'
-				);
+				expect(tooltip.getAttribute('style')).toBe('transform: translate(calc(20px - 100%), 10px);');
 			});
 
 			test('bottom end', () => {
@@ -232,9 +215,7 @@ describe('Tooltip', () => {
 					inverted: false,
 				});
 				expect(tooltip.className).toBe('end bottom');
-				expect(tooltip.getAttribute('style')).toBe(
-					'transform: translate(calc(-20px - 0%), 10px);'
-				);
+				expect(tooltip.getAttribute('style')).toBe('transform: translate(calc(-20px - 0%), 10px);');
 			});
 
 			test('left', () => {
diff --git a/src/directives/tooltip/tooltip.ts b/src/directives/tooltip/tooltip.ts
index f847bf8e3f..0d7639aff0 100644
--- a/src/directives/tooltip/tooltip.ts
+++ b/src/directives/tooltip/tooltip.ts
@@ -37,11 +37,7 @@ export function onLeaveTooltip() {
 	};
 }
 
-export function updateTooltip(
-	element: HTMLElement,
-	binding: DirectiveBinding,
-	tooltip: HTMLElement
-) {
+export function updateTooltip(element: HTMLElement, binding: DirectiveBinding, tooltip: HTMLElement) {
 	const offset = 10;
 	const arrowAlign = 20;
 
diff --git a/src/displays/format-title/format-title.story.ts b/src/displays/format-title/format-title.story.ts
index 20dace4735..5ec418ca3b 100644
--- a/src/displays/format-title/format-title.story.ts
+++ b/src/displays/format-title/format-title.story.ts
@@ -18,9 +18,7 @@ export const basic = () =>
 			},
 		},
 		setup(props) {
-			const value = computed<string | null>(() =>
-				handler(props.val, null, { type: 'string' })
-			);
+			const value = computed<string | null>(() => handler(props.val, null, { type: 'string' }));
 			return { value };
 		},
 		template: `
diff --git a/src/displays/image/image.vue b/src/displays/image/image.vue
index aa577d69ab..e9efa5eaed 100644
--- a/src/displays/image/image.vue
+++ b/src/displays/image/image.vue
@@ -1,11 +1,5 @@
 <template>
-	<img
-		v-if="src"
-		:src="src"
-		role="presentation"
-		:alt="value && value.title"
-		:class="{ circle }"
-	/>
+	<img v-if="src" :src="src" role="presentation" :alt="value && value.title" :class="{ circle }" />
 	<span v-else>--</span>
 </template>
 
@@ -36,10 +30,7 @@ export default defineComponent({
 	setup(props) {
 		const src = computed(() => {
 			if (props.value === null) return null;
-			return (
-				props.value?.data?.thumbnails?.find((thumb) => thumb.key === 'directus-small-crop')
-					?.url || null
-			);
+			return props.value?.data?.thumbnails?.find((thumb) => thumb.key === 'directus-small-crop')?.url || null;
 		});
 
 		return { src };
diff --git a/src/displays/status-badge/status-badge.test.ts b/src/displays/status-badge/status-badge.test.ts
index f01154b007..3a8f82807b 100644
--- a/src/displays/status-badge/status-badge.test.ts
+++ b/src/displays/status-badge/status-badge.test.ts
@@ -56,9 +56,7 @@ describe('Displays / Status Badge', () => {
 		});
 
 		expect(component.exists()).toBe(true);
-		expect(component.attributes('style')).toBe(
-			'background-color: rgb(171, 202, 188); color: rgb(150, 100, 125);'
-		);
+		expect(component.attributes('style')).toBe('background-color: rgb(171, 202, 188); color: rgb(150, 100, 125);');
 	});
 
 	it('Sets status to null if interface options are missing', () => {
diff --git a/src/displays/template/index.ts b/src/displays/template/index.ts
index 7ac69d4e06..4d8b090466 100644
--- a/src/displays/template/index.ts
+++ b/src/displays/template/index.ts
@@ -30,10 +30,7 @@ export default defineDisplay(({ i18n }) => ({
 
 		if (!relatedCollection) return [];
 
-		const fields = adjustFieldsForDisplays(
-			getFieldsFromTemplate(options.template),
-			relatedCollection
-		);
+		const fields = adjustFieldsForDisplays(getFieldsFromTemplate(options.template), relatedCollection);
 
 		if (fields.includes(primaryKeyField.value.field) === false) {
 			fields.push(primaryKeyField.value.field);
diff --git a/src/displays/template/template.vue b/src/displays/template/template.vue
index 2aac21d868..f4f3aff9fd 100644
--- a/src/displays/template/template.vue
+++ b/src/displays/template/template.vue
@@ -8,17 +8,9 @@
 		</template>
 
 		<v-list dense>
-			<v-list-item
-				v-for="item in value"
-				:key="item[primaryKeyField]"
-				:to="getLinkForItem(item)"
-			>
+			<v-list-item v-for="item in value" :key="item[primaryKeyField]" :to="getLinkForItem(item)">
 				<v-list-item-content>
-					<render-template
-						:template="template"
-						:item="item"
-						:collection="relatedCollection"
-					/>
+					<render-template :template="template" :item="item" :collection="relatedCollection" />
 				</v-list-item-content>
 			</v-list-item>
 		</v-list>
diff --git a/src/displays/user/user.vue b/src/displays/user/user.vue
index a521a79022..9e20adbedf 100644
--- a/src/displays/user/user.vue
+++ b/src/displays/user/user.vue
@@ -15,9 +15,7 @@
 				:alt="value && `${value.first_name} ${value.last_name}`"
 				:class="{ circle }"
 			/>
-			<span v-if="display === 'name' || display === 'both'">
-				{{ value.first_name }} {{ value.last_name }}
-			</span>
+			<span v-if="display === 'name' || display === 'both'">{{ value.first_name }} {{ value.last_name }}</span>
 		</user-popover>
 	</span>
 </template>
@@ -58,9 +56,7 @@ export default defineComponent({
 		const src = computed(() => {
 			if (props.value === null) return null;
 			return (
-				props.value?.avatar?.data?.thumbnails?.find(
-					(thumb) => thumb.key === 'directus-small-crop'
-				)?.url || null
+				props.value?.avatar?.data?.thumbnails?.find((thumb) => thumb.key === 'directus-small-crop')?.url || null
 			);
 		});
 
diff --git a/src/hydrate.ts b/src/hydrate.ts
index f1f9609756..fcbe1243a4 100644
--- a/src/hydrate.ts
+++ b/src/hydrate.ts
@@ -57,9 +57,7 @@ export async function hydrate(stores = useStores()) {
 
 		setLanguage((userStore.state.currentUser?.locale as Language) || 'en-US');
 
-		await Promise.all(
-			stores.filter(({ id }) => id !== 'userStore').map((store) => store.hydrate?.())
-		);
+		await Promise.all(stores.filter(({ id }) => id !== 'userStore').map((store) => store.hydrate?.()));
 	} catch (error) {
 		appStore.state.error = error;
 	} finally {
diff --git a/src/interfaces/checkboxes/checkboxes.vue b/src/interfaces/checkboxes/checkboxes.vue
index cfd73bf29f..6473640035 100644
--- a/src/interfaces/checkboxes/checkboxes.vue
+++ b/src/interfaces/checkboxes/checkboxes.vue
@@ -121,11 +121,7 @@ export default defineComponent({
 			return 'grid-1';
 		});
 
-		const { otherValues, addOtherValue, setOtherValue } = useCustomSelectionMultiple(
-			value,
-			choices,
-			emit
-		);
+		const { otherValues, addOtherValue, setOtherValue } = useCustomSelectionMultiple(value, choices, emit);
 
 		return { gridClass, otherValues, addOtherValue, setOtherValue };
 	},
diff --git a/src/interfaces/code/code.vue b/src/interfaces/code/code.vue
index 3b5bf0f520..0f2468231f 100644
--- a/src/interfaces/code/code.vue
+++ b/src/interfaces/code/code.vue
@@ -2,11 +2,7 @@
 	<div class="interface-code codemirror-custom-styles">
 		<textarea ref="codemirrorEl" :value="stringValue" />
 
-		<v-button
-			v-if="template"
-			v-tooltip="$t('interfaces.code.fill_template')"
-			@click="fillTemplate"
-		>
+		<v-button v-if="template" v-tooltip="$t('interfaces.code.fill_template')" @click="fillTemplate">
 			<v-icon name="playlist_add" />
 		</v-button>
 
@@ -24,14 +20,7 @@
 <script lang="ts">
 import CodeMirror from 'codemirror';
 
-import {
-	defineComponent,
-	computed,
-	ref,
-	onMounted,
-	onUnmounted,
-	watch,
-} from '@vue/composition-api';
+import { defineComponent, computed, ref, onMounted, onUnmounted, watch } from '@vue/composition-api';
 
 import 'codemirror/mode/meta';
 import 'codemirror/addon/search/searchcursor.js';
diff --git a/src/interfaces/color/color.vue b/src/interfaces/color/color.vue
index a283ffc2a3..ae1dfdb5ec 100644
--- a/src/interfaces/color/color.vue
+++ b/src/interfaces/color/color.vue
@@ -11,21 +11,14 @@
 				maxlength="7"
 			>
 				<template #prepend>
-					<v-input
-						type="color"
-						class="html-color-select"
-						v-model="hexValue"
-						ref="htmlColorInput"
-					/>
+					<v-input type="color" class="html-color-select" v-model="hexValue" ref="htmlColorInput" />
 					<v-button
 						@click="activateColorPicker"
 						class="swatch"
 						:icon="true"
 						:style="{
 							'--v-button-background-color': isValidColor ? hexValue : 'transparent',
-							border: isValidColor
-								? 'none'
-								: 'var(--border-width) solid var(--border-normal)',
+							border: isValidColor ? 'none' : 'var(--border-width) solid var(--border-normal)',
 						}"
 					>
 						<v-icon v-if="!isValidColor" name="colorize" />
@@ -161,9 +154,7 @@ export default defineComponent({
 			(htmlColorInput.value?.$el as HTMLElement).getElementsByTagName('input')[0].click();
 		}
 
-		const isValidColor = computed<boolean>(
-			() => hexValue.value != null && color.isHex(hexValue.value as string)
-		);
+		const isValidColor = computed<boolean>(() => hexValue.value != null && color.isHex(hexValue.value as string));
 
 		const { rgb, hsl, hexValue } = useColor();
 
@@ -307,8 +298,7 @@ export default defineComponent({
 		}
 
 		/* stylelint-disable indentation */
-		&:not(:last-child)::v-deep
-			.input:not(.active):not(:focus-within):not(:hover):not(:active):not(:focus) {
+		&:not(:last-child)::v-deep .input:not(.active):not(:focus-within):not(:hover):not(:active):not(:focus) {
 			border-right-color: transparent;
 		}
 
diff --git a/src/interfaces/datetime/datetime.vue b/src/interfaces/datetime/datetime.vue
index 9c4fdc5f9a..62d646411d 100644
--- a/src/interfaces/datetime/datetime.vue
+++ b/src/interfaces/datetime/datetime.vue
@@ -23,22 +23,13 @@
 				<v-select :placeholder="$t('date')" :items="dates" v-model="localValue.date" />
 			</div>
 			<div class="year">
-				<v-select
-					:placeholder="$t('year')"
-					:items="years"
-					v-model="localValue.year"
-					allow-other
-				/>
+				<v-select :placeholder="$t('year')" :items="years" v-model="localValue.year" allow-other />
 			</div>
 		</div>
 
 		<v-divider v-if="type === 'datetime'" />
 
-		<div
-			class="time-selects"
-			v-if="type === 'datetime' || type === 'time'"
-			:class="{ seconds: includeSeconds }"
-		>
+		<div class="time-selects" v-if="type === 'datetime' || type === 'time'" :class="{ seconds: includeSeconds }">
 			<div class="hour">
 				<v-select :items="hours" v-model="localValue.hours" />
 			</div>
@@ -88,9 +79,7 @@ export default defineComponent({
 			default: null,
 		},
 		type: {
-			type: String as PropType<
-				'datetime' | 'time' | 'date' | 'datetime_created' | 'datetime_updated'
-			>,
+			type: String as PropType<'datetime' | 'time' | 'date' | 'datetime_created' | 'datetime_updated'>,
 			required: true,
 			validator: (val: string) =>
 				['datetime', 'date', 'time', 'datetime_created', 'datetime_updated'].includes(val),
@@ -168,14 +157,7 @@ export default defineComponent({
 				) {
 					const { year, month, date, hours, minutes, seconds, period } = newValue;
 
-					const asDate = new Date(
-						year,
-						month,
-						date,
-						period === 'am' ? hours : hours + 12,
-						minutes,
-						seconds
-					);
+					const asDate = new Date(year, month, date, period === 'am' ? hours : hours + 12, minutes, seconds);
 
 					emit('input', format(asDate, formatString.value));
 				}
diff --git a/src/interfaces/file/file.vue b/src/interfaces/file/file.vue
index 81a17d49a7..fb206872ef 100644
--- a/src/interfaces/file/file.vue
+++ b/src/interfaces/file/file.vue
@@ -20,11 +20,7 @@
 									'is-svg': file && file.type.includes('svg'),
 								}"
 							>
-								<img
-									v-if="imageThumbnail"
-									:src="imageThumbnail"
-									:alt="file.title"
-								/>
+								<img v-if="imageThumbnail" :src="imageThumbnail" :alt="file.title" />
 								<span class="extension" v-else-if="fileExtension">
 									{{ fileExtension }}
 								</span>
@@ -32,12 +28,7 @@
 							</div>
 						</template>
 						<template #append>
-							<v-icon
-								class="deselect"
-								name="close"
-								v-if="file"
-								@click.stop="$emit('input', null)"
-							/>
+							<v-icon class="deselect" name="close" v-if="file" @click.stop="$emit('input', null)" />
 							<v-icon v-else name="attach_file" />
 						</template>
 					</v-input>
@@ -95,11 +86,7 @@
 			@input="setSelection"
 		/>
 
-		<v-dialog
-			:active="activeDialog === 'url'"
-			@toggle="activeDialog = null"
-			:persistent="urlLoading"
-		>
+		<v-dialog :active="activeDialog === 'url'" @toggle="activeDialog = null" :persistent="urlLoading">
 			<v-card>
 				<v-card-title>{{ $t('import_from_url') }}</v-card-title>
 				<v-card-text>
@@ -109,11 +96,7 @@
 					<v-button :disabled="urlLoading" @click="activeDialog = null" secondary>
 						{{ $t('cancel') }}
 					</v-button>
-					<v-button
-						:loading="urlLoading"
-						@click="importFromURL"
-						:disabled="isValidURL === false"
-					>
+					<v-button :loading="urlLoading" @click="importFromURL" :disabled="isValidURL === false">
 						{{ $t('import') }}
 					</v-button>
 				</v-card-actions>
@@ -169,17 +152,10 @@ export default defineComponent({
 			if (file.value === null) return null;
 			if (file.value.type.includes('svg')) return file.value.data.asset_url;
 			if (file.value.type.includes('image') === false) return null;
-			return file.value.data.thumbnails?.find((thumb) => thumb.key === 'directus-small-crop')
-				?.url;
+			return file.value.data.thumbnails?.find((thumb) => thumb.key === 'directus-small-crop')?.url;
 		});
 
-		const {
-			url,
-			isValidURL,
-			loading: urlLoading,
-			error: urlError,
-			importFromURL,
-		} = useURLImport();
+		const { url, isValidURL, loading: urlLoading, error: urlError, importFromURL } = useURLImport();
 
 		return {
 			activeDialog,
diff --git a/src/interfaces/icon/icon.vue b/src/interfaces/icon/icon.vue
index 3d457f6223..76fa367649 100644
--- a/src/interfaces/icon/icon.vue
+++ b/src/interfaces/icon/icon.vue
@@ -8,21 +8,11 @@
 				@focus="activate"
 			>
 				<template #prepend>
-					<v-icon
-						v-if="value"
-						@click="activate"
-						:name="value"
-						:class="{ active: value }"
-					/>
+					<v-icon v-if="value" @click="activate" :name="value" :class="{ active: value }" />
 				</template>
 
 				<template #append>
-					<v-icon
-						@click="activate"
-						name="expand_more"
-						class="open-indicator"
-						:class="{ open: active }"
-					/>
+					<v-icon @click="activate" name="expand_more" class="open-indicator" :class="{ open: active }" />
 				</template>
 			</v-input>
 		</template>
@@ -74,9 +64,7 @@ export default defineComponent({
 			return icons.map((group) => {
 				if (searchQuery.value.length === 0) return group;
 
-				const icons = group.icons.filter((icon) =>
-					icon.includes(searchQuery.value.toLowerCase())
-				);
+				const icons = group.icons.filter((icon) => icon.includes(searchQuery.value.toLowerCase()));
 
 				return {
 					...group,
diff --git a/src/interfaces/image/image.vue b/src/interfaces/image/image.vue
index 3648ba2beb..059de4a657 100644
--- a/src/interfaces/image/image.vue
+++ b/src/interfaces/image/image.vue
@@ -6,11 +6,7 @@
 			{{ $t('disabled') }}
 		</v-notice>
 
-		<div
-			class="image-preview"
-			v-else-if="image"
-			:class="{ 'is-svg': image.type.includes('svg') }"
-		>
+		<div class="image-preview" v-else-if="image" :class="{ 'is-svg': image.type.includes('svg') }">
 			<img :src="src" alt="" role="presentation" />
 
 			<div class="shadow" />
@@ -108,9 +104,7 @@ export default defineComponent({
 				return image.value.data.full_url;
 			}
 
-			const url = image.value.data.thumbnails.find(
-				(thumb) => thumb.key === 'directus-large-crop'
-			)?.url;
+			const url = image.value.data.thumbnails.find((thumb) => thumb.key === 'directus-large-crop')?.url;
 
 			if (url) {
 				return `${url}&cache-buster=${cacheBuster.value}`;
@@ -162,16 +156,7 @@ export default defineComponent({
 			try {
 				const response = await api.get(`/${currentProjectKey}/files/${props.value}`, {
 					params: {
-						fields: [
-							'id',
-							'data',
-							'title',
-							'width',
-							'height',
-							'filesize',
-							'type',
-							'filename_download',
-						],
+						fields: ['id', 'data', 'title', 'width', 'height', 'filesize', 'type', 'filename_download'],
 					},
 				});
 
diff --git a/src/interfaces/many-to-one/many-to-one.vue b/src/interfaces/many-to-one/many-to-one.vue
index fb45427ce2..829fe13f90 100644
--- a/src/interfaces/many-to-one/many-to-one.vue
+++ b/src/interfaces/many-to-one/many-to-one.vue
@@ -71,11 +71,7 @@
 						@click="setCurrent(item)"
 					>
 						<v-list-item-content>
-							<render-template
-								:collection="collection"
-								:template="displayTemplate"
-								:item="item"
-							/>
+							<render-template :collection="collection" :template="displayTemplate" :item="item" />
 						</v-list-item-content>
 					</v-list-item>
 				</template>
@@ -162,12 +158,7 @@ export default defineComponent({
 		const { displayTemplate, onPreviewClick, requiredFields } = usePreview();
 		const { totalCount, loading: itemsLoading, fetchItems, items } = useItems();
 
-		const {
-			setCurrent,
-			currentItem,
-			loading: loadingCurrent,
-			currentPrimaryKey,
-		} = useCurrent();
+		const { setCurrent, currentItem, loading: loadingCurrent, currentPrimaryKey } = useCurrent();
 
 		const { edits, stageEdits } = useEdits();
 
@@ -232,10 +223,7 @@ export default defineComponent({
 					return props.value;
 				}
 
-				if (
-					typeof props.value === 'object' &&
-					props.value.hasOwnProperty(relatedPrimaryKeyField.value.field)
-				) {
+				if (typeof props.value === 'object' && props.value.hasOwnProperty(relatedPrimaryKeyField.value.field)) {
 					return props.value[relatedPrimaryKeyField.value.field];
 				}
 
@@ -261,9 +249,7 @@ export default defineComponent({
 
 				try {
 					const endpoint = relatedCollection.value.collection.startsWith('directus_')
-						? `/${currentProjectKey}/${relatedCollection.value.collection.substring(
-								9
-						  )}/${props.value}`
+						? `/${currentProjectKey}/${relatedCollection.value.collection.substring(9)}/${props.value}`
 						: `/${currentProjectKey}/items/${relatedCollection.value.collection}/${props.value}`;
 
 					const response = await api.get(endpoint, {
@@ -356,9 +342,7 @@ export default defineComponent({
 			});
 
 			const { collection } = toRefs(relatedCollection.value);
-			const { primaryKeyField: relatedPrimaryKeyField } = useCollection(
-				collection as Ref<string>
-			);
+			const { primaryKeyField: relatedPrimaryKeyField } = useCollection(collection as Ref<string>);
 
 			return { relation, relatedCollection, relatedPrimaryKeyField };
 		}
@@ -409,10 +393,7 @@ export default defineComponent({
 			const selection = computed<(number | string)[]>(() => {
 				if (!props.value) return [];
 
-				if (
-					typeof props.value === 'object' &&
-					props.value.hasOwnProperty(relatedPrimaryKeyField.value.field)
-				) {
+				if (typeof props.value === 'object' && props.value.hasOwnProperty(relatedPrimaryKeyField.value.field)) {
 					return [props.value[relatedPrimaryKeyField.value.field]];
 				}
 
diff --git a/src/interfaces/one-to-many/one-to-many.vue b/src/interfaces/one-to-many/one-to-many.vue
index ed1d079b8a..3df79901cb 100644
--- a/src/interfaces/one-to-many/one-to-many.vue
+++ b/src/interfaces/one-to-many/one-to-many.vue
@@ -27,12 +27,7 @@
 			</template>
 
 			<template #item-append="{ item }" v-if="!disabled">
-				<v-icon
-					name="close"
-					v-tooltip="$t('deselect')"
-					class="deselect"
-					@click.stop="deselect(item)"
-				/>
+				<v-icon name="close" v-tooltip="$t('deselect')" class="deselect" @click.stop="deselect(item)" />
 			</template>
 		</v-table>
 
@@ -151,9 +146,7 @@ export default defineComponent({
 
 			const { collection } = toRefs(relatedCollection.value);
 
-			const { primaryKeyField: relatedPrimaryKeyField } = useCollection(
-				collection as Ref<string>
-			);
+			const { primaryKeyField: relatedPrimaryKeyField } = useCollection(collection as Ref<string>);
 
 			return { relation, relatedCollection, relatedPrimaryKeyField };
 		}
@@ -248,9 +241,7 @@ export default defineComponent({
 
 				const updatedItems = items.value
 					.map((item: any) => {
-						const changeForThisItem = changes.find(
-							(change) => change[pkField] === item[pkField]
-						);
+						const changeForThisItem = changes.find((change) => change[pkField] === item[pkField]);
 
 						if (changeForThisItem) {
 							return {
@@ -274,9 +265,7 @@ export default defineComponent({
 				const selectedPrimaryKeys = changes
 					.filter((change) => typeof change === 'string' || typeof change === 'number')
 					.filter((primaryKey) => {
-						const isAlsoUpdate = updatedItems.some(
-							(update) => update[pkField] === primaryKey
-						);
+						const isAlsoUpdate = updatedItems.some((update) => update[pkField] === primaryKey);
 
 						return isAlsoUpdate === false;
 					});
@@ -291,9 +280,9 @@ export default defineComponent({
 					}
 
 					const response = await api.get(
-						`/${currentProjectKey}/items/${
-							relatedCollection.value.collection
-						}/${selectedPrimaryKeys.join(',')}`,
+						`/${currentProjectKey}/items/${relatedCollection.value.collection}/${selectedPrimaryKeys.join(
+							','
+						)}`,
 						{
 							params: {
 								fields: fields,
@@ -326,10 +315,7 @@ export default defineComponent({
 					tableHeaders.value = props.fields
 						.split(',')
 						.map((fieldKey) => {
-							const field = fieldsStore.getField(
-								relatedCollection.value.collection,
-								fieldKey
-							);
+							const field = fieldsStore.getField(relatedCollection.value.collection, fieldKey);
 
 							if (!field) return null;
 
@@ -388,10 +374,7 @@ export default defineComponent({
 
 				// Make sure the edits have the primary key included, otherwise the api will create
 				// the item as a new one instead of update the existing
-				if (
-					primaryKey &&
-					editsAtStart.value.hasOwnProperty(relatedPrimaryKeyField.value.field) === false
-				) {
+				if (primaryKey && editsAtStart.value.hasOwnProperty(relatedPrimaryKeyField.value.field) === false) {
 					editsAtStart.value = {
 						...editsAtStart.value,
 						[relatedPrimaryKeyField.value.field]: primaryKey,
@@ -408,11 +391,7 @@ export default defineComponent({
 
 				if (props.value && Array.isArray(props.value)) {
 					const newValue = props.value.map((existingChange) => {
-						if (
-							existingChange[pkField] &&
-							edits[pkField] &&
-							existingChange[pkField] === edits[pkField]
-						) {
+						if (existingChange[pkField] && edits[pkField] && existingChange[pkField] === edits[pkField]) {
 							return edits;
 						}
 
@@ -504,9 +483,7 @@ export default defineComponent({
 			// If the item is selected in the current edits, it will only have staged the primary
 			// key so the API is able to properly set it on first creation. In that case, we have
 			// to filter out the primary key
-			const itemWasNewlySelect = !!props.value.find(
-				(stagedItem) => stagedItem === itemPrimaryKey
-			);
+			const itemWasNewlySelect = !!props.value.find((stagedItem) => stagedItem === itemPrimaryKey);
 
 			if (itemWasNewlySelect) {
 				currentItems.value = currentItems.value.filter(
@@ -520,8 +497,7 @@ export default defineComponent({
 			}
 
 			const itemHasEdits =
-				props.value.find((stagedItem: any) => stagedItem[pkField] === itemPrimaryKey) !==
-				undefined;
+				props.value.find((stagedItem: any) => stagedItem[pkField] === itemPrimaryKey) !== undefined;
 
 			if (itemHasEdits) {
 				return emit(
diff --git a/src/interfaces/repeater/repeater-row-form.vue b/src/interfaces/repeater/repeater-row-form.vue
index db4019b4ba..35f8c9fd6b 100644
--- a/src/interfaces/repeater/repeater-row-form.vue
+++ b/src/interfaces/repeater/repeater-row-form.vue
@@ -1,13 +1,7 @@
 <template>
 	<div class="form">
 		<v-divider />
-		<v-form
-			:disabled="disabled"
-			:fields="fields"
-			:edits="value"
-			primary-key="+"
-			@input="$emit('input', $event)"
-		/>
+		<v-form :disabled="disabled" :fields="fields" :edits="value" primary-key="+" @input="$emit('input', $event)" />
 	</div>
 </template>
 
diff --git a/src/interfaces/repeater/repeater-row-header.vue b/src/interfaces/repeater/repeater-row-header.vue
index 25c8852cdf..8ffc1c56c1 100644
--- a/src/interfaces/repeater/repeater-row-header.vue
+++ b/src/interfaces/repeater/repeater-row-header.vue
@@ -3,12 +3,7 @@
 		<v-icon v-if="disabled === false" name="drag_handle" class="drag-handle" />
 		{{ displayValue ? displayValue : placeholder }}
 		<span class="spacer" />
-		<v-icon
-			v-if="disabled === false"
-			name="close"
-			class="delete"
-			@click.stop.prevent="$emit('delete')"
-		/>
+		<v-icon v-if="disabled === false" name="close" class="delete" @click.stop.prevent="$emit('delete')" />
 	</div>
 </template>
 
@@ -45,9 +40,7 @@ export default defineComponent({
 		},
 	},
 	setup(props) {
-		const displayValue = computed(() =>
-			props.value ? render(props.template, props.value) : null
-		);
+		const displayValue = computed(() => (props.value ? render(props.template, props.value) : null));
 
 		return { displayValue };
 	},
diff --git a/src/interfaces/tags/tags.story.ts b/src/interfaces/tags/tags.story.ts
index 995a9b5cd8..8450b8bb65 100644
--- a/src/interfaces/tags/tags.story.ts
+++ b/src/interfaces/tags/tags.story.ts
@@ -32,11 +32,7 @@ export const basic = () =>
 				default: boolean('Allow Custom Values', true, 'Options'),
 			},
 			placeholder: {
-				default: text(
-					'Placeholder',
-					'Click tags below, or add a new one here...',
-					'Options'
-				),
+				default: text('Placeholder', 'Click tags below, or add a new one here...', 'Options'),
 			},
 			lowercase: {
 				default: boolean('Lowercase', false, 'Options'),
@@ -98,11 +94,7 @@ export const withPresets = () =>
 				default: boolean('Allow Custom Values', true, 'Options'),
 			},
 			placeholder: {
-				default: text(
-					'Placeholder',
-					'Click tags below, or add a new one here...',
-					'Options'
-				),
+				default: text('Placeholder', 'Click tags below, or add a new one here...', 'Options'),
 			},
 			lowercase: {
 				default: boolean('Lowercase', false, 'Options'),
diff --git a/src/interfaces/translations/translations.vue b/src/interfaces/translations/translations.vue
index c25a95d08b..63417a15fe 100644
--- a/src/interfaces/translations/translations.vue
+++ b/src/interfaces/translations/translations.vue
@@ -12,11 +12,7 @@
 			#default="{ active, toggle }"
 		>
 			<div class="header" @click="toggle">
-				<render-template
-					:template="template"
-					:collection="languagesCollection"
-					:item="item"
-				/>
+				<render-template :template="template" :collection="languagesCollection" :item="item" />
 			</div>
 			<transition-expand>
 				<div v-if="active">
@@ -27,9 +23,7 @@
 							:collection="relatedCollection.collection"
 							:primary-key="existing[index][relatedPrimaryKeyField.field] || '+'"
 							:edits="edits[index]"
-							@input="
-								emitValue($event, existing[index][relatedPrimaryKeyField.field])
-							"
+							@input="emitValue($event, existing[index][relatedPrimaryKeyField.field])"
 						/>
 					</div>
 				</div>
@@ -124,9 +118,7 @@ export default defineComponent({
 
 			const { collection } = toRefs(relatedCollection.value);
 
-			const { primaryKeyField: relatedPrimaryKeyField } = useCollection(
-				collection as Ref<string>
-			);
+			const { primaryKeyField: relatedPrimaryKeyField } = useCollection(collection as Ref<string>);
 
 			return { relation, relatedCollection, relatedPrimaryKeyField };
 		}
@@ -155,15 +147,12 @@ export default defineComponent({
 				}
 
 				try {
-					const response = await api.get(
-						`/${currentProjectKey}/items/${props.languagesCollection}`,
-						{
-							params: {
-								fields: fields,
-								limit: -1,
-							},
-						}
-					);
+					const response = await api.get(`/${currentProjectKey}/items/${props.languagesCollection}`, {
+						params: {
+							fields: fields,
+							limit: -1,
+						},
+					});
 
 					languages.value = response.data.data;
 				} catch (err) {
@@ -220,9 +209,7 @@ export default defineComponent({
 				return languages.value.map((language: any) => {
 					const existing =
 						items.value.find(
-							(item) =>
-								item[props.languageField] ===
-								language[languagesPrimaryKeyField.value.field]
+							(item) => item[props.languageField] === language[languagesPrimaryKeyField.value.field]
 						) || {};
 
 					return existing;
@@ -235,9 +222,7 @@ export default defineComponent({
 				return languages.value.map((language: any) => {
 					const edits =
 						(props.value || []).find(
-							(edit) =>
-								edit[props.languageField] ===
-								language[languagesPrimaryKeyField.value.field]
+							(edit) => edit[props.languageField] === language[languagesPrimaryKeyField.value.field]
 						) || {};
 
 					edits[props.languageField] = language[languagesPrimaryKeyField.value.field];
@@ -258,11 +243,7 @@ export default defineComponent({
 					};
 				}
 
-				if (
-					currentEdits.some(
-						(edit) => edit[props.languageField] === newEdit[props.languageField]
-					)
-				) {
+				if (currentEdits.some((edit) => edit[props.languageField] === newEdit[props.languageField])) {
 					emit(
 						'input',
 						currentEdits.map((edit) => {
diff --git a/src/interfaces/user/user.vue b/src/interfaces/user/user.vue
index 7c1ff29ec2..592be0b6c3 100644
--- a/src/interfaces/user/user.vue
+++ b/src/interfaces/user/user.vue
@@ -65,11 +65,7 @@
 						@click="setCurrent(item)"
 					>
 						<v-list-item-content>
-							<render-template
-								collection="directus_users"
-								:template="displayTemplate"
-								:item="item"
-							/>
+							<render-template collection="directus_users" :template="displayTemplate" :item="item" />
 						</v-list-item-content>
 					</v-list-item>
 				</template>
@@ -132,12 +128,7 @@ export default defineComponent({
 		const { displayTemplate, onPreviewClick, requiredFields } = usePreview();
 		const { totalCount, loading: usersLoading, fetchUsers, users } = useUsers();
 
-		const {
-			setCurrent,
-			currentUser,
-			loading: loadingCurrent,
-			currentPrimaryKey,
-		} = useCurrent();
+		const { setCurrent, currentUser, loading: loadingCurrent, currentPrimaryKey } = useCurrent();
 
 		const { edits, stageEdits } = useEdits();
 
@@ -174,11 +165,7 @@ export default defineComponent({
 				(newValue) => {
 					// When the newly configured value is a primitive, assume it's the primary key
 					// of the item and fetch it from the API to render the preview
-					if (
-						newValue !== null &&
-						newValue !== currentUser.value?.id &&
-						typeof newValue === 'number'
-					) {
+					if (newValue !== null && newValue !== currentUser.value?.id && typeof newValue === 'number') {
 						fetchCurrent();
 					}
 
diff --git a/src/lang/index.ts b/src/lang/index.ts
index fb48482ebb..39886d328e 100644
--- a/src/lang/index.ts
+++ b/src/lang/index.ts
@@ -88,9 +88,7 @@ export async function setLanguage(lang: Language): Promise<boolean> {
 			const dateTimeFormats = await import(`@/lang/${lang}/date-format.json`);
 			i18n.setDateTimeFormat(lang, dateTimeFormats);
 		} catch {
-			console.log(
-				`[setCurrentLanguage] ❌ Couldn't fetch date time formats for language "${lang}"`
-			);
+			console.log(`[setCurrentLanguage] ❌ Couldn't fetch date time formats for language "${lang}"`);
 		}
 	}
 
diff --git a/src/layouts/cards/cards.vue b/src/layouts/cards/cards.vue
index 524d542ecd..2841098e3b 100644
--- a/src/layouts/cards/cards.vue
+++ b/src/layouts/cards/cards.vue
@@ -3,13 +3,7 @@
 		<portal to="layout-options">
 			<div class="layout-option">
 				<div class="option-label">{{ $t('layouts.cards.image_source') }}</div>
-				<v-select
-					v-model="imageSource"
-					allow-null
-					item-value="field"
-					item-text="name"
-					:items="fileFields"
-				/>
+				<v-select v-model="imageSource" allow-null item-value="field" item-text="name" :items="fileFields" />
 			</div>
 
 			<div class="layout-option">
@@ -61,12 +55,7 @@
 		</portal>
 
 		<template v-if="loading || itemCount > 0">
-			<cards-header
-				:fields="availableFields"
-				:size.sync="size"
-				:selection.sync="_selection"
-				:sort.sync="sort"
-			/>
+			<cards-header :fields="availableFields" :size.sync="size" :selection.sync="_selection" :sort.sync="sort" />
 
 			<div class="grid" :class="{ 'single-row': isSingleRow }">
 				<template v-if="loading">
@@ -91,11 +80,7 @@
 						<render-template :collection="collection" :item="item" :template="title" />
 					</template>
 					<template #subtitle v-if="subtitle">
-						<render-template
-							:collection="collection"
-							:item="item"
-							:template="subtitle"
-						/>
+						<render-template :collection="collection" :item="item" :template="subtitle" />
 					</template>
 				</card>
 			</div>
@@ -114,22 +99,12 @@
 
 				<div v-if="loading === false && items.length >= 25" class="per-page">
 					<span>{{ $t('per_page') }}</span>
-					<v-select
-						@input="limit = +$event"
-						:value="`${limit}`"
-						:items="['25', '50', '100', '250']"
-						inline
-					/>
+					<v-select @input="limit = +$event" :value="`${limit}`" :items="['25', '50', '100', '250']" inline />
 				</div>
 			</div>
 		</template>
 
-		<v-info
-			v-else-if="itemCount === 0 && activeFilterCount > 0"
-			:title="$t('no_results')"
-			icon="search"
-			center
-		>
+		<v-info v-else-if="itemCount === 0 && activeFilterCount > 0" :title="$t('no_results')" icon="search" center>
 			{{ $t('no_results_copy') }}
 
 			<template #append>
@@ -277,8 +252,7 @@ export default defineComponent({
 		const { width } = useElementSize(layoutElement);
 
 		const isSingleRow = computed(() => {
-			const cardsWidth =
-				items.value.length * (size.value * 40) + (items.value.length - 1) * 24;
+			const cardsWidth = items.value.length * (size.value * 40) + (items.value.length - 1) * 24;
 			return cardsWidth <= width.value;
 		});
 
@@ -342,10 +316,7 @@ export default defineComponent({
 			const icon = createViewOption('icon', 'box');
 			const title = createViewOption<string>('title', null);
 			const subtitle = createViewOption<string>('subtitle', null);
-			const imageSource = createViewOption<string>(
-				'imageSource',
-				fileFields.value[0]?.field ?? null
-			);
+			const imageSource = createViewOption<string>('imageSource', fileFields.value[0]?.field ?? null);
 			const imageFit = createViewOption<string>('imageFit', 'crop');
 
 			return { size, icon, imageSource, title, subtitle, imageFit };
@@ -353,9 +324,7 @@ export default defineComponent({
 			function createViewOption<T>(key: keyof ViewOptions, defaultValue: any) {
 				return computed<T>({
 					get() {
-						return _viewOptions.value?.[key] !== undefined
-							? _viewOptions.value?.[key]
-							: defaultValue;
+						return _viewOptions.value?.[key] !== undefined ? _viewOptions.value?.[key] : defaultValue;
 					},
 					set(newValue: T) {
 						_viewOptions.value = {
@@ -399,10 +368,7 @@ export default defineComponent({
 					titleSubtitleFields.push(...getFieldsFromTemplate(subtitle.value));
 				}
 
-				return [
-					...fields,
-					...adjustFieldsForDisplays(titleSubtitleFields, props.collection),
-				];
+				return [...fields, ...adjustFieldsForDisplays(titleSubtitleFields, props.collection)];
 			});
 
 			return { sort, limit, page, fields };
diff --git a/src/layouts/cards/components/card.vue b/src/layouts/cards/components/card.vue
index 8a32900a3e..cab8cc737c 100644
--- a/src/layouts/cards/components/card.vue
+++ b/src/layouts/cards/components/card.vue
@@ -16,13 +16,7 @@
 						alt=""
 						role="presentation"
 					/>
-					<img
-						class="svg"
-						v-else-if="svgSource"
-						:src="svgSource"
-						alt=""
-						role="presentation"
-					/>
+					<img class="svg" v-else-if="svgSource" :src="svgSource" alt="" role="presentation" />
 					<v-icon v-else large :name="icon" />
 				</template>
 			</template>
@@ -130,9 +124,7 @@ export default defineComponent({
 		const selectionIcon = computed(() => {
 			if (!props.item) return 'radio_button_unchecked';
 
-			return props.value.includes(props.item[props.itemKey])
-				? 'check_circle'
-				: 'radio_button_unchecked';
+			return props.value.includes(props.item[props.itemKey]) ? 'check_circle' : 'radio_button_unchecked';
 		});
 
 		return { imageSource, svgSource, type, selectionIcon, toggleSelection, handleClick };
diff --git a/src/layouts/cards/components/header.vue b/src/layouts/cards/components/header.vue
index ba97ed2c45..9f79fd59af 100644
--- a/src/layouts/cards/components/header.vue
+++ b/src/layouts/cards/components/header.vue
@@ -75,17 +75,13 @@ export default defineComponent({
 		const _selection = useSync(props, 'selection', emit);
 		const descending = computed(() => props.sort.startsWith('-'));
 
-		const sortKey = computed(() =>
-			props.sort.startsWith('-') ? props.sort.substring(1) : props.sort
-		);
+		const sortKey = computed(() => (props.sort.startsWith('-') ? props.sort.substring(1) : props.sort));
 
 		const sortField = computed(() => {
 			return props.fields.find((field) => field.field === sortKey.value);
 		});
 
-		const fieldsWithoutFake = computed(() =>
-			props.fields.filter((field) => field.field.startsWith('$') === false)
-		);
+		const fieldsWithoutFake = computed(() => props.fields.filter((field) => field.field.startsWith('$') === false));
 
 		return {
 			toggleSize,
diff --git a/src/layouts/tabular/tabular.vue b/src/layouts/tabular/tabular.vue
index c19c9157b2..dc70901464 100644
--- a/src/layouts/tabular/tabular.vue
+++ b/src/layouts/tabular/tabular.vue
@@ -40,9 +40,7 @@
 				</draggable>
 
 				<v-checkbox
-					v-for="field in availableFields.filter(
-						(field) => fields.includes(field.field) === false
-					)"
+					v-for="field in availableFields.filter((field) => fields.includes(field.field) === false)"
 					v-model="fields"
 					:key="field.field"
 					:value="field.field"
@@ -125,12 +123,7 @@
 			</template>
 		</v-table>
 
-		<v-info
-			v-else-if="itemCount === 0 && activeFilterCount > 0"
-			:title="$t('no_results')"
-			icon="search"
-			center
-		>
+		<v-info v-else-if="itemCount === 0 && activeFilterCount > 0" :title="$t('no_results')" icon="search" center>
 			{{ $t('no_results_copy') }}
 
 			<template #append>
@@ -150,15 +143,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import {
-	defineComponent,
-	PropType,
-	ref,
-	computed,
-	inject,
-	toRefs,
-	Ref,
-} from '@vue/composition-api';
+import { defineComponent, PropType, ref, computed, inject, toRefs, Ref } from '@vue/composition-api';
 import useProjectsStore from '@/stores/projects';
 import { HeaderRaw, Item } from '@/components/v-table/types';
 import { Field } from '@/stores/fields/types';
@@ -240,9 +225,7 @@ export default defineComponent({
 		const _searchQuery = useSync(props, 'searchQuery', emit);
 
 		const { collection, searchQuery } = toRefs(props);
-		const { info, primaryKeyField, fields: fieldsInCollection, sortField } = useCollection(
-			collection
-		);
+		const { info, primaryKeyField, fields: fieldsInCollection, sortField } = useCollection(collection);
 
 		const availableFields = computed(() =>
 			fieldsInCollection.value.filter(({ hidden_browse }) => hidden_browse === false)
@@ -250,15 +233,7 @@ export default defineComponent({
 
 		const { sort, limit, page, fields, fieldsWithRelational } = useItemOptions();
 
-		const {
-			items,
-			loading,
-			error,
-			totalPages,
-			itemCount,
-			changeManualSort,
-			getItems,
-		} = useItems(collection, {
+		const { items, loading, error, totalPages, itemCount, changeManualSort, getItems } = useItems(collection, {
 			sort,
 			limit,
 			page,
@@ -393,8 +368,7 @@ export default defineComponent({
 					}
 
 					const fields =
-						_viewQuery.value?.fields ||
-						availableFields.value.slice(0, 4).map(({ field }) => field);
+						_viewQuery.value?.fields || availableFields.value.slice(0, 4).map(({ field }) => field);
 
 					return fields;
 				},
@@ -406,9 +380,7 @@ export default defineComponent({
 				},
 			});
 
-			const fieldsWithRelational = computed(() =>
-				adjustFieldsForDisplays(fields.value, props.collection)
-			);
+			const fieldsWithRelational = computed(() => adjustFieldsForDisplays(fields.value, props.collection));
 
 			return { sort, limit, page, fields, fieldsWithRelational };
 		}
@@ -447,10 +419,7 @@ export default defineComponent({
 					return activeFields.value.map((field) => ({
 						text: field.name,
 						value: field.field,
-						width:
-							localWidths.value[field.field] ||
-							_viewOptions.value?.widths?.[field.field] ||
-							null,
+						width: localWidths.value[field.field] || _viewOptions.value?.widths?.[field.field] || null,
 						field: {
 							display: field.display,
 							displayOptions: field.display_options,
@@ -517,8 +486,7 @@ export default defineComponent({
 				if (props.selectMode || _selection.value?.length > 0) {
 					(table.value as any).onItemSelected({
 						item,
-						value:
-							_selection.value?.includes(item[primaryKeyField.value.field]) === false,
+						value: _selection.value?.includes(item[primaryKeyField.value.field]) === false,
 					});
 				} else {
 					// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
diff --git a/src/modules/activity/routes/browse/browse.vue b/src/modules/activity/routes/browse/browse.vue
index 59ca373466..30fa789df4 100644
--- a/src/modules/activity/routes/browse/browse.vue
+++ b/src/modules/activity/routes/browse/browse.vue
@@ -25,10 +25,7 @@
 			</drawer-detail>
 			<portal-target name="drawer" />
 			<drawer-detail icon="help_outline" :title="$t('help_and_docs')">
-				<div
-					class="format-markdown"
-					v-html="marked($t('page_help_collections_overview'))"
-				/>
+				<div class="format-markdown" v-html="marked($t('page_help_collections_overview'))" />
 			</drawer-detail>
 		</template>
 	</private-view>
diff --git a/src/modules/activity/routes/detail/detail.vue b/src/modules/activity/routes/detail/detail.vue
index 88e5cee036..3df88a2440 100644
--- a/src/modules/activity/routes/detail/detail.vue
+++ b/src/modules/activity/routes/detail/detail.vue
@@ -14,22 +14,14 @@
 			<activity-navigation />
 		</template>
 
-		<v-form
-			collection="directus_activity"
-			:loading="loading"
-			:initial-values="item"
-			:primary-key="primaryKey"
-		/>
+		<v-form collection="directus_activity" :loading="loading" :initial-values="item" :primary-key="primaryKey" />
 
 		<template #drawer>
 			<drawer-detail icon="info_outline" :title="$t('information')" close>
 				<div class="format-markdown" v-html="marked($t('page_help_activity_detail'))" />
 			</drawer-detail>
 			<drawer-detail icon="help_outline" :title="$t('help_and_docs')">
-				<div
-					class="format-markdown"
-					v-html="marked($t('page_help_collections_overview'))"
-				/>
+				<div class="format-markdown" v-html="marked($t('page_help_collections_overview'))" />
 			</drawer-detail>
 		</template>
 	</private-view>
diff --git a/src/modules/collections/components/navigation/navigation.vue b/src/modules/collections/components/navigation/navigation.vue
index da43423f88..57d5184e3c 100644
--- a/src/modules/collections/components/navigation/navigation.vue
+++ b/src/modules/collections/components/navigation/navigation.vue
@@ -3,12 +3,7 @@
 		<template v-if="customNavItems && customNavItems.length > 0">
 			<div :key="group.name" v-for="(group, index) in customNavItems">
 				<div class="group-name">{{ group.name }}</div>
-				<v-list-item
-					:exact="exact"
-					v-for="navItem in group.items"
-					:key="navItem.to"
-					:to="navItem.to"
-				>
+				<v-list-item :exact="exact" v-for="navItem in group.items" :key="navItem.to" :to="navItem.to">
 					<v-list-item-icon><v-icon :name="navItem.icon" /></v-list-item-icon>
 					<v-list-item-content>{{ navItem.name }}</v-list-item-content>
 				</v-list-item>
@@ -16,13 +11,7 @@
 			</div>
 		</template>
 
-		<v-list-item
-			v-else
-			:exact="exact"
-			v-for="navItem in navItems"
-			:key="navItem.to"
-			:to="navItem.to"
-		>
+		<v-list-item v-else :exact="exact" v-for="navItem in navItems" :key="navItem.to" :to="navItem.to">
 			<v-list-item-icon><v-icon :name="navItem.icon" /></v-list-item-icon>
 			<v-list-item-content>{{ navItem.name }}</v-list-item-content>
 		</v-list-item>
@@ -61,9 +50,7 @@ export default defineComponent({
 
 			return collectionPresetsStore.state.collectionPresets
 				.filter((preset) => {
-					return (
-						preset.title !== null && preset.collection.startsWith('directus_') === false
-					);
+					return preset.title !== null && preset.collection.startsWith('directus_') === false;
 				})
 				.map((preset) => {
 					return {
diff --git a/src/modules/collections/routes/browse/browse.vue b/src/modules/collections/routes/browse/browse.vue
index 93049ca1b6..c260524b87 100644
--- a/src/modules/collections/routes/browse/browse.vue
+++ b/src/modules/collections/routes/browse/browse.vue
@@ -308,9 +308,7 @@ export default defineComponent({
 				const batchPrimaryKeys = selection.value;
 
 				try {
-					await api.delete(
-						`/${currentProjectKey}/items/${props.collection}/${batchPrimaryKeys}`
-					);
+					await api.delete(`/${currentProjectKey}/items/${props.collection}/${batchPrimaryKeys}`);
 
 					await layout.value?.refresh?.();
 
diff --git a/src/modules/collections/routes/detail/detail.vue b/src/modules/collections/routes/detail/detail.vue
index acd2e08526..c82c81e9f8 100644
--- a/src/modules/collections/routes/detail/detail.vue
+++ b/src/modules/collections/routes/detail/detail.vue
@@ -1,10 +1,7 @@
 <template>
 	<collections-not-found v-if="error && error.code === 404" />
 	<private-view v-else :title="title">
-		<template
-			#title
-			v-if="isNew === false && isBatch === false && collectionInfo.display_template"
-		>
+		<template #title v-if="isNew === false && isBatch === false && collectionInfo.display_template">
 			<v-skeleton-loader class="title-loader" type="text" v-if="loading" />
 			<h1 class="type-title" v-else>
 				<render-template
@@ -16,14 +13,7 @@
 		</template>
 
 		<template #title-outer:prepend>
-			<v-button
-				v-if="collectionInfo.single"
-				class="header-icon"
-				rounded
-				icon
-				secondary
-				disabled
-			>
+			<v-button v-if="collectionInfo.single" class="header-icon" rounded icon secondary disabled>
 				<v-icon :name="collectionInfo.icon" />
 			</v-button>
 			<v-button
@@ -96,11 +86,7 @@
 						<v-button @click="confirmSoftDelete = false" secondary>
 							{{ $t('cancel') }}
 						</v-button>
-						<v-button
-							@click="deleteAndQuit(true)"
-							class="action-delete"
-							:loading="softDeleting"
-						>
+						<v-button @click="deleteAndQuit(true)" class="action-delete" :loading="softDeleting">
 							{{ $t('delete') }}
 						</v-button>
 					</v-card-actions>
@@ -172,10 +158,7 @@
 				:primary-key="primaryKey"
 			/>
 			<drawer-detail icon="help_outline" :title="$t('help_and_docs')">
-				<div
-					class="format-markdown"
-					v-html="marked($t('page_help_collections_overview'))"
-				/>
+				<div class="format-markdown" v-html="marked($t('page_help_collections_overview'))" />
 			</drawer-detail>
 		</template>
 	</private-view>
@@ -238,9 +221,7 @@ export default defineComponent({
 
 		const revisionsDrawerDetail = ref<Vue>(null);
 
-		const { info: collectionInfo, softDeleteStatus, primaryKeyField } = useCollection(
-			collection
-		);
+		const { info: collectionInfo, softDeleteStatus, primaryKeyField } = useCollection(collection);
 
 		const {
 			isNew,
@@ -266,9 +247,7 @@ export default defineComponent({
 		const confirmLeave = ref(false);
 		const leaveTo = ref<string>(null);
 
-		const backLink = computed(
-			() => `/${currentProjectKey.value}/collections/${collection.value}/`
-		);
+		const backLink = computed(() => `/${currentProjectKey.value}/collections/${collection.value}/`);
 
 		const templateValues = computed(() => {
 			return {
@@ -344,9 +323,7 @@ export default defineComponent({
 			if (props.primaryKey === '+') {
 				// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 				const newPrimaryKey = savedItem[primaryKeyField.value!.field];
-				router.replace(
-					`/${currentProjectKey.value}/collections/${props.collection}/${newPrimaryKey}`
-				);
+				router.replace(`/${currentProjectKey.value}/collections/${props.collection}/${newPrimaryKey}`);
 			}
 		}
 
@@ -357,9 +334,7 @@ export default defineComponent({
 
 		async function saveAsCopyAndNavigate() {
 			const newPrimaryKey = await saveAsCopy();
-			router.push(
-				`/${currentProjectKey.value}/collections/${props.collection}/${newPrimaryKey}`
-			);
+			router.push(`/${currentProjectKey.value}/collections/${props.collection}/${newPrimaryKey}`);
 		}
 
 		async function deleteAndQuit(soft = false) {
diff --git a/src/modules/collections/routes/overview/overview.vue b/src/modules/collections/routes/overview/overview.vue
index 9cb0b4508b..9eee0f877c 100644
--- a/src/modules/collections/routes/overview/overview.vue
+++ b/src/modules/collections/routes/overview/overview.vue
@@ -10,12 +10,7 @@
 			<collections-navigation />
 		</template>
 
-		<v-table
-			v-if="navItems.length > 0"
-			:headers="tableHeaders"
-			:items="navItems"
-			@click:row="navigateToCollection"
-		>
+		<v-table v-if="navItems.length > 0" :headers="tableHeaders" :items="navItems" @click:row="navigateToCollection">
 			<template #item.icon="{ item }">
 				<v-icon class="icon" :name="item.icon" />
 			</template>
@@ -35,16 +30,10 @@
 
 		<template #drawer>
 			<drawer-detail icon="info_outline" :title="$t('information')" close>
-				<div
-					class="format-markdown"
-					v-html="marked($t('page_help_collections_overview'))"
-				/>
+				<div class="format-markdown" v-html="marked($t('page_help_collections_overview'))" />
 			</drawer-detail>
 			<drawer-detail icon="help_outline" :title="$t('help_and_docs')">
-				<div
-					class="format-markdown"
-					v-html="marked($t('page_help_collections_overview'))"
-				/>
+				<div class="format-markdown" v-html="marked($t('page_help_collections_overview'))" />
 			</drawer-detail>
 		</template>
 	</private-view>
diff --git a/src/modules/define.ts b/src/modules/define.ts
index 4e8ab32028..99f20cf8c6 100644
--- a/src/modules/define.ts
+++ b/src/modules/define.ts
@@ -1,9 +1,7 @@
 import { i18n } from '@/lang/';
 import { ModuleDefineParam, ModuleContext, ModuleConfig } from './types';
 
-export function defineModule(
-	config: ModuleDefineParam | ((context: ModuleContext) => ModuleConfig)
-): ModuleConfig {
+export function defineModule(config: ModuleDefineParam | ((context: ModuleContext) => ModuleConfig)): ModuleConfig {
 	let options: ModuleConfig;
 
 	if (typeof config === 'function') {
diff --git a/src/modules/files/components/add-folder/add-folder.vue b/src/modules/files/components/add-folder/add-folder.vue
index b1639e7f0c..4e67f5b589 100644
--- a/src/modules/files/components/add-folder/add-folder.vue
+++ b/src/modules/files/components/add-folder/add-folder.vue
@@ -13,11 +13,7 @@
 			</v-card-text>
 			<v-card-actions>
 				<v-button secondary @click="dialogActive = false">{{ $t('cancel') }}</v-button>
-				<v-button
-					:disabled="!newFolderName || newFolderName.length === 0"
-					@click="addFolder"
-					:loading="saving"
-				>
+				<v-button :disabled="!newFolderName || newFolderName.length === 0" @click="addFolder" :loading="saving">
 					{{ $t('save') }}
 				</v-button>
 			</v-card-actions>
diff --git a/src/modules/files/routes/browse/browse.vue b/src/modules/files/routes/browse/browse.vue
index 6c96c9b1c4..45e11ec1cb 100644
--- a/src/modules/files/routes/browse/browse.vue
+++ b/src/modules/files/routes/browse/browse.vue
@@ -70,10 +70,7 @@
 			<layout-drawer-detail @input="viewType = $event" :value="viewType" />
 			<portal-target name="drawer" />
 			<drawer-detail icon="help_outline" :title="$t('help_and_docs')">
-				<div
-					class="format-markdown"
-					v-html="marked($t('page_help_collections_overview'))"
-				/>
+				<div class="format-markdown" v-html="marked($t('page_help_collections_overview'))" />
 			</drawer-detail>
 		</template>
 	</private-view>
@@ -107,9 +104,7 @@ export default defineComponent({
 
 		const selection = ref<Item[]>([]);
 
-		const { viewType, viewOptions, viewQuery, filters, searchQuery } = useCollectionPreset(
-			ref('directus_files')
-		);
+		const { viewType, viewOptions, viewQuery, filters, searchQuery } = useCollectionPreset(ref('directus_files'));
 		const { addNewLink, batchLink } = useLinks();
 		const { confirmDelete, deleting, batchDelete } = useBatchDelete();
 		const { breadcrumb } = useBreadcrumb();
diff --git a/src/modules/files/routes/detail/components/file-info-drawer-detail.vue b/src/modules/files/routes/detail/components/file-info-drawer-detail.vue
index 7cf9d1e84a..17dee60364 100644
--- a/src/modules/files/routes/detail/components/file-info-drawer-detail.vue
+++ b/src/modules/files/routes/detail/components/file-info-drawer-detail.vue
@@ -73,11 +73,9 @@ export default defineComponent({
 
 		const creationDate = ref<string>(null);
 
-		localizedFormat(new Date(props.uploaded_on), String(i18n.t('date-fns_datetime'))).then(
-			(result) => {
-				creationDate.value = result;
-			}
-		);
+		localizedFormat(new Date(props.uploaded_on), String(i18n.t('date-fns_datetime'))).then((result) => {
+			creationDate.value = result;
+		});
 
 		return { readableMimeType, size, creationDate };
 	},
diff --git a/src/modules/files/routes/detail/detail.vue b/src/modules/files/routes/detail/detail.vue
index e30a38b773..7786d6e112 100644
--- a/src/modules/files/routes/detail/detail.vue
+++ b/src/modules/files/routes/detail/detail.vue
@@ -13,13 +13,7 @@
 		<template #actions>
 			<v-dialog v-model="confirmDelete">
 				<template #activator="{ on }">
-					<v-button
-						rounded
-						icon
-						class="action-delete"
-						:disabled="item === null"
-						@click="on"
-					>
+					<v-button rounded icon class="action-delete" :disabled="item === null" @click="on">
 						<v-icon name="delete" />
 					</v-button>
 				</template>
@@ -38,23 +32,11 @@
 				</v-card>
 			</v-dialog>
 
-			<v-button
-				v-if="item && item.type.includes('image')"
-				rounded
-				icon
-				@click="editActive = true"
-				class="edit"
-			>
+			<v-button v-if="item && item.type.includes('image')" rounded icon @click="editActive = true" class="edit">
 				<v-icon name="tune" />
 			</v-button>
 
-			<v-button
-				rounded
-				icon
-				:loading="saving"
-				:disabled="hasEdits === false"
-				@click="saveAndQuit"
-			>
+			<v-button rounded icon :loading="saving" :disabled="hasEdits === false" @click="saveAndQuit">
 				<v-icon name="check" />
 
 				<template #append-outer>
@@ -129,10 +111,7 @@
 				:primary-key="primaryKey"
 			/>
 			<drawer-detail icon="help_outline" :title="$t('help_and_docs')">
-				<div
-					class="format-markdown"
-					v-html="marked($t('page_help_collections_overview'))"
-				/>
+				<div class="format-markdown" v-html="marked($t('page_help_collections_overview'))" />
 			</drawer-detail>
 		</template>
 	</private-view>
@@ -200,19 +179,10 @@ export default defineComponent({
 
 		const revisionsDrawerDetail = ref<Vue>(null);
 
-		const {
-			isNew,
-			edits,
-			item,
-			saving,
-			loading,
-			error,
-			save,
-			remove,
-			deleting,
-			saveAsCopy,
-			isBatch,
-		} = useItem(ref('directus_files'), primaryKey);
+		const { isNew, edits, item, saving, loading, error, save, remove, deleting, saveAsCopy, isBatch } = useItem(
+			ref('directus_files'),
+			primaryKey
+		);
 
 		const hasEdits = computed<boolean>(() => Object.keys(edits.value).length > 0);
 		const confirmDelete = ref(false);
diff --git a/src/modules/index.ts b/src/modules/index.ts
index c27f78da5a..2072c2f0a4 100644
--- a/src/modules/index.ts
+++ b/src/modules/index.ts
@@ -5,13 +5,6 @@ import ActivityModule from './activity/';
 import DocsModule from './docs/';
 import SettingsModule from './settings/';
 
-export const modules = [
-	ActivityModule,
-	CollectionsModule,
-	UsersModule,
-	FilesModule,
-	DocsModule,
-	SettingsModule,
-];
+export const modules = [ActivityModule, CollectionsModule, UsersModule, FilesModule, DocsModule, SettingsModule];
 
 export default modules;
diff --git a/src/modules/register.ts b/src/modules/register.ts
index 4ab6cd707c..7b05eb472a 100644
--- a/src/modules/register.ts
+++ b/src/modules/register.ts
@@ -9,15 +9,8 @@ const moduleRoutes = modules
 
 replaceRoutes((routes) => insertBeforeProjectWildcard(routes, moduleRoutes));
 
-export function insertBeforeProjectWildcard(
-	currentRoutes: RouteConfig[],
-	routesToBeAdded: RouteConfig[]
-) {
+export function insertBeforeProjectWildcard(currentRoutes: RouteConfig[], routesToBeAdded: RouteConfig[]) {
 	// Find the index of the /:project/* route, so we can insert the module routes right above that
 	const wildcardIndex = currentRoutes.findIndex((route) => route.path === '/:project/*');
-	return [
-		...currentRoutes.slice(0, wildcardIndex),
-		...routesToBeAdded,
-		...currentRoutes.slice(wildcardIndex),
-	];
+	return [...currentRoutes.slice(0, wildcardIndex), ...routesToBeAdded, ...currentRoutes.slice(wildcardIndex)];
 }
diff --git a/src/modules/settings/routes/data-model/collections/collections.vue b/src/modules/settings/routes/data-model/collections/collections.vue
index fa3346b3f5..1baec26127 100644
--- a/src/modules/settings/routes/data-model/collections/collections.vue
+++ b/src/modules/settings/routes/data-model/collections/collections.vue
@@ -17,13 +17,7 @@
 		</template>
 
 		<div class="padding-box">
-			<v-info
-				type="warning"
-				icon="box"
-				:title="$t('no_collections')"
-				v-if="items.length === 0"
-				center
-			>
+			<v-info type="warning" icon="box" :title="$t('no_collections')" v-if="items.length === 0" center>
 				{{ $t('no_collections_copy_admin') }}
 
 				<template #append>
@@ -46,9 +40,7 @@
 						:class="{
 							hidden: item.hidden,
 							system: item.collection.startsWith('directus_'),
-							unmanaged:
-								item.managed === false &&
-								item.collection.startsWith('directus_') === false,
+							unmanaged: item.managed === false && item.collection.startsWith('directus_') === false,
 						}"
 						:name="item.icon"
 					/>
@@ -60,9 +52,7 @@
 						:class="{
 							hidden: item.hidden,
 							system: item.collection.startsWith('directus_'),
-							unmanaged:
-								item.managed === false &&
-								item.collection.startsWith('directus_') === false,
+							unmanaged: item.managed === false && item.collection.startsWith('directus_') === false,
 						}"
 					>
 						{{ item.name }}
@@ -85,17 +75,11 @@
 
 		<template #drawer>
 			<drawer-detail icon="info_outline" :title="$t('information')" close>
-				<div
-					class="format-markdown"
-					v-html="marked($t('page_help_settings_datamodel_collections'))"
-				/>
+				<div class="format-markdown" v-html="marked($t('page_help_settings_datamodel_collections'))" />
 			</drawer-detail>
 			<collections-filter v-model="activeTypes" />
 			<drawer-detail icon="help_outline" :title="$t('help_and_docs')">
-				<div
-					class="format-markdown"
-					v-html="marked($t('page_help_collections_overview'))"
-				/>
+				<div class="format-markdown" v-html="marked($t('page_help_collections_overview'))" />
 			</drawer-detail>
 		</template>
 	</private-view>
@@ -188,9 +172,7 @@ export default defineComponent({
 			const system = computed(() => {
 				return sortBy(
 					collectionsStore.state.collections
-						.filter(
-							(collection) => collection.collection.startsWith('directus_') === true
-						)
+						.filter((collection) => collection.collection.startsWith('directus_') === true)
 						.map((collection) => ({ ...collection, icon: 'settings' })),
 					'collection'
 				);
@@ -199,9 +181,7 @@ export default defineComponent({
 			const unmanaged = computed(() => {
 				return sortBy(
 					collectionsStore.state.collections
-						.filter(
-							(collection) => collection.collection.startsWith('directus_') === false
-						)
+						.filter((collection) => collection.collection.startsWith('directus_') === false)
 						.filter((collection) => collection.managed === false)
 						.map((collection) => ({ ...collection, icon: 'block' })),
 					'collection'
diff --git a/src/modules/settings/routes/data-model/collections/components/collection-options/collection-options.vue b/src/modules/settings/routes/data-model/collections/components/collection-options/collection-options.vue
index f037c3b8dd..37abb34963 100644
--- a/src/modules/settings/routes/data-model/collections/components/collection-options/collection-options.vue
+++ b/src/modules/settings/routes/data-model/collections/components/collection-options/collection-options.vue
@@ -1,8 +1,6 @@
 <template>
 	<v-button
-		v-if="
-			collection.managed === false && collection.collection.startsWith('directus_') === false
-		"
+		v-if="collection.managed === false && collection.collection.startsWith('directus_') === false"
 		x-small
 		outlined
 		class="manage"
diff --git a/src/modules/settings/routes/data-model/collections/components/new-collection/new-collection.vue b/src/modules/settings/routes/data-model/collections/components/new-collection/new-collection.vue
index 1192ac00d7..cbcdd48898 100644
--- a/src/modules/settings/routes/data-model/collections/components/new-collection/new-collection.vue
+++ b/src/modules/settings/routes/data-model/collections/components/new-collection/new-collection.vue
@@ -86,11 +86,7 @@
 				{{ $t('cancel') }}
 			</v-button>
 			<div class="spacer" />
-			<v-button
-				secondary
-				@click="currentTab = ['collection']"
-				:disabled="currentTab[0] === 'collection'"
-			>
+			<v-button secondary @click="currentTab = ['collection']" :disabled="currentTab[0] === 'collection'">
 				{{ $t('previous') }}
 			</v-button>
 			<v-button
diff --git a/src/modules/settings/routes/data-model/fields/components/field-select/field-select.vue b/src/modules/settings/routes/data-model/fields/components/field-select/field-select.vue
index 56c2026342..e47a337e1a 100644
--- a/src/modules/settings/routes/data-model/fields/components/field-select/field-select.vue
+++ b/src/modules/settings/routes/data-model/fields/components/field-select/field-select.vue
@@ -2,13 +2,7 @@
 	<div :class="hidden ? 'half' : field.width">
 		<v-menu attached close-on-content-click>
 			<template #activator="{ toggle, active }">
-				<v-input
-					class="field"
-					:class="{ hidden, active }"
-					readonly
-					@click="toggle"
-					:value="field.name"
-				>
+				<v-input class="field" :class="{ hidden, active }" readonly @click="toggle" :value="field.name">
 					<template #prepend>
 						<v-icon class="drag-handle" name="drag_indicator" @click.stop />
 					</template>
@@ -123,14 +117,7 @@ export default defineComponent({
 		const collectionsStore = useCollectionsStore();
 
 		const { deleteActive, deleting, deleteField } = useDeleteField();
-		const {
-			duplicateActive,
-			duplicateName,
-			collections,
-			duplicateTo,
-			saveDuplicate,
-			duplicating,
-		} = useDuplicate();
+		const { duplicateActive, duplicateName, collections, duplicateTo, saveDuplicate, duplicating } = useDuplicate();
 
 		return {
 			editActive,
diff --git a/src/modules/settings/routes/data-model/fields/components/field-setup/field-setup-display.vue b/src/modules/settings/routes/data-model/fields/components/field-setup/field-setup-display.vue
index d08d7e511d..af43e649ab 100644
--- a/src/modules/settings/routes/data-model/fields/components/field-setup/field-setup-display.vue
+++ b/src/modules/settings/routes/data-model/fields/components/field-setup/field-setup-display.vue
@@ -2,16 +2,10 @@
 	<div>
 		<h2 class="type-title" v-if="isNew">{{ $t('display_setup_title') }}</h2>
 
-		<v-fancy-select
-			:items="items"
-			:value="value.display"
-			@input="emitValue('display', $event)"
-		/>
+		<v-fancy-select :items="items" :value="value.display" @input="emitValue('display', $event)" />
 
 		<v-form
-			v-if="
-				selectedDisplay && selectedDisplay.options && Array.isArray(selectedDisplay.options)
-			"
+			v-if="selectedDisplay && selectedDisplay.options && Array.isArray(selectedDisplay.options)"
 			:fields="selectedDisplay.options"
 			primary-key="+"
 			:edits="value.options"
diff --git a/src/modules/settings/routes/data-model/fields/components/field-setup/field-setup-interface.vue b/src/modules/settings/routes/data-model/fields/components/field-setup/field-setup-interface.vue
index 491e65c83d..68f058934f 100644
--- a/src/modules/settings/routes/data-model/fields/components/field-setup/field-setup-interface.vue
+++ b/src/modules/settings/routes/data-model/fields/components/field-setup/field-setup-interface.vue
@@ -2,18 +2,10 @@
 	<div>
 		<h2 class="type-title" v-if="isNew">{{ $t('relationship_setup_title') }}</h2>
 
-		<v-fancy-select
-			:items="items"
-			:value="value.interface"
-			@input="emitValue('interface', $event)"
-		/>
+		<v-fancy-select :items="items" :value="value.interface" @input="emitValue('interface', $event)" />
 
 		<v-form
-			v-if="
-				selectedInterface &&
-				selectedInterface.options &&
-				Array.isArray(selectedInterface.options)
-			"
+			v-if="selectedInterface && selectedInterface.options && Array.isArray(selectedInterface.options)"
 			:fields="selectedInterface.options"
 			primary-key="+"
 			:edits="value.options"
diff --git a/src/modules/settings/routes/data-model/fields/components/field-setup/field-setup-relationship-m2m.vue b/src/modules/settings/routes/data-model/fields/components/field-setup/field-setup-relationship-m2m.vue
index 6d2ef05757..1c46ef02c9 100644
--- a/src/modules/settings/routes/data-model/fields/components/field-setup/field-setup-relationship-m2m.vue
+++ b/src/modules/settings/routes/data-model/fields/components/field-setup/field-setup-relationship-m2m.vue
@@ -13,18 +13,10 @@
 			<v-select :items="collectionItems" v-model="relatedCollection" />
 		</div>
 		<v-input disabled :value="field.field" />
-		<v-select
-			:disabled="!junctionCollection"
-			:items="junctionFields"
-			v-model="junctionFieldCurrent"
-		/>
+		<v-select :disabled="!junctionCollection" :items="junctionFields" v-model="junctionFieldCurrent" />
 		<div class="spacer" />
 		<div class="spacer" />
-		<v-select
-			:disabled="!junctionCollection"
-			:items="junctionFields"
-			v-model="junctionFieldRelated"
-		/>
+		<v-select :disabled="!junctionCollection" :items="junctionFields" v-model="junctionFieldRelated" />
 		<v-input disabled value="id" />
 		<v-icon name="arrow_forward" />
 		<v-icon name="arrow_backward" />
@@ -124,12 +116,10 @@ export default defineComponent({
 		const junctionFields = computed(() => {
 			if (!junctionCollection.value) return [];
 
-			return fieldsStore
-				.getFieldsForCollection(junctionCollection.value)
-				.map((field: Field) => ({
-					text: field.name,
-					value: field.field,
-				}));
+			return fieldsStore.getFieldsForCollection(junctionCollection.value).map((field: Field) => ({
+				text: field.name,
+				value: field.field,
+			}));
 		});
 
 		const relatedCollection = computed({
diff --git a/src/modules/settings/routes/data-model/fields/components/field-setup/field-setup-relationship-m2o.vue b/src/modules/settings/routes/data-model/fields/components/field-setup/field-setup-relationship-m2o.vue
index 0b30ba9206..ec38003690 100644
--- a/src/modules/settings/routes/data-model/fields/components/field-setup/field-setup-relationship-m2o.vue
+++ b/src/modules/settings/routes/data-model/fields/components/field-setup/field-setup-relationship-m2o.vue
@@ -93,10 +93,7 @@ export default defineComponent({
 
 		const existingRelation = computed(() => {
 			return props.existingRelations.find((relation) => {
-				return (
-					relation.field_many === props.field.field &&
-					relation.collection_many === props.field.collection
-				);
+				return relation.field_many === props.field.field && relation.collection_many === props.field.collection;
 			});
 		});
 
diff --git a/src/modules/settings/routes/data-model/fields/components/field-setup/field-setup-relationship-o2m.vue b/src/modules/settings/routes/data-model/fields/components/field-setup/field-setup-relationship-o2m.vue
index 8be1f15a63..55624404c6 100644
--- a/src/modules/settings/routes/data-model/fields/components/field-setup/field-setup-relationship-o2m.vue
+++ b/src/modules/settings/routes/data-model/fields/components/field-setup/field-setup-relationship-o2m.vue
@@ -86,10 +86,7 @@ export default defineComponent({
 
 		const existingRelation = computed(() => {
 			return props.existingRelations.find((relation) => {
-				return (
-					relation.field_one === props.field.field &&
-					relation.collection_one === props.field.collection
-				);
+				return relation.field_one === props.field.field && relation.collection_one === props.field.collection;
 			});
 		});
 
diff --git a/src/modules/settings/routes/data-model/fields/components/field-setup/setup-actions.vue b/src/modules/settings/routes/data-model/fields/components/field-setup/setup-actions.vue
index f2d86901f6..0d1496f002 100644
--- a/src/modules/settings/routes/data-model/fields/components/field-setup/setup-actions.vue
+++ b/src/modules/settings/routes/data-model/fields/components/field-setup/setup-actions.vue
@@ -54,18 +54,13 @@ export default defineComponent({
 		const _currentTab = useSync(props, 'currentTab', emit);
 
 		const { field, localType } = toRefs(props);
-		const {
-			fieldComplete,
-			relationComplete,
-			interfaceComplete,
-			displayComplete,
-			advancedComplete,
-		} = useValidation(field, localType);
-
-		const currentTabIndex = computed(() =>
-			props.tabs.findIndex((tab) => tab.value === props.currentTab[0])
+		const { fieldComplete, relationComplete, interfaceComplete, displayComplete, advancedComplete } = useValidation(
+			field,
+			localType
 		);
 
+		const currentTabIndex = computed(() => props.tabs.findIndex((tab) => tab.value === props.currentTab[0]));
+
 		const previousDisabled = computed(() => {
 			return currentTabIndex.value === 0;
 		});
diff --git a/src/modules/settings/routes/data-model/fields/components/field-setup/setup-tabs.vue b/src/modules/settings/routes/data-model/fields/components/field-setup/setup-tabs.vue
index 158d595068..b222606d29 100644
--- a/src/modules/settings/routes/data-model/fields/components/field-setup/setup-tabs.vue
+++ b/src/modules/settings/routes/data-model/fields/components/field-setup/setup-tabs.vue
@@ -1,11 +1,6 @@
 <template>
 	<v-tabs vertical v-model="_currentTab">
-		<v-tab
-			v-for="tab in tabs"
-			:key="tab.value"
-			:value="tab.value"
-			:disabled="tabEnabled(tab) === false"
-		>
+		<v-tab v-for="tab in tabs" :key="tab.value" :value="tab.value" :disabled="tabEnabled(tab) === false">
 			{{ tab.text }}
 		</v-tab>
 	</v-tabs>
@@ -45,12 +40,7 @@ export default defineComponent({
 		const _currentTab = useSync(props, 'currentTab', emit);
 
 		const { field, localType } = toRefs(props);
-		const {
-			fieldComplete,
-			relationComplete,
-			interfaceComplete,
-			displayComplete,
-		} = useValidation(field, localType);
+		const { fieldComplete, relationComplete, interfaceComplete, displayComplete } = useValidation(field, localType);
 
 		const hasRelationshipTab = computed(() => {
 			const relationshipTab = props.tabs.find((tab) => tab.value === 'relationship');
@@ -69,9 +59,7 @@ export default defineComponent({
 				case 'relationship':
 					return fieldComplete.value === true;
 				case 'interface':
-					return hasRelationshipTab.value
-						? relationComplete.value === true
-						: fieldComplete.value === true;
+					return hasRelationshipTab.value ? relationComplete.value === true : fieldComplete.value === true;
 				case 'display':
 					return interfaceComplete.value === true;
 				case 'advanced':
diff --git a/src/modules/settings/routes/data-model/fields/components/fields-management/fields-management.vue b/src/modules/settings/routes/data-model/fields/components/fields-management/fields-management.vue
index a59c75c855..6827f5315c 100644
--- a/src/modules/settings/routes/data-model/fields/components/fields-management/fields-management.vue
+++ b/src/modules/settings/routes/data-model/fields/components/fields-management/fields-management.vue
@@ -21,14 +21,7 @@
 			/>
 
 			<template #footer>
-				<v-button
-					class="add-field"
-					align="left"
-					dashed
-					outlined
-					large
-					@click="openFieldSetup()"
-				>
+				<v-button class="add-field" align="left" dashed outlined large @click="openFieldSetup()">
 					<v-icon name="add" />
 
 					{{ $t('add_field') }}
@@ -57,14 +50,7 @@
 			/>
 
 			<template #footer>
-				<v-button
-					class="add-field"
-					align="left"
-					dashed
-					outlined
-					large
-					@click="openFieldSetup()"
-				>
+				<v-button class="add-field" align="left" dashed outlined large @click="openFieldSetup()">
 					<v-icon name="add" />
 
 					{{ $t('add_field') }}
@@ -156,8 +142,7 @@ export default defineComponent({
 		}
 
 		function toggleVisibility(field: Field, location: 'visible' | 'hidden') {
-			const fields =
-				location === 'hidden' ? sortedVisibleFields.value : sortedHiddenFields.value;
+			const fields = location === 'hidden' ? sortedVisibleFields.value : sortedHiddenFields.value;
 
 			handleChange(
 				{ added: { element: field, newIndex: fields.length } },
@@ -165,21 +150,16 @@ export default defineComponent({
 			);
 		}
 
-		function addToGroup(
-			event: Required<DraggableEvent>['added'],
-			location: 'visible' | 'hidden'
-		) {
+		function addToGroup(event: Required<DraggableEvent>['added'], location: 'visible' | 'hidden') {
 			/** @NOTE Adding to one group also means removing from the other */
 
 			const { element, newIndex } = event;
 
-			const fieldsInGroup =
-				location === 'visible' ? sortedVisibleFields.value : sortedHiddenFields.value;
+			const fieldsInGroup = location === 'visible' ? sortedVisibleFields.value : sortedHiddenFields.value;
 
 			const updates: Partial<Field>[] = fieldsInGroup.slice(newIndex).map((field) => {
 				const sortValue =
-					field.sort ||
-					fieldsInGroup.findIndex((existingField) => existingField.field === field.field);
+					field.sort || fieldsInGroup.findIndex((existingField) => existingField.field === field.field);
 
 				return {
 					field: field.field,
@@ -209,25 +189,19 @@ export default defineComponent({
 			fieldsStore.updateFields(element.collection, updates);
 		}
 
-		function sortInGroup(
-			event: Required<DraggableEvent>['moved'],
-			location: 'visible' | 'hidden'
-		) {
+		function sortInGroup(event: Required<DraggableEvent>['moved'], location: 'visible' | 'hidden') {
 			const { element, newIndex, oldIndex } = event;
 			const move = newIndex > oldIndex ? 'down' : 'up';
 
-			const selectionRange =
-				move === 'down' ? [oldIndex + 1, newIndex + 1] : [newIndex, oldIndex];
+			const selectionRange = move === 'down' ? [oldIndex + 1, newIndex + 1] : [newIndex, oldIndex];
 
-			const fields =
-				location === 'visible' ? sortedVisibleFields.value : sortedHiddenFields.value;
+			const fields = location === 'visible' ? sortedVisibleFields.value : sortedHiddenFields.value;
 
 			const updates: Partial<Field>[] = fields.slice(...selectionRange).map((field) => {
 				// If field.sort isn't set yet, base it on the index of the array. That way, the
 				// new sort value will match what's visible on the screen
 				const sortValue =
-					field.sort ||
-					fields.findIndex((existingField) => existingField.field === field.field);
+					field.sort || fields.findIndex((existingField) => existingField.field === field.field);
 
 				return {
 					field: field.field,
diff --git a/src/modules/settings/routes/data-model/fields/fields.vue b/src/modules/settings/routes/data-model/fields/fields.vue
index 594ceef8ca..dd683913e4 100644
--- a/src/modules/settings/routes/data-model/fields/fields.vue
+++ b/src/modules/settings/routes/data-model/fields/fields.vue
@@ -9,13 +9,7 @@
 		<template #actions>
 			<v-dialog v-model="confirmDelete">
 				<template #activator="{ on }">
-					<v-button
-						rounded
-						icon
-						class="action-delete"
-						:disabled="item === null"
-						@click="on"
-					>
+					<v-button rounded icon class="action-delete" :disabled="item === null" @click="on">
 						<v-icon name="delete" />
 					</v-button>
 				</template>
@@ -34,13 +28,7 @@
 				</v-card>
 			</v-dialog>
 
-			<v-button
-				rounded
-				icon
-				:loading="saving"
-				:disabled="hasEdits === false"
-				@click="saveAndQuit"
-			>
+			<v-button rounded icon :loading="saving" :disabled="hasEdits === false" @click="saveAndQuit">
 				<v-icon name="check" />
 			</v-button>
 		</template>
@@ -70,16 +58,10 @@
 
 		<template #drawer>
 			<drawer-detail icon="info_outline" :title="$t('information')" close>
-				<div
-					class="format-markdown"
-					v-html="marked($t('page_help_settings_datamodel_fields'))"
-				/>
+				<div class="format-markdown" v-html="marked($t('page_help_settings_datamodel_fields'))" />
 			</drawer-detail>
 			<drawer-detail icon="help_outline" :title="$t('help_and_docs')">
-				<div
-					class="format-markdown"
-					v-html="marked($t('page_help_collections_overview'))"
-				/>
+				<div class="format-markdown" v-html="marked($t('page_help_collections_overview'))" />
 			</drawer-detail>
 		</template>
 	</private-view>
@@ -111,19 +93,10 @@ export default defineComponent({
 		const { currentProjectKey } = toRefs(projectsStore.state);
 		const collectionsStore = useCollectionsStore();
 
-		const {
-			isNew,
-			edits,
-			item,
-			saving,
-			loading,
-			error,
-			save,
-			remove,
-			deleting,
-			saveAsCopy,
-			isBatch,
-		} = useItem(ref('directus_collections'), collection);
+		const { isNew, edits, item, saving, loading, error, save, remove, deleting, saveAsCopy, isBatch } = useItem(
+			ref('directus_collections'),
+			collection
+		);
 
 		const hasEdits = computed<boolean>(() => Object.keys(edits.value).length > 0);
 
diff --git a/src/modules/settings/routes/global/global.vue b/src/modules/settings/routes/global/global.vue
index 7372906344..107a53f3bd 100644
--- a/src/modules/settings/routes/global/global.vue
+++ b/src/modules/settings/routes/global/global.vue
@@ -17,12 +17,7 @@
 		</template>
 
 		<div class="settings">
-			<v-form
-				:initial-values="initialValues"
-				v-model="edits"
-				:fields="fields"
-				:primary-key="1"
-			/>
+			<v-form :initial-values="initialValues" v-model="edits" :fields="fields" :primary-key="1" />
 		</div>
 
 		<template #drawer>
@@ -53,9 +48,7 @@ export default defineComponent({
 
 		const edits = ref<{ [key: string]: any }>(null);
 
-		const noEdits = computed<boolean>(
-			() => edits.value === null || Object.keys(edits.value).length === 0
-		);
+		const noEdits = computed<boolean>(() => edits.value === null || Object.keys(edits.value).length === 0);
 
 		const saving = ref(false);
 
diff --git a/src/modules/settings/routes/presets/browse/browse.vue b/src/modules/settings/routes/presets/browse/browse.vue
index 222debd3c9..dca981b308 100644
--- a/src/modules/settings/routes/presets/browse/browse.vue
+++ b/src/modules/settings/routes/presets/browse/browse.vue
@@ -21,11 +21,7 @@
 						<v-button @click="confirmDelete = false" secondary>
 							{{ $t('cancel') }}
 						</v-button>
-						<v-button
-							@click="deleteSelection"
-							class="action-delete"
-							:loading="deleting"
-						>
+						<v-button @click="deleteSelection" class="action-delete" :loading="deleting">
 							{{ $t('delete') }}
 						</v-button>
 					</v-card-actions>
@@ -42,13 +38,7 @@
 		</template>
 
 		<div class="presets-browse">
-			<v-info
-				center
-				type="warning"
-				v-if="presets.length === 0"
-				:title="$t('no_presets')"
-				icon="bookmark"
-			>
+			<v-info center type="warning" v-if="presets.length === 0" :title="$t('no_presets')" icon="bookmark">
 				{{ $t('no_presets_copy') }}
 
 				<template #append>
@@ -88,16 +78,10 @@
 
 		<template #drawer>
 			<drawer-detail icon="info_outline" :title="$t('information')" close>
-				<div
-					class="format-markdown"
-					v-html="marked($t('page_help_settings_presets_browse'))"
-				/>
+				<div class="format-markdown" v-html="marked($t('page_help_settings_presets_browse'))" />
 			</drawer-detail>
 			<drawer-detail icon="help_outline" :title="$t('help_and_docs')">
-				<div
-					class="format-markdown"
-					v-html="marked($t('page_help_collections_overview'))"
-				/>
+				<div class="format-markdown" v-html="marked($t('page_help_collections_overview'))" />
 			</drawer-detail>
 		</template>
 	</private-view>
diff --git a/src/modules/settings/routes/presets/detail/detail.vue b/src/modules/settings/routes/presets/detail/detail.vue
index 50eb3657a2..1cbd2afe0a 100644
--- a/src/modules/settings/routes/presets/detail/detail.vue
+++ b/src/modules/settings/routes/presets/detail/detail.vue
@@ -13,13 +13,7 @@
 		<template #actions>
 			<v-dialog v-model="confirmDelete">
 				<template #activator="{ on }">
-					<v-button
-						rounded
-						icon
-						class="action-delete"
-						:disabled="preset === null || id === '+'"
-						@click="on"
-					>
+					<v-button rounded icon class="action-delete" :disabled="preset === null || id === '+'" @click="on">
 						<v-icon name="delete" />
 					</v-button>
 				</template>
@@ -68,19 +62,13 @@
 
 		<template #drawer>
 			<drawer-detail icon="info_outline" :title="$t('information')" close>
-				<div
-					class="format-markdown"
-					v-html="marked($t('page_help_settings_presets_detail'))"
-				/>
+				<div class="format-markdown" v-html="marked($t('page_help_settings_presets_detail'))" />
 			</drawer-detail>
 			<div class="layout-drawer">
 				<portal-target name="drawer" />
 			</div>
 			<drawer-detail icon="help_outline" :title="$t('help_and_docs')">
-				<div
-					class="format-markdown"
-					v-html="marked($t('page_help_collections_overview'))"
-				/>
+				<div class="format-markdown" v-html="marked($t('page_help_collections_overview'))" />
 			</drawer-detail>
 		</template>
 	</private-view>
@@ -146,9 +134,7 @@ export default defineComponent({
 		const { save, saving } = useSave();
 		const { deleting, deleteAndQuit, confirmDelete } = useDelete();
 
-		const loading = computed(
-			() => usersLoading.value || presetLoading.value || rolesLoading.value
-		);
+		const loading = computed(() => usersLoading.value || presetLoading.value || rolesLoading.value);
 
 		return {
 			backLink,
@@ -202,10 +188,7 @@ export default defineComponent({
 					if (isNew.value === true) {
 						await api.post(`/${currentProjectKey}/collection_presets`, editsParsed);
 					} else {
-						await api.patch(
-							`/${currentProjectKey}/collection_presets/${props.id}`,
-							editsParsed
-						);
+						await api.patch(`/${currentProjectKey}/collection_presets/${props.id}`, editsParsed);
 					}
 
 					await collectionPresetsStore.hydrate();
@@ -334,9 +317,7 @@ export default defineComponent({
 				loading.value = true;
 
 				try {
-					const response = await api.get(
-						`/${currentProjectKey}/collection_presets/${props.id}`
-					);
+					const response = await api.get(`/${currentProjectKey}/collection_presets/${props.id}`);
 
 					preset.value = response.data.data;
 				} catch (err) {
@@ -442,8 +423,7 @@ export default defineComponent({
 					interface: 'dropdown',
 					options: {
 						choices: collectionsStore.state.collections.reduce(
-							(string, collection) =>
-								(string += `${collection.collection} :: ${collection.name}\n`),
+							(string, collection) => (string += `${collection.collection} :: ${collection.name}\n`),
 							''
 						),
 					},
@@ -463,10 +443,7 @@ export default defineComponent({
 					name: i18n.t('layout'),
 					interface: 'dropdown',
 					options: {
-						choices: layouts.reduce(
-							(string, layout) => (string += `${layout.id}::${layout.name}\n`),
-							''
-						),
+						choices: layouts.reduce((string, layout) => (string += `${layout.id}::${layout.name}\n`), ''),
 					},
 					width: 'half',
 				},
diff --git a/src/modules/settings/routes/roles/browse/browse.vue b/src/modules/settings/routes/roles/browse/browse.vue
index 824543a2e7..e4a6335591 100644
--- a/src/modules/settings/routes/roles/browse/browse.vue
+++ b/src/modules/settings/routes/roles/browse/browse.vue
@@ -9,13 +9,7 @@
 		<template #actions>
 			<v-dialog v-model="confirmDelete">
 				<template #activator="{ on }">
-					<v-button
-						rounded
-						icon
-						class="action-delete"
-						v-if="selection.length > 0"
-						@click="on"
-					>
+					<v-button rounded icon class="action-delete" v-if="selection.length > 0" @click="on">
 						<v-icon name="delete" />
 					</v-button>
 				</template>
@@ -59,17 +53,11 @@
 
 		<template #drawer>
 			<drawer-detail icon="info_outline" :title="$t('information')" close>
-				<div
-					class="format-markdown"
-					v-html="marked($t('page_help_settings_roles_browse'))"
-				/>
+				<div class="format-markdown" v-html="marked($t('page_help_settings_roles_browse'))" />
 			</drawer-detail>
 			<portal-target name="drawer" />
 			<drawer-detail icon="help_outline" :title="$t('help_and_docs')">
-				<div
-					class="format-markdown"
-					v-html="marked($t('page_help_collections_overview'))"
-				/>
+				<div class="format-markdown" v-html="marked($t('page_help_collections_overview'))" />
 			</drawer-detail>
 		</template>
 	</private-view>
diff --git a/src/modules/settings/routes/roles/detail/components/permissions-fields/permissions-fields.vue b/src/modules/settings/routes/roles/detail/components/permissions-fields/permissions-fields.vue
index ff6f9ab6b6..2e285ad705 100644
--- a/src/modules/settings/routes/roles/detail/components/permissions-fields/permissions-fields.vue
+++ b/src/modules/settings/routes/roles/detail/components/permissions-fields/permissions-fields.vue
@@ -15,9 +15,7 @@
 					:value="field.field"
 					:key="field.field"
 					:indeterminate="readIndeterminate.includes(field.field)"
-					@update:indeterminate="
-						readIndeterminate = readIndeterminate.filter((f) => f !== field.field)
-					"
+					@update:indeterminate="readIndeterminate = readIndeterminate.filter((f) => f !== field.field)"
 					:label="field.name"
 				/>
 			</div>
@@ -109,9 +107,7 @@ export default defineComponent({
 			if (newVal !== true) return;
 
 			if (props.combined === true) {
-				readableFields.value = invertBlacklist(
-					intersection(...(props.readBlacklist as string[][]))
-				);
+				readableFields.value = invertBlacklist(intersection(...(props.readBlacklist as string[][])));
 
 				readIndeterminate.value = [...new Set(props.readBlacklist.flat())].filter((k) =>
 					readableFields.value.includes(k)
@@ -121,9 +117,7 @@ export default defineComponent({
 			}
 
 			if (props.combined === true) {
-				writableFields.value = invertBlacklist(
-					intersection(...(props.writeBlacklist as string[][]))
-				);
+				writableFields.value = invertBlacklist(intersection(...(props.writeBlacklist as string[][])));
 
 				writeIndeterminate.value = [...new Set(props.writeBlacklist.flat())].filter((k) =>
 					writableFields.value.includes(k)
@@ -154,12 +148,8 @@ export default defineComponent({
 				collection: props.collection,
 				status: props.status,
 				role: props.role,
-				read_field_blacklist: fieldKeys.value.filter(
-					(key) => readableFields.value.includes(key) === false
-				),
-				write_field_blacklist: fieldKeys.value.filter(
-					(key) => writableFields.value.includes(key) === false
-				),
+				read_field_blacklist: fieldKeys.value.filter((key) => readableFields.value.includes(key) === false),
+				write_field_blacklist: fieldKeys.value.filter((key) => writableFields.value.includes(key) === false),
 			};
 
 			if (props.permissionId) {
diff --git a/src/modules/settings/routes/roles/detail/components/permissions-row/permissions-row.vue b/src/modules/settings/routes/roles/detail/components/permissions-row/permissions-row.vue
index efe4e08dbb..c6a4afd6a3 100644
--- a/src/modules/settings/routes/roles/detail/components/permissions-row/permissions-row.vue
+++ b/src/modules/settings/routes/roles/detail/components/permissions-row/permissions-row.vue
@@ -63,10 +63,7 @@
 			/>
 			<div class="spacer" v-else>--</div>
 
-			<v-icon
-				@click="detailsOpen = !detailsOpen"
-				:name="detailsOpen ? 'expand_less' : 'expand_more'"
-			/>
+			<v-icon @click="detailsOpen = !detailsOpen" :name="detailsOpen ? 'expand_less' : 'expand_more'" />
 		</div>
 
 		<div class="details" v-if="detailsOpen">
@@ -270,13 +267,9 @@ export default defineComponent({
 
 			if (statusField.value && statuses.value) {
 				const statusPermissions = statuses.value.map((status) => {
-					const existing = props.savedPermissions.find(
-						(permission) => permission.status === status.value
-					);
+					const existing = props.savedPermissions.find((permission) => permission.status === status.value);
 
-					return (
-						existing || getDefaultPermission(props.collection, props.role, status.value)
-					);
+					return existing || getDefaultPermission(props.collection, props.role, status.value);
 				});
 
 				return [...statusPermissions, createPermission];
@@ -316,9 +309,7 @@ export default defineComponent({
 			if (statusField.value) {
 				let value = permissions.value[0][type];
 
-				for (const permission of permissions.value.filter(
-					({ status }) => status !== '$create'
-				)) {
+				for (const permission of permissions.value.filter(({ status }) => status !== '$create')) {
 					if (value !== permission[type]) {
 						value = 'indeterminate';
 						break;
@@ -327,9 +318,7 @@ export default defineComponent({
 
 				return value;
 			} else {
-				const permission = permissions.value.find(
-					(permission) => permission.status === null
-				);
+				const permission = permissions.value.find((permission) => permission.status === null);
 
 				return permission?.[type];
 			}
diff --git a/src/modules/settings/routes/roles/detail/components/permissions-statuses/permissions-statuses.vue b/src/modules/settings/routes/roles/detail/components/permissions-statuses/permissions-statuses.vue
index 8ab978c3a3..f62f9ec9c0 100644
--- a/src/modules/settings/routes/roles/detail/components/permissions-statuses/permissions-statuses.vue
+++ b/src/modules/settings/routes/roles/detail/components/permissions-statuses/permissions-statuses.vue
@@ -13,9 +13,7 @@
 				:value="status.value"
 				:key="status.value"
 				:indeterminate="indeterminate.includes(status.value)"
-				@update:indeterminate="
-					indeterminate = indeterminate.filter((s) => s !== status.value)
-				"
+				@update:indeterminate="indeterminate = indeterminate.filter((s) => s !== status.value)"
 				:label="status.name"
 			/>
 		</div>
@@ -88,9 +86,7 @@ export default defineComponent({
 			if (newVal !== true) return;
 
 			if (props.combined === true) {
-				allowedStatuses.value = invertBlacklist(
-					intersection(...(props.statusBlacklist as string[][]))
-				);
+				allowedStatuses.value = invertBlacklist(intersection(...(props.statusBlacklist as string[][])));
 
 				allowedStatuses.value = [...new Set(props.statusBlacklist.flat())].filter((k) =>
 					allowedStatuses.value.includes(k)
@@ -118,9 +114,7 @@ export default defineComponent({
 				collection: props.collection,
 				status: props.status,
 				role: props.role,
-				status_blacklist: statusKeys.value.filter(
-					(key) => allowedStatuses.value.includes(key) === false
-				),
+				status_blacklist: statusKeys.value.filter((key) => allowedStatuses.value.includes(key) === false),
 			};
 
 			if (props.permissionId) {
diff --git a/src/modules/settings/routes/roles/detail/components/permissions-toggle/permissions-toggle.vue b/src/modules/settings/routes/roles/detail/components/permissions-toggle/permissions-toggle.vue
index 71666cd063..77efe2a8c2 100644
--- a/src/modules/settings/routes/roles/detail/components/permissions-toggle/permissions-toggle.vue
+++ b/src/modules/settings/routes/roles/detail/components/permissions-toggle/permissions-toggle.vue
@@ -1,11 +1,5 @@
 <template>
-	<v-menu
-		show-arrow
-		placement="left-start"
-		class="permissions-toggle"
-		close-on-content-click
-		:disabled="saving"
-	>
+	<v-menu show-arrow placement="left-start" class="permissions-toggle" close-on-content-click :disabled="saving">
 		<template #activator="{ toggle }">
 			<span>
 				<v-progress-circular class="spinner" indeterminate small v-if="saving" />
diff --git a/src/modules/settings/routes/roles/detail/detail.vue b/src/modules/settings/routes/roles/detail/detail.vue
index b4894add1b..b57d27af6f 100644
--- a/src/modules/settings/routes/roles/detail/detail.vue
+++ b/src/modules/settings/routes/roles/detail/detail.vue
@@ -1,13 +1,7 @@
 <template>
 	<private-view :title="$t('editing', { collection: $t('roles') })">
 		<template #title-outer:prepend>
-			<v-button
-				class="header-icon"
-				rounded
-				icon
-				exact
-				:to="`/${currentProjectKey}/settings/roles/`"
-			>
+			<v-button class="header-icon" rounded icon exact :to="`/${currentProjectKey}/settings/roles/`">
 				<v-icon name="arrow_back" />
 			</v-button>
 		</template>
@@ -15,13 +9,7 @@
 		<template #actions>
 			<v-dialog v-model="confirmDelete">
 				<template #activator="{ on }">
-					<v-button
-						rounded
-						icon
-						class="action-delete"
-						:disabled="item === null"
-						@click="on"
-					>
+					<v-button rounded icon class="action-delete" :disabled="item === null" @click="on">
 						<v-icon name="delete" />
 					</v-button>
 				</template>
@@ -40,13 +28,7 @@
 				</v-card>
 			</v-dialog>
 
-			<v-button
-				rounded
-				icon
-				:loading="saving"
-				:disabled="hasEdits === false"
-				@click="saveAndQuit"
-			>
+			<v-button rounded icon :loading="saving" :disabled="hasEdits === false" @click="saveAndQuit">
 				<v-icon name="check" />
 
 				<template #append-outer>
@@ -84,21 +66,11 @@
 
 		<template #drawer>
 			<drawer-detail icon="info_outline" :title="$t('information')" close>
-				<div
-					class="format-markdown"
-					v-html="marked($t('page_help_settings_roles_detail'))"
-				/>
+				<div class="format-markdown" v-html="marked($t('page_help_settings_roles_detail'))" />
 			</drawer-detail>
-			<revisions-drawer-detail
-				v-if="isNew === false"
-				collection="directus_roles"
-				:primary-key="primaryKey"
-			/>
+			<revisions-drawer-detail v-if="isNew === false" collection="directus_roles" :primary-key="primaryKey" />
 			<drawer-detail icon="help_outline" :title="$t('help_and_docs')">
-				<div
-					class="format-markdown"
-					v-html="marked($t('page_help_collections_overview'))"
-				/>
+				<div class="format-markdown" v-html="marked($t('page_help_collections_overview'))" />
 			</drawer-detail>
 		</template>
 	</private-view>
@@ -136,19 +108,10 @@ export default defineComponent({
 		const { currentProjectKey } = toRefs(projectsStore.state);
 		const { primaryKey } = toRefs(props);
 
-		const {
-			isNew,
-			edits,
-			item,
-			saving,
-			loading,
-			error,
-			save,
-			remove,
-			deleting,
-			saveAsCopy,
-			isBatch,
-		} = useItem(ref('directus_roles'), primaryKey);
+		const { isNew, edits, item, saving, loading, error, save, remove, deleting, saveAsCopy, isBatch } = useItem(
+			ref('directus_roles'),
+			primaryKey
+		);
 
 		const hasEdits = computed<boolean>(() => Object.keys(edits.value).length > 0);
 
diff --git a/src/modules/settings/routes/webhooks/browse/browse.vue b/src/modules/settings/routes/webhooks/browse/browse.vue
index d0827b9ab8..572c7d57c0 100644
--- a/src/modules/settings/routes/webhooks/browse/browse.vue
+++ b/src/modules/settings/routes/webhooks/browse/browse.vue
@@ -9,13 +9,7 @@
 		<template #actions>
 			<v-dialog v-model="confirmDelete">
 				<template #activator="{ on }">
-					<v-button
-						rounded
-						icon
-						class="action-delete"
-						v-if="selection.length > 0"
-						@click="on"
-					>
+					<v-button rounded icon class="action-delete" v-if="selection.length > 0" @click="on">
 						<v-icon name="delete" />
 					</v-button>
 				</template>
@@ -59,17 +53,11 @@
 
 		<template #drawer>
 			<drawer-detail icon="info_outline" :title="$t('information')" close>
-				<div
-					class="format-markdown"
-					v-html="marked($t('page_help_settings_webhooks_browse'))"
-				/>
+				<div class="format-markdown" v-html="marked($t('page_help_settings_webhooks_browse'))" />
 			</drawer-detail>
 			<portal-target name="drawer" />
 			<drawer-detail icon="help_outline" :title="$t('help_and_docs')">
-				<div
-					class="format-markdown"
-					v-html="marked($t('page_help_collections_overview'))"
-				/>
+				<div class="format-markdown" v-html="marked($t('page_help_collections_overview'))" />
 			</drawer-detail>
 		</template>
 	</private-view>
diff --git a/src/modules/settings/routes/webhooks/detail/detail.vue b/src/modules/settings/routes/webhooks/detail/detail.vue
index d9be9199a1..6fd2bd9f53 100644
--- a/src/modules/settings/routes/webhooks/detail/detail.vue
+++ b/src/modules/settings/routes/webhooks/detail/detail.vue
@@ -1,13 +1,7 @@
 <template>
 	<private-view :title="$t('editing', { collection: $t('webhooks') })">
 		<template #title-outer:prepend>
-			<v-button
-				class="header-icon"
-				rounded
-				icon
-				exact
-				:to="`/${currentProjectKey}/settings/webhooks/`"
-			>
+			<v-button class="header-icon" rounded icon exact :to="`/${currentProjectKey}/settings/webhooks/`">
 				<v-icon name="arrow_back" />
 			</v-button>
 		</template>
@@ -15,13 +9,7 @@
 		<template #actions>
 			<v-dialog v-model="confirmDelete">
 				<template #activator="{ on }">
-					<v-button
-						rounded
-						icon
-						class="action-delete"
-						:disabled="item === null"
-						@click="on"
-					>
+					<v-button rounded icon class="action-delete" :disabled="item === null" @click="on">
 						<v-icon name="delete" />
 					</v-button>
 				</template>
@@ -40,13 +28,7 @@
 				</v-card>
 			</v-dialog>
 
-			<v-button
-				rounded
-				icon
-				:loading="saving"
-				:disabled="hasEdits === false"
-				@click="saveAndQuit"
-			>
+			<v-button rounded icon :loading="saving" :disabled="hasEdits === false" @click="saveAndQuit">
 				<v-icon name="check" />
 
 				<template #append-outer>
@@ -75,21 +57,11 @@
 
 		<template #drawer>
 			<drawer-detail icon="info_outline" :title="$t('information')" close>
-				<div
-					class="format-markdown"
-					v-html="marked($t('page_help_settings_webhooks_detail'))"
-				/>
+				<div class="format-markdown" v-html="marked($t('page_help_settings_webhooks_detail'))" />
 			</drawer-detail>
-			<revisions-drawer-detail
-				v-if="isNew === false"
-				collection="directus_webhooks"
-				:primary-key="primaryKey"
-			/>
+			<revisions-drawer-detail v-if="isNew === false" collection="directus_webhooks" :primary-key="primaryKey" />
 			<drawer-detail icon="help_outline" :title="$t('help_and_docs')">
-				<div
-					class="format-markdown"
-					v-html="marked($t('page_help_collections_overview'))"
-				/>
+				<div class="format-markdown" v-html="marked($t('page_help_collections_overview'))" />
 			</drawer-detail>
 		</template>
 	</private-view>
@@ -123,19 +95,10 @@ export default defineComponent({
 		const { currentProjectKey } = toRefs(projectsStore.state);
 		const { primaryKey } = toRefs(props);
 
-		const {
-			isNew,
-			edits,
-			item,
-			saving,
-			loading,
-			error,
-			save,
-			remove,
-			deleting,
-			saveAsCopy,
-			isBatch,
-		} = useItem(ref('directus_webhooks'), primaryKey);
+		const { isNew, edits, item, saving, loading, error, save, remove, deleting, saveAsCopy, isBatch } = useItem(
+			ref('directus_webhooks'),
+			primaryKey
+		);
 
 		const hasEdits = computed<boolean>(() => Object.keys(edits.value).length > 0);
 
diff --git a/src/modules/users/routes/browse/browse.vue b/src/modules/users/routes/browse/browse.vue
index f9ff740066..df4c9d81fc 100644
--- a/src/modules/users/routes/browse/browse.vue
+++ b/src/modules/users/routes/browse/browse.vue
@@ -68,10 +68,7 @@
 			<layout-drawer-detail @input="viewType = $event" :value="viewType" />
 			<portal-target name="drawer" />
 			<drawer-detail icon="help_outline" :title="$t('help_and_docs')">
-				<div
-					class="format-markdown"
-					v-html="marked($t('page_help_collections_overview'))"
-				/>
+				<div class="format-markdown" v-html="marked($t('page_help_collections_overview'))" />
 			</drawer-detail>
 		</template>
 	</private-view>
@@ -109,9 +106,7 @@ export default defineComponent({
 
 		const selection = ref<Item[]>([]);
 
-		const { viewType, viewOptions, viewQuery, filters, searchQuery } = useCollectionPreset(
-			ref('directus_users')
-		);
+		const { viewType, viewOptions, viewQuery, filters, searchQuery } = useCollectionPreset(ref('directus_users'));
 		const { addNewLink, batchLink } = useLinks();
 		const { confirmDelete, deleting, batchDelete } = useBatchDelete();
 		const { breadcrumb } = useBreadcrumb();
diff --git a/src/modules/users/routes/detail/detail.vue b/src/modules/users/routes/detail/detail.vue
index c5823f17f8..59a877244f 100644
--- a/src/modules/users/routes/detail/detail.vue
+++ b/src/modules/users/routes/detail/detail.vue
@@ -13,13 +13,7 @@
 		<template #actions>
 			<v-dialog v-model="confirmDelete">
 				<template #activator="{ on }">
-					<v-button
-						rounded
-						icon
-						class="action-delete"
-						:disabled="item === null"
-						@click="on"
-					>
+					<v-button rounded icon class="action-delete" :disabled="item === null" @click="on">
 						<v-icon name="delete" />
 					</v-button>
 				</template>
@@ -38,13 +32,7 @@
 				</v-card>
 			</v-dialog>
 
-			<v-button
-				rounded
-				icon
-				:loading="saving"
-				:disabled="hasEdits === false"
-				@click="saveAndQuit"
-			>
+			<v-button rounded icon :loading="saving" :disabled="hasEdits === false" @click="saveAndQuit">
 				<v-icon name="check" />
 
 				<template #append-outer>
@@ -76,12 +64,8 @@
 						<v-skeleton-loader type="text" />
 					</template>
 					<template v-else>
-						<div class="name type-title">
-							{{ item.first_name }} {{ item.last_name }}
-						</div>
-						<div class="status-role" :class="item.status">
-							{{ $t(item.status) }} {{ roleName }}
-						</div>
+						<div class="name type-title">{{ item.first_name }} {{ item.last_name }}</div>
+						<div class="status-role" :class="item.status">{{ $t(item.status) }} {{ roleName }}</div>
 						<div class="email">{{ item.email }}</div>
 					</template>
 				</div>
@@ -126,10 +110,7 @@
 				:primary-key="primaryKey"
 			/>
 			<drawer-detail icon="help_outline" :title="$t('help_and_docs')">
-				<div
-					class="format-markdown"
-					v-html="marked($t('page_help_collections_overview'))"
-				/>
+				<div class="format-markdown" v-html="marked($t('page_help_collections_overview'))" />
 			</drawer-detail>
 		</template>
 	</private-view>
@@ -181,19 +162,10 @@ export default defineComponent({
 
 		const revisionsDrawerDetail = ref<Vue>(null);
 
-		const {
-			isNew,
-			edits,
-			item,
-			saving,
-			loading,
-			error,
-			save,
-			remove,
-			deleting,
-			saveAsCopy,
-			isBatch,
-		} = useItem(ref('directus_users'), primaryKey);
+		const { isNew, edits, item, saving, loading, error, save, remove, deleting, saveAsCopy, isBatch } = useItem(
+			ref('directus_users'),
+			primaryKey
+		);
 
 		const hasEdits = computed<boolean>(() => Object.keys(edits.value).length > 0);
 
@@ -302,14 +274,11 @@ export default defineComponent({
 				loading.value = true;
 
 				try {
-					const response = await api.get(
-						`/${currentProjectKey.value}/users/${props.primaryKey}`,
-						{
-							params: {
-								fields: ['role.name', 'avatar.data'],
-							},
-						}
-					);
+					const response = await api.get(`/${currentProjectKey.value}/users/${props.primaryKey}`, {
+						params: {
+							fields: ['role.name', 'avatar.data'],
+						},
+					});
 
 					avatarSrc.value = response.data.data.avatar?.data?.thumbnails?.find(
 						(thumb: any) => thumb.key === 'directus-medium-crop'
diff --git a/src/router.test.ts b/src/router.test.ts
index fd4beb8036..bbaa6a2e70 100644
--- a/src/router.test.ts
+++ b/src/router.test.ts
@@ -1,13 +1,7 @@
 import Vue from 'vue';
 import VueCompositionAPI from '@vue/composition-api';
 import { Route } from 'vue-router';
-import {
-	onBeforeEach,
-	onAfterEach,
-	onBeforeEnterProjectChooser,
-	replaceRoutes,
-	defaultRoutes,
-} from './router';
+import { onBeforeEach, onAfterEach, onBeforeEnterProjectChooser, replaceRoutes, defaultRoutes } from './router';
 import api from '@/api';
 import * as auth from '@/auth';
 import { useProjectsStore } from '@/stores/projects';
diff --git a/src/routes/install/install-database.vue b/src/routes/install/install-database.vue
index 81bb6670b7..cc9f94af48 100644
--- a/src/routes/install/install-database.vue
+++ b/src/routes/install/install-database.vue
@@ -67,13 +67,7 @@ export default defineComponent({
 		});
 
 		const nextEnabled = computed<boolean>(() => {
-			const requiredKeys: (keyof DatabaseInfo)[] = [
-				'db_host',
-				'db_name',
-				'db_port',
-				'db_user',
-				'db_password',
-			];
+			const requiredKeys: (keyof DatabaseInfo)[] = ['db_host', 'db_name', 'db_port', 'db_user', 'db_password'];
 
 			return !!requiredKeys.every(
 				// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
diff --git a/src/routes/install/install-project.vue b/src/routes/install/install-project.vue
index 0994a394ec..f35a051e39 100644
--- a/src/routes/install/install-project.vue
+++ b/src/routes/install/install-project.vue
@@ -71,12 +71,7 @@ export default defineComponent({
 		);
 
 		const nextEnabled = computed<boolean>(() => {
-			const requiredKeys: (keyof ProjectInfo)[] = [
-				'project_name',
-				'project',
-				'user_email',
-				'user_password',
-			];
+			const requiredKeys: (keyof ProjectInfo)[] = ['project_name', 'project', 'user_email', 'user_password'];
 
 			return !!requiredKeys.every(
 				// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
diff --git a/src/routes/install/install-requirements.vue b/src/routes/install/install-requirements.vue
index 1633cbaa22..567416b37f 100644
--- a/src/routes/install/install-requirements.vue
+++ b/src/routes/install/install-requirements.vue
@@ -88,9 +88,7 @@ export default defineComponent({
 					value: extensions.every((e) => e.enabled)
 						? i18n.t('php_extensions')
 						: i18n.t('missing_value', {
-								value: extensions
-									.filter((e) => e.enabled === false)
-									.map((e) => e.key),
+								value: extensions.filter((e) => e.enabled === false).map((e) => e.key),
 						  }),
 				},
 				{
@@ -127,9 +125,7 @@ export default defineComponent({
 						: null,
 				});
 
-				const ghResponse = await api.get(
-					'https://api.github.com/repos/directus/directus/tags'
-				);
+				const ghResponse = await api.get('https://api.github.com/repos/directus/directus/tags');
 
 				serverInfo.value = infoResponse.data.data;
 				lastTag.value = ghResponse.data[0].name;
diff --git a/src/routes/install/install-welcome.vue b/src/routes/install/install-welcome.vue
index f3fe26b1d0..df78fceff6 100644
--- a/src/routes/install/install-welcome.vue
+++ b/src/routes/install/install-welcome.vue
@@ -10,12 +10,7 @@
 		<h1 class="pane-title type-title">{{ $t('create_new_project') }}</h1>
 		<div class="pane-content">
 			{{ $t('create_new_project_copy') }}
-			<v-input
-				@input="setToken"
-				:value="token"
-				:placeholder="$t('super_admin_token')"
-				class="token"
-			>
+			<v-input @input="setToken" :value="token" :placeholder="$t('super_admin_token')" class="token">
 				<template #append>
 					<v-progress-circular indeterminate v-if="verifying" />
 					<v-icon
diff --git a/src/routes/install/install.vue b/src/routes/install/install.vue
index c05389ffa0..5cd5802b01 100644
--- a/src/routes/install/install.vue
+++ b/src/routes/install/install.vue
@@ -5,28 +5,13 @@
 				<install-welcome :first="first" @next="nextPane" v-model="token" />
 			</v-tab-item>
 			<v-tab-item value="requirements">
-				<install-requirements
-					:token="token"
-					:first="first"
-					@prev="prevPane"
-					@next="nextPane"
-				/>
+				<install-requirements :token="token" :first="first" @prev="prevPane" @next="nextPane" />
 			</v-tab-item>
 			<v-tab-item value="project">
-				<install-project
-					:first="first"
-					v-model="projectInfo"
-					@prev="prevPane"
-					@next="nextPane"
-				/>
+				<install-project :first="first" v-model="projectInfo" @prev="prevPane" @next="nextPane" />
 			</v-tab-item>
 			<v-tab-item value="database">
-				<install-database
-					v-model="databaseInfo"
-					:first="first"
-					@prev="prevPane"
-					@next="nextPane"
-				/>
+				<install-database v-model="databaseInfo" :first="first" @prev="prevPane" @next="nextPane" />
 			</v-tab-item>
 			<v-tab-item value="final">
 				<install-final
diff --git a/src/routes/login/components/login-form/login-form.vue b/src/routes/login/components/login-form/login-form.vue
index c1d184ba2a..1bf1efbb43 100644
--- a/src/routes/login/components/login-form/login-form.vue
+++ b/src/routes/login/components/login-form/login-form.vue
@@ -1,18 +1,7 @@
 <template>
 	<form @submit.prevent="onSubmit">
-		<v-input
-			autofocus
-			autocomplete="username"
-			type="email"
-			v-model="email"
-			:placeholder="$t('email')"
-		/>
-		<v-input
-			type="password"
-			autocomplete="current-password"
-			v-model="password"
-			:placeholder="$t('password')"
-		/>
+		<v-input autofocus autocomplete="username" type="email" v-model="email" :placeholder="$t('email')" />
+		<v-input type="password" autocomplete="current-password" v-model="password" :placeholder="$t('password')" />
 
 		<transition-expand>
 			<v-input type="text" :placeholder="$t('otp')" v-if="requiresTFA" v-model="otp" />
@@ -98,16 +87,13 @@ export default defineComponent({
 		});
 
 		const ssoProviders = computed(() => {
-			const redirectURL =
-				getRootPath() + `admin/${projectsStore.state.currentProjectKey}/login`;
-			return projectsStore.currentProject.value.sso.map(
-				(provider: { icon: string; name: string }) => {
-					return {
-						...provider,
-						link: `/${projectsStore.state.currentProjectKey}/auth/sso/${provider.name}?mode=cookie&redirect_url=${redirectURL}`,
-					};
-				}
-			);
+			const redirectURL = getRootPath() + `admin/${projectsStore.state.currentProjectKey}/login`;
+			return projectsStore.currentProject.value.sso.map((provider: { icon: string; name: string }) => {
+				return {
+					...provider,
+					link: `/${projectsStore.state.currentProjectKey}/auth/sso/${provider.name}?mode=cookie&redirect_url=${redirectURL}`,
+				};
+			});
 		});
 
 		return {
diff --git a/src/routes/project-chooser/project-chooser.vue b/src/routes/project-chooser/project-chooser.vue
index d7d153395a..ffe15569ed 100644
--- a/src/routes/project-chooser/project-chooser.vue
+++ b/src/routes/project-chooser/project-chooser.vue
@@ -1,16 +1,7 @@
 <template>
 	<public-view>
-		<router-link
-			class="project"
-			v-for="project in projects"
-			:to="project.link"
-			:key="project.key"
-		>
-			<div
-				class="logo"
-				v-if="project && project.logo"
-				:style="{ backgroundColor: project.color }"
-			>
+		<router-link class="project" v-for="project in projects" :to="project.link" :key="project.key">
+			<div class="logo" v-if="project && project.logo" :style="{ backgroundColor: project.color }">
 				<img :src="project.logo" :alt="project.name || project.key" />
 			</div>
 			<img v-else class="default-logo" src="@/assets/logo-dark.svg" alt="Directus" />
diff --git a/src/routes/reset-password/request.vue b/src/routes/reset-password/request.vue
index 6c8bfcb9dc..f5c093ecab 100644
--- a/src/routes/reset-password/request.vue
+++ b/src/routes/reset-password/request.vue
@@ -1,12 +1,6 @@
 <template>
 	<form @submit.prevent="onSubmit">
-		<v-input
-			autofocus
-			autocomplete="username"
-			type="email"
-			v-model="email"
-			:placeholder="$t('email')"
-		/>
+		<v-input autofocus autocomplete="username" type="email" v-model="email" :placeholder="$t('email')" />
 		<v-notice type="success" v-if="done">{{ $t('password_reset_sent') }}</v-notice>
 		<v-notice type="danger" v-if="error">
 			{{ errorFormatted }}
diff --git a/src/stores/collection-presets/collection-presets.ts b/src/stores/collection-presets/collection-presets.ts
index f0eeb140e4..f90bb92dbb 100644
--- a/src/stores/collection-presets/collection-presets.ts
+++ b/src/stores/collection-presets/collection-presets.ts
@@ -58,10 +58,7 @@ export const useCollectionPresetsStore = createStore({
 		async update(id: number, updates: Partial<CollectionPreset>) {
 			const { currentProjectKey } = useProjectsStore().state;
 
-			const response = await api.patch(
-				`/${currentProjectKey}/collection_presets/${id}`,
-				updates
-			);
+			const response = await api.patch(`/${currentProjectKey}/collection_presets/${id}`, updates);
 
 			this.state.collectionPresets = this.state.collectionPresets.map((preset) => {
 				const updatedPreset = response.data.data;
diff --git a/src/stores/collections/collections.ts b/src/stores/collections/collections.ts
index b17454210f..bde42485b7 100644
--- a/src/stores/collections/collections.ts
+++ b/src/stores/collections/collections.ts
@@ -100,11 +100,7 @@ export const useCollectionsStore = createStore({
 			}
 		},
 		getCollection(collectionKey: string) {
-			return (
-				this.state.collections.find(
-					(collection) => collection.collection === collectionKey
-				) || null
-			);
+			return this.state.collections.find((collection) => collection.collection === collectionKey) || null;
 		},
 	},
 });
diff --git a/src/stores/fields/fields.ts b/src/stores/fields/fields.ts
index 77adef350a..9fe1c487da 100644
--- a/src/stores/fields/fields.ts
+++ b/src/stores/fields/fields.ts
@@ -123,10 +123,7 @@ export const useFieldsStore = createStore({
 			// Save to API, and update local state again to make sure everything is in sync with the
 			// API
 			try {
-				const response = await api.post(
-					`/${currentProjectKey}/fields/${collectionKey}`,
-					newField
-				);
+				const response = await api.post(`/${currentProjectKey}/fields/${collectionKey}`, newField);
 
 				this.state.fields = this.state.fields.map((field) => {
 					if (field.collection === collectionKey && field.field === newField.field) {
@@ -151,11 +148,7 @@ export const useFieldsStore = createStore({
 				throw error;
 			}
 		},
-		async updateField(
-			collectionKey: string,
-			fieldKey: string,
-			updates: Record<string, Partial<Field>>
-		) {
+		async updateField(collectionKey: string, fieldKey: string, updates: Record<string, Partial<Field>>) {
 			const projectsStore = useProjectsStore();
 			const currentProjectKey = projectsStore.state.currentProjectKey;
 
@@ -176,10 +169,7 @@ export const useFieldsStore = createStore({
 			// Save to API, and update local state again to make sure everything is in sync with the
 			// API
 			try {
-				const response = await api.patch(
-					`/${currentProjectKey}/fields/${collectionKey}/${fieldKey}`,
-					updates
-				);
+				const response = await api.patch(`/${currentProjectKey}/fields/${collectionKey}/${fieldKey}`, updates);
 
 				this.state.fields = this.state.fields.map((field) => {
 					if (field.collection === collectionKey && field.field === fieldKey) {
@@ -212,9 +202,7 @@ export const useFieldsStore = createStore({
 			// Update locally first, so the changes are visible immediately
 			this.state.fields = this.state.fields.map((field) => {
 				if (field.collection === collectionKey) {
-					const updatesForThisField = updates.find(
-						(update) => update.field === field.field
-					);
+					const updatesForThisField = updates.find((update) => update.field === field.field);
 
 					if (updatesForThisField) {
 						return {
@@ -230,10 +218,7 @@ export const useFieldsStore = createStore({
 			try {
 				// Save to API, and update local state again to make sure everything is in sync with the
 				// API
-				const response = await api.patch(
-					`/${currentProjectKey}/fields/${collectionKey}`,
-					updates
-				);
+				const response = await api.patch(`/${currentProjectKey}/fields/${collectionKey}`, updates);
 
 				this.state.fields = this.state.fields.map((field) => {
 					if (field.collection === collectionKey) {
@@ -304,9 +289,7 @@ export const useFieldsStore = createStore({
 			if (fieldKey.includes('.')) {
 				return this.getRelationalField(collection, fieldKey);
 			} else {
-				return this.state.fields.find(
-					(field) => field.collection === collection && field.field === fieldKey
-				);
+				return this.state.fields.find((field) => field.collection === collection && field.field === fieldKey);
 			}
 		},
 		/**
diff --git a/src/stores/permissions/permissions.ts b/src/stores/permissions/permissions.ts
index df89b2aa63..7edf434214 100644
--- a/src/stores/permissions/permissions.ts
+++ b/src/stores/permissions/permissions.ts
@@ -41,9 +41,7 @@ export const usePermissionsStore = createStore({
 
 			if (userStore.isAdmin.value) return defaultAdminPermission;
 
-			const permissions = this.state.permissions.filter(
-				(permission) => permission.collection === collection
-			);
+			const permissions = this.state.permissions.filter((permission) => permission.collection === collection);
 
 			return permissions ? permissions : defaultPermission;
 		},
diff --git a/src/stores/projects/projects.test.ts b/src/stores/projects/projects.test.ts
index 174f1c5ed9..a24e5f6c59 100644
--- a/src/stores/projects/projects.test.ts
+++ b/src/stores/projects/projects.test.ts
@@ -21,9 +21,7 @@ describe('Stores / Projects', () => {
 
 		it('Retrieves project information for given project key', async () => {
 			const projectsStore = useProjectsStore({});
-			const spy = jest
-				.spyOn(api, 'get')
-				.mockImplementation(() => Promise.resolve({ data: { data: {} } }));
+			const spy = jest.spyOn(api, 'get').mockImplementation(() => Promise.resolve({ data: { data: {} } }));
 			await projectsStore.setCurrentProject('my-project');
 			expect(spy).toHaveBeenCalledWith('/my-project/');
 			expect(projectsStore.state.currentProjectKey).toBe('my-project');
@@ -31,9 +29,7 @@ describe('Stores / Projects', () => {
 
 		it('Adds the returned project info the the state ', async () => {
 			const projectsStore = useProjectsStore({});
-			const spy = jest
-				.spyOn(api, 'get')
-				.mockImplementation(() => Promise.resolve({ data: { data: {} } }));
+			const spy = jest.spyOn(api, 'get').mockImplementation(() => Promise.resolve({ data: { data: {} } }));
 			await projectsStore.setCurrentProject('my-project');
 			expect(spy).toHaveBeenCalledWith('/my-project/');
 			expect(projectsStore.state.projects?.[0]).toEqual({ key: 'my-project' });
@@ -41,9 +37,7 @@ describe('Stores / Projects', () => {
 
 		it('Returns true if the project exists', async () => {
 			const projectsStore = useProjectsStore({});
-			jest.spyOn(api, 'get').mockImplementation(() =>
-				Promise.resolve({ data: { data: {} } })
-			);
+			jest.spyOn(api, 'get').mockImplementation(() => Promise.resolve({ data: { data: {} } }));
 			const result = await projectsStore.setCurrentProject('my-project');
 			expect(result).toBe(true);
 		});
diff --git a/src/stores/projects/projects.ts b/src/stores/projects/projects.ts
index ac43b2032b..fbeba73142 100644
--- a/src/stores/projects/projects.ts
+++ b/src/stores/projects/projects.ts
@@ -33,11 +33,7 @@ export const useProjectsStore = createStore({
 			});
 		},
 		currentProject: (state, getters) => {
-			return (
-				getters.formatted.value?.find(
-					({ key }: { key: string }) => key === state.currentProjectKey
-				) || null
-			);
+			return getters.formatted.value?.find(({ key }: { key: string }) => key === state.currentProjectKey) || null;
 		},
 	},
 	actions: {
@@ -95,8 +91,7 @@ export const useProjectsStore = createStore({
 						projects.push({
 							key: projectKeys[index],
 							...projectInfoResponse.data.data,
-							authenticated:
-								projectInfoResponse?.data?.data?.hasOwnProperty('server') || false,
+							authenticated: projectInfoResponse?.data?.data?.hasOwnProperty('server') || false,
 						});
 					} catch (error) {
 						/* istanbul ignore next */
diff --git a/src/stores/relations/relations.ts b/src/stores/relations/relations.ts
index c5a7b9aad7..cee2b2bc97 100644
--- a/src/stores/relations/relations.ts
+++ b/src/stores/relations/relations.ts
@@ -23,10 +23,7 @@ export const useRelationsStore = createStore({
 		},
 		getRelationsForCollection(collection: string) {
 			return this.state.relations.filter((relation) => {
-				return (
-					relation.collection_many === collection ||
-					relation.collection_one === collection
-				);
+				return relation.collection_many === collection || relation.collection_one === collection;
 			});
 		},
 		getRelationsForField(collection: string, field: string) {
diff --git a/src/stores/settings/settings.ts b/src/stores/settings/settings.ts
index d6b49163ee..7457dd0d59 100644
--- a/src/stores/settings/settings.ts
+++ b/src/stores/settings/settings.ts
@@ -57,9 +57,7 @@ export const useSettingsStore = createStore({
 			});
 
 			this.state.settings = this.state.settings.map((existingSetting) => {
-				const updated = settingsToBeSaved.find(
-					(update) => update.id === existingSetting.id
-				);
+				const updated = settingsToBeSaved.find((update) => update.id === existingSetting.id);
 
 				if (updated !== undefined) {
 					return {
@@ -72,15 +70,10 @@ export const useSettingsStore = createStore({
 			});
 
 			try {
-				const response = await api.patch(
-					`/${currentProjectKey}/settings`,
-					settingsToBeSaved
-				);
+				const response = await api.patch(`/${currentProjectKey}/settings`, settingsToBeSaved);
 
 				this.state.settings = this.state.settings.map((setting) => {
-					const updated = response.data.data.find(
-						(update: any) => update.id === setting.id
-					);
+					const updated = response.data.data.find((update: any) => update.id === setting.id);
 
 					if (updated !== undefined) {
 						return {
diff --git a/src/utils/adjust-fields-for-displays/adjust-fields-for-displays.ts b/src/utils/adjust-fields-for-displays/adjust-fields-for-displays.ts
index 442453218a..ffc7b33b84 100644
--- a/src/utils/adjust-fields-for-displays/adjust-fields-for-displays.ts
+++ b/src/utils/adjust-fields-for-displays/adjust-fields-for-displays.ts
@@ -2,10 +2,7 @@ import useFieldsStore from '@/stores/fields';
 import displays from '@/displays';
 import { Field } from '@/stores/fields/types';
 
-export default function adjustFieldsForDisplays(
-	fields: readonly string[],
-	parentCollection: string
-) {
+export default function adjustFieldsForDisplays(fields: readonly string[], parentCollection: string) {
 	const fieldsStore = useFieldsStore();
 
 	const adjustedFields: string[] = fields
@@ -20,9 +17,7 @@ export default function adjustFieldsForDisplays(
 			if (!display?.fields) return fieldKey;
 
 			if (Array.isArray(display.fields)) {
-				return display.fields.map(
-					(relatedFieldKey: string) => `${fieldKey}.${relatedFieldKey}`
-				);
+				return display.fields.map((relatedFieldKey: string) => `${fieldKey}.${relatedFieldKey}`);
 			}
 
 			if (typeof display.fields === 'function') {
diff --git a/src/utils/arrays-are-equal/arrays-are-equal.ts b/src/utils/arrays-are-equal/arrays-are-equal.ts
index 44328422a4..85ae0d0dfd 100644
--- a/src/utils/arrays-are-equal/arrays-are-equal.ts
+++ b/src/utils/arrays-are-equal/arrays-are-equal.ts
@@ -1,7 +1,4 @@
-export default function arraysAreEqual(
-	a1: readonly (string | number)[],
-	a2: readonly (string | number)[]
-) {
+export default function arraysAreEqual(a1: readonly (string | number)[], a2: readonly (string | number)[]) {
 	const superSet: {
 		[key: string]: number;
 	} = {};
diff --git a/src/utils/localized-format-distance/localized-format-distance.ts b/src/utils/localized-format-distance/localized-format-distance.ts
index 2dd0c9e5bc..f31f94779a 100644
--- a/src/utils/localized-format-distance/localized-format-distance.ts
+++ b/src/utils/localized-format-distance/localized-format-distance.ts
@@ -3,11 +3,7 @@ import getDateFNSLocale from '@/utils/get-date-fns-locale';
 
 type LocalizedFormatDistance = (...a: Parameters<typeof formatDistanceOriginal>) => Promise<string>;
 
-export const localizedFormatDistance: LocalizedFormatDistance = async (
-	date,
-	baseDate,
-	options
-): Promise<string> => {
+export const localizedFormatDistance: LocalizedFormatDistance = async (date, baseDate, options): Promise<string> => {
 	return formatDistanceOriginal(date, baseDate, {
 		...options,
 		locale: await getDateFNSLocale(),
diff --git a/src/utils/set-favicon/set-favicon.ts b/src/utils/set-favicon/set-favicon.ts
index aca24c34dc..dd7c18b513 100644
--- a/src/utils/set-favicon/set-favicon.ts
+++ b/src/utils/set-favicon/set-favicon.ts
@@ -20,8 +20,7 @@ export default function setFavicon(color = '#2f80ed') {
 
 	const string = 'data:image/svg+xml;base64,' + window.btoa(iconSerialized);
 
-	const link: HTMLLinkElement =
-		document.querySelector("link[rel*='icon']") || document.createElement('link');
+	const link: HTMLLinkElement = document.querySelector("link[rel*='icon']") || document.createElement('link');
 	link.type = 'image/x-icon';
 	link.rel = 'icon';
 	link.href = string;
diff --git a/src/utils/translate-shortcut/translate-shortcut.ts b/src/utils/translate-shortcut/translate-shortcut.ts
index e9dd962389..3680e26969 100644
--- a/src/utils/translate-shortcut/translate-shortcut.ts
+++ b/src/utils/translate-shortcut/translate-shortcut.ts
@@ -1,8 +1,7 @@
 import capitalizeFirst from '@/utils/capitalize-first';
 
 export default function translateShortcut(keys: string[]) {
-	const isMac =
-		navigator.platform.toLowerCase().startsWith('mac') || navigator.platform.startsWith('iP');
+	const isMac = navigator.platform.toLowerCase().startsWith('mac') || navigator.platform.startsWith('iP');
 
 	if (isMac) {
 		return keys
diff --git a/src/utils/upload-files/upload-files.ts b/src/utils/upload-files/upload-files.ts
index 22a3c0e048..e8769339c7 100644
--- a/src/utils/upload-files/upload-files.ts
+++ b/src/utils/upload-files/upload-files.ts
@@ -2,10 +2,7 @@ import uploadFile from '@/utils/upload-file';
 import notify from '@/utils/notify';
 import i18n from '@/lang';
 
-export default async function uploadFiles(
-	files: File[],
-	onProgressChange?: (percentages: number[]) => void
-) {
+export default async function uploadFiles(files: File[], onProgressChange?: (percentages: number[]) => void) {
 	const progressHandler = onProgressChange || (() => undefined);
 
 	const progressForFiles = files.map(() => 0);
diff --git a/src/views/private/components/comments-drawer-detail/comment-input.vue b/src/views/private/components/comments-drawer-detail/comment-input.vue
index a6353fec07..8b03844ab0 100644
--- a/src/views/private/components/comments-drawer-detail/comment-input.vue
+++ b/src/views/private/components/comments-drawer-detail/comment-input.vue
@@ -1,10 +1,5 @@
 <template>
-	<v-textarea
-		class="new-comment"
-		:placeholder="$t('leave_comment')"
-		v-model="newCommentContent"
-		expand-on-focus
-	>
+	<v-textarea class="new-comment" :placeholder="$t('leave_comment')" v-model="newCommentContent" expand-on-focus>
 		<template #append>
 			<v-icon name="alternate_email" class="add-mention" />
 			<v-icon name="insert_emoticon" class="add-emoji" />
diff --git a/src/views/private/components/comments-drawer-detail/comment-item-header.vue b/src/views/private/components/comments-drawer-detail/comment-item-header.vue
index e0d86c0f0d..c9fe03d74d 100644
--- a/src/views/private/components/comments-drawer-detail/comment-item-header.vue
+++ b/src/views/private/components/comments-drawer-detail/comment-item-header.vue
@@ -10,10 +10,7 @@
 		</v-avatar>
 
 		<div class="name">
-			<user-popover
-				v-if="activity.action_by && activity.action_by.id"
-				:user="activity.action_by.id"
-			>
+			<user-popover v-if="activity.action_by && activity.action_by.id" :user="activity.action_by.id">
 				<span>
 					<template v-if="activity.action_by && activity.action_by">
 						{{ activity.action_by.first_name }} {{ activity.action_by.last_name }}
@@ -31,11 +28,7 @@
 				<template #activator="{ toggle, active }">
 					<v-icon class="more" :class="{ active }" name="more_horiz" @click="toggle" />
 					<div class="time">
-						<span
-							class="dot"
-							v-if="activity.edited_on !== null"
-							v-tooltip="editedOnFormatted"
-						/>
+						<span class="dot" v-if="activity.edited_on !== null" v-tooltip="editedOnFormatted" />
 						{{ formattedTime }}
 					</div>
 				</template>
@@ -121,9 +114,8 @@ export default defineComponent({
 			if (!props.activity.action_by?.avatar) return null;
 
 			return (
-				props.activity.action_by.avatar.data.thumbnails.find(
-					(thumb) => thumb.key === 'directus-small-crop'
-				)?.url || null
+				props.activity.action_by.avatar.data.thumbnails.find((thumb) => thumb.key === 'directus-small-crop')
+					?.url || null
 			);
 		});
 
diff --git a/src/views/private/components/comments-drawer-detail/comment-item.vue b/src/views/private/components/comments-drawer-detail/comment-item.vue
index ca22718a6b..9fc4430c46 100644
--- a/src/views/private/components/comments-drawer-detail/comment-item.vue
+++ b/src/views/private/components/comments-drawer-detail/comment-item.vue
@@ -9,12 +9,7 @@
 						{{ $t('cancel') }}
 					</v-button>
 
-					<v-button
-						:loading="savingEdits"
-						class="post-comment"
-						@click="saveEdits"
-						x-small
-					>
+					<v-button :loading="savingEdits" class="post-comment" @click="saveEdits" x-small>
 						{{ $t('save') }}
 					</v-button>
 				</div>
@@ -55,9 +50,7 @@ export default defineComponent({
 	setup(props) {
 		const projectsStore = useProjectsStore();
 
-		const htmlContent = computed(() =>
-			props.activity.comment ? marked(props.activity.comment) : null
-		);
+		const htmlContent = computed(() => (props.activity.comment ? marked(props.activity.comment) : null));
 
 		const { edits, editing, savingEdits, saveEdits, cancelEditing } = useEdits();
 
@@ -190,8 +183,7 @@ export default defineComponent({
 					font-size: 12px;
 					background-color: var(--background-normal);
 					border-radius: 12px;
-					transition: color var(--fast) var(--transition),
-						background-color var(--fast) var(--transition);
+					transition: color var(--fast) var(--transition), background-color var(--fast) var(--transition);
 				}
 
 				&:hover span {
diff --git a/src/views/private/components/comments-drawer-detail/comments-drawer-detail.vue b/src/views/private/components/comments-drawer-detail/comments-drawer-detail.vue
index 841573bc3d..5cad7a8b7c 100644
--- a/src/views/private/components/comments-drawer-detail/comments-drawer-detail.vue
+++ b/src/views/private/components/comments-drawer-detail/comments-drawer-detail.vue
@@ -51,10 +51,7 @@ export default defineComponent({
 	setup(props) {
 		const projectsStore = useProjectsStore();
 
-		const { activity, loading, error, refresh } = useActivity(
-			props.collection,
-			props.primaryKey
-		);
+		const { activity, loading, error, refresh } = useActivity(props.collection, props.primaryKey);
 
 		return {
 			activity,
@@ -77,29 +74,26 @@ export default defineComponent({
 				loading.value = true;
 
 				try {
-					const response = await api.get(
-						`/${projectsStore.state.currentProjectKey}/activity`,
-						{
-							params: {
-								'filter[collection][eq]': collection,
-								'filter[item][eq]': primaryKey,
-								'filter[action][in]': 'comment',
-								'filter[comment_deleted_on][null]': 1,
-								sort: '-id', // directus_activity has auto increment and is therefore in chronological order
-								fields: [
-									'id',
-									'action',
-									'action_on',
-									'action_by.id',
-									'action_by.first_name',
-									'action_by.last_name',
-									'action_by.avatar.data',
-									'comment',
-									'edited_on',
-								],
-							},
-						}
-					);
+					const response = await api.get(`/${projectsStore.state.currentProjectKey}/activity`, {
+						params: {
+							'filter[collection][eq]': collection,
+							'filter[item][eq]': primaryKey,
+							'filter[action][in]': 'comment',
+							'filter[comment_deleted_on][null]': 1,
+							sort: '-id', // directus_activity has auto increment and is therefore in chronological order
+							fields: [
+								'id',
+								'action',
+								'action_on',
+								'action_by.id',
+								'action_by.first_name',
+								'action_by.last_name',
+								'action_by.avatar.data',
+								'comment',
+								'edited_on',
+							],
+						},
+					});
 
 					const activityByDate = groupBy(response.data.data, (activity: Activity) => {
 						// activity's action_on date is in iso-8601
@@ -120,15 +114,8 @@ export default defineComponent({
 						if (today) dateFormatted = i18n.t('today');
 						else if (yesterday) dateFormatted = i18n.t('yesterday');
 						else if (thisYear)
-							dateFormatted = await formatLocalized(
-								date,
-								String(i18n.t('date-fns_date_short_no_year'))
-							);
-						else
-							dateFormatted = await formatLocalized(
-								date,
-								String(i18n.t('date-fns_date_short'))
-							);
+							dateFormatted = await formatLocalized(date, String(i18n.t('date-fns_date_short_no_year')));
+						else dateFormatted = await formatLocalized(date, String(i18n.t('date-fns_date_short')));
 
 						activityGrouped.push({
 							date: date,
diff --git a/src/views/private/components/filter-drawer-detail/field-filter.vue b/src/views/private/components/filter-drawer-detail/field-filter.vue
index 794720ae34..37d7cf97e0 100644
--- a/src/views/private/components/filter-drawer-detail/field-filter.vue
+++ b/src/views/private/components/filter-drawer-detail/field-filter.vue
@@ -28,12 +28,7 @@
 			<v-icon class="remove" name="close" @click="$emit('remove')" />
 		</div>
 		<div class="field">
-			<filter-input
-				v-model="value"
-				:type="parsedField.type"
-				:operator="activeOperator"
-				:disabled="disabled"
-			/>
+			<filter-input v-model="value" :type="parsedField.type" :operator="activeOperator" :disabled="disabled" />
 		</div>
 	</div>
 </template>
diff --git a/src/views/private/components/filter-drawer-detail/filter-drawer-detail.vue b/src/views/private/components/filter-drawer-detail/filter-drawer-detail.vue
index b6b96f9422..dd89b7a6c6 100644
--- a/src/views/private/components/filter-drawer-detail/filter-drawer-detail.vue
+++ b/src/views/private/components/filter-drawer-detail/filter-drawer-detail.vue
@@ -18,13 +18,7 @@
 
 		<v-menu attached close-on-content-click :disabled="loading">
 			<template #activator="{ toggle, active }">
-				<v-input
-					@click="toggle"
-					:class="{ active }"
-					readonly
-					:value="$t('add_filter')"
-					:disabled="loading"
-				>
+				<v-input @click="toggle" :class="{ active }" readonly :value="$t('add_filter')" :disabled="loading">
 					<template #prepend><v-icon name="add" /></template>
 					<template #append><v-icon name="expand_more" /></template>
 				</v-input>
@@ -78,10 +72,7 @@ export default defineComponent({
 		const fieldTree = computed<FieldTree[]>(() => {
 			return fieldsStore
 				.getFieldsForCollection(props.collection)
-				.filter(
-					(field: Field) =>
-						field.hidden_browse === false && field.type.toLowerCase() !== 'alias'
-				)
+				.filter((field: Field) => field.hidden_browse === false && field.type.toLowerCase() !== 'alias')
 				.map((field: Field) => parseField(field, []));
 
 			function parseField(field: Field, parents: Field[]) {
@@ -94,10 +85,7 @@ export default defineComponent({
 					return fieldInfo;
 				}
 
-				const relations = relationsStore.getRelationsForField(
-					field.collection,
-					field.field
-				);
+				const relations = relationsStore.getRelationsForField(field.collection, field.field);
 
 				if (relations.length > 0) {
 					const relatedFields = relations
@@ -113,8 +101,7 @@ export default defineComponent({
 								.getFieldsForCollection(relatedCollection)
 								.filter(
 									(field: Field) =>
-										field.hidden_browse === false &&
-										field.type.toLowerCase() !== 'alias'
+										field.hidden_browse === false && field.type.toLowerCase() !== 'alias'
 								);
 						})
 						.flat()
diff --git a/src/views/private/components/filter-drawer-detail/filter-input.vue b/src/views/private/components/filter-drawer-detail/filter-input.vue
index e38be3fcb9..a666e99169 100644
--- a/src/views/private/components/filter-drawer-detail/filter-input.vue
+++ b/src/views/private/components/filter-drawer-detail/filter-input.vue
@@ -45,13 +45,7 @@
 		</template>
 		<template v-else-if="['empty', 'nempty'].includes(operator) === false">
 			<v-checkbox v-if="type === 'checkbox'" :inputValue="_value" :disabled="disabled" />
-			<v-input
-				:disabled="disabled"
-				v-else
-				v-model="_value"
-				:type="type"
-				:placeholder="$t('enter_a_value')"
-			/>
+			<v-input :disabled="disabled" v-else v-model="_value" :type="type" :placeholder="$t('enter_a_value')" />
 		</template>
 	</div>
 </template>
diff --git a/src/views/private/components/header-bar-actions/header-bar-actions.vue b/src/views/private/components/header-bar-actions/header-bar-actions.vue
index fb72f59676..441e546e46 100644
--- a/src/views/private/components/header-bar-actions/header-bar-actions.vue
+++ b/src/views/private/components/header-bar-actions/header-bar-actions.vue
@@ -8,14 +8,7 @@
 			<slot />
 		</div>
 
-		<v-button
-			class="drawer-toggle"
-			icon
-			rounded
-			secondary
-			outlined
-			@click="$emit('toggle:drawer')"
-		>
+		<v-button class="drawer-toggle" icon rounded secondary outlined @click="$emit('toggle:drawer')">
 			<v-icon name="info" />
 		</v-button>
 	</div>
diff --git a/src/views/private/components/image-editor/image-editor.vue b/src/views/private/components/image-editor/image-editor.vue
index d2908ea2a5..90afbe9746 100644
--- a/src/views/private/components/image-editor/image-editor.vue
+++ b/src/views/private/components/image-editor/image-editor.vue
@@ -16,18 +16,9 @@
 			error
 		</v-notice>
 
-		<div
-			v-show="imageData && imageData.data.full_url && !loading && !error"
-			class="editor-container"
-		>
+		<div v-show="imageData && imageData.data.full_url && !loading && !error" class="editor-container">
 			<div class="editor">
-				<img
-					ref="imageElement"
-					:src="imageURL"
-					role="presentation"
-					alt=""
-					@load="onImageLoad"
-				/>
+				<img ref="imageElement" :src="imageURL" role="presentation" alt="" @load="onImageLoad" />
 			</div>
 
 			<div class="toolbar">
@@ -40,11 +31,7 @@
 					<v-icon name="crop" :class="{ active: dragMode === 'crop' }" />
 				</div>
 
-				<v-icon
-					name="rotate_90_degrees_ccw"
-					@click="rotate"
-					v-tooltip.bottom.inverted="$t('rotate')"
-				/>
+				<v-icon name="rotate_90_degrees_ccw" @click="rotate" v-tooltip.bottom.inverted="$t('rotate')" />
 
 				<v-icon
 					name="flip_horizontal"
@@ -182,16 +169,7 @@ export default defineComponent({
 			},
 		});
 
-		const {
-			loading,
-			error,
-			imageData,
-			imageElement,
-			save,
-			saving,
-			fetchImage,
-			onImageLoad,
-		} = useImage();
+		const { loading, error, imageData, imageElement, save, saving, fetchImage, onImageLoad } = useImage();
 
 		const {
 			cropperInstance,
@@ -268,14 +246,7 @@ export default defineComponent({
 					loading.value = true;
 					const response = await api.get(`/${currentProjectKey}/files/${props.id}`, {
 						params: {
-							fields: [
-								'data',
-								'type',
-								'filesize',
-								'filename_download',
-								'width',
-								'height',
-							],
+							fields: ['data', 'type', 'filesize', 'filename_download', 'width', 'height'],
 						},
 					});
 
@@ -425,10 +396,7 @@ export default defineComponent({
 					crop: throttle((event) => {
 						if (!imageData.value) return;
 
-						if (
-							cropping.value === false &&
-							(event.detail.width || event.detail.height)
-						) {
+						if (cropping.value === false && (event.detail.width || event.detail.height)) {
 							cropping.value = true;
 						}
 
diff --git a/src/views/private/components/modal-browse/modal-browse.vue b/src/views/private/components/modal-browse/modal-browse.vue
index 70bdd4b0d6..eb182d7b30 100644
--- a/src/views/private/components/modal-browse/modal-browse.vue
+++ b/src/views/private/components/modal-browse/modal-browse.vue
@@ -19,14 +19,7 @@
 </template>
 
 <script lang="ts">
-import {
-	defineComponent,
-	PropType,
-	ref,
-	computed,
-	toRefs,
-	onUnmounted,
-} from '@vue/composition-api';
+import { defineComponent, PropType, ref, computed, toRefs, onUnmounted } from '@vue/composition-api';
 import { Filter } from '@/stores/collection-presets/types';
 import useCollectionPreset from '@/composables/use-collection-preset';
 
diff --git a/src/views/private/components/module-bar-logo/module-bar-logo.story.ts b/src/views/private/components/module-bar-logo/module-bar-logo.story.ts
index 7020bbbe5e..998d170a76 100644
--- a/src/views/private/components/module-bar-logo/module-bar-logo.story.ts
+++ b/src/views/private/components/module-bar-logo/module-bar-logo.story.ts
@@ -56,10 +56,8 @@ export const withCustomLogo = () =>
 						project_logo: {
 							full_url:
 								'https://demo.directus.io/uploads/thumper/originals/19acff06-4969-5c75-9cd5-dc3f27506de2.svg',
-							url:
-								'/uploads/thumper/originals/19acff06-4969-5c75-9cd5-dc3f27506de2.svg',
-							asset_url:
-								'/uploads/thumper/originals/19acff06-4969-5c75-9cd5-dc3f27506de2.svg',
+							url: '/uploads/thumper/originals/19acff06-4969-5c75-9cd5-dc3f27506de2.svg',
+							asset_url: '/uploads/thumper/originals/19acff06-4969-5c75-9cd5-dc3f27506de2.svg',
 						},
 						project_color: '#4CAF50',
 						project_foreground: null,
diff --git a/src/views/private/components/module-bar-logo/module-bar-logo.vue b/src/views/private/components/module-bar-logo/module-bar-logo.vue
index b41f74dad9..0a5558ae12 100644
--- a/src/views/private/components/module-bar-logo/module-bar-logo.vue
+++ b/src/views/private/components/module-bar-logo/module-bar-logo.vue
@@ -1,21 +1,10 @@
 <template>
-	<component
-		:is="url ? 'a' : 'div'"
-		:href="url"
-		target="_blank"
-		ref="noopener noreferer"
-		class="module-bar-logo"
-	>
+	<component :is="url ? 'a' : 'div'" :href="url" target="_blank" ref="noopener noreferer" class="module-bar-logo">
 		<template v-if="customLogoPath">
 			<v-progress-circular indeterminate v-if="showLoader" />
 			<img v-else class="custom-logo" :src="customLogoPath" alt="Project Logo" />
 		</template>
-		<div
-			v-else
-			class="logo"
-			:class="{ running: showLoader }"
-			@animationiteration="stopRunningIfQueueIsEmpty"
-		/>
+		<div v-else class="logo" :class="{ running: showLoader }" @animationiteration="stopRunningIfQueueIsEmpty" />
 	</component>
 </template>
 
diff --git a/src/views/private/components/module-bar/module-bar.vue b/src/views/private/components/module-bar/module-bar.vue
index c3de8ec13b..0312f16769 100644
--- a/src/views/private/components/module-bar/module-bar.vue
+++ b/src/views/private/components/module-bar/module-bar.vue
@@ -48,11 +48,7 @@ export default defineComponent({
 		const _modules = computed(() => {
 			const customModuleListing = userStore.state.currentUser?.role.module_listing;
 
-			if (
-				customModuleListing &&
-				Array.isArray(customModuleListing) &&
-				customModuleListing.length > 0
-			) {
+			if (customModuleListing && Array.isArray(customModuleListing) && customModuleListing.length > 0) {
 				return customModuleListing.map((custom) => {
 					if (custom.link.startsWith('http') || custom.link.startsWith('//')) {
 						return {
@@ -76,10 +72,7 @@ export default defineComponent({
 				}))
 				.filter((module) => {
 					if (module.hidden !== undefined) {
-						if (
-							(module.hidden as boolean) === true ||
-							(module.hidden as Ref<boolean>).value === true
-						) {
+						if ((module.hidden as boolean) === true || (module.hidden as Ref<boolean>).value === true) {
 							return false;
 						}
 					}
diff --git a/src/views/private/components/notifications-preview/notifications-preview.vue b/src/views/private/components/notifications-preview/notifications-preview.vue
index c93ebc3e68..5579d0419f 100644
--- a/src/views/private/components/notifications-preview/notifications-preview.vue
+++ b/src/views/private/components/notifications-preview/notifications-preview.vue
@@ -3,11 +3,7 @@
 		<transition-expand tag="div">
 			<div v-if="active" class="inline">
 				<div class="padding-box">
-					<router-link
-						class="link"
-						:to="activityLink"
-						:class="{ 'has-items': lastFour.length > 0 }"
-					>
+					<router-link class="link" :to="activityLink" :class="{ 'has-items': lastFour.length > 0 }">
 						{{ $t('show_all_activity') }}
 					</router-link>
 					<transition-group tag="div" name="notification" class="transition">
diff --git a/src/views/private/components/project-chooser/project-chooser.vue b/src/views/private/components/project-chooser/project-chooser.vue
index 1c85ba225a..7c341a5e9a 100644
--- a/src/views/private/components/project-chooser/project-chooser.vue
+++ b/src/views/private/components/project-chooser/project-chooser.vue
@@ -1,11 +1,6 @@
 <template>
 	<div class="project-chooser" :class="{ active }">
-		<button
-			ref="activator"
-			class="toggle"
-			:disabled="projects.length === 1"
-			@click="active = !active"
-		>
+		<button ref="activator" class="toggle" :disabled="projects.length === 1" @click="active = !active">
 			<latency-indicator />
 			<span class="name">{{ currentProject.name }}</span>
 			<v-icon class="icon" name="expand_more" />
@@ -114,8 +109,7 @@ export default defineComponent({
 			color: var(--foreground-subdued);
 			transform: rotate(0deg);
 			opacity: 0;
-			transition: opacity var(--fast) var(--transition),
-				transform var(--medium) var(--transition);
+			transition: opacity var(--fast) var(--transition), transform var(--medium) var(--transition);
 		}
 
 		&:hover .icon {
diff --git a/src/views/private/components/render-display/render-display.vue b/src/views/private/components/render-display/render-display.vue
index ddf23cd061..52003f2f9e 100644
--- a/src/views/private/components/render-display/render-display.vue
+++ b/src/views/private/components/render-display/render-display.vue
@@ -59,9 +59,7 @@ export default defineComponent({
 		},
 	},
 	setup(props) {
-		const displayInfo = computed(
-			() => displays.find((display) => display.id === props.display) || null
-		);
+		const displayInfo = computed(() => displays.find((display) => display.id === props.display) || null);
 		return { displayInfo };
 	},
 });
diff --git a/src/views/private/components/revisions-drawer-detail/revision-item.vue b/src/views/private/components/revisions-drawer-detail/revision-item.vue
index ffac66c991..127adf9206 100644
--- a/src/views/private/components/revisions-drawer-detail/revision-item.vue
+++ b/src/views/private/components/revisions-drawer-detail/revision-item.vue
@@ -54,17 +54,11 @@ export default defineComponent({
 		});
 
 		const time = computed(() => {
-			return format(
-				new Date(props.revision.activity.action_on),
-				String(i18n.t('date-fns_time'))
-			);
+			return format(new Date(props.revision.activity.action_on), String(i18n.t('date-fns_time')));
 		});
 
 		const user = computed(() => {
-			if (
-				props.revision.activity.action_by !== null &&
-				typeof props.revision.activity.action_by === 'object'
-			) {
+			if (props.revision.activity.action_by !== null && typeof props.revision.activity.action_by === 'object') {
 				const { first_name, last_name } = props.revision.activity.action_by as {
 					first_name: string;
 					last_name: string;
diff --git a/src/views/private/components/revisions-drawer-detail/revisions-drawer-detail.vue b/src/views/private/components/revisions-drawer-detail/revisions-drawer-detail.vue
index 39cf83db35..67097ba0e7 100644
--- a/src/views/private/components/revisions-drawer-detail/revisions-drawer-detail.vue
+++ b/src/views/private/components/revisions-drawer-detail/revisions-drawer-detail.vue
@@ -138,16 +138,11 @@ export default defineComponent({
 						}
 					);
 
-					const revisionsGroupedByDate = groupBy(
-						response.data.data,
-						(revision: Revision) => {
-							// revision's action_on date is in iso-8601
-							const date = new Date(
-								new Date(revision.activity.action_on).toDateString()
-							);
-							return date;
-						}
-					);
+					const revisionsGroupedByDate = groupBy(response.data.data, (revision: Revision) => {
+						// revision's action_on date is in iso-8601
+						const date = new Date(new Date(revision.activity.action_on).toDateString());
+						return date;
+					});
 
 					const revisionsGrouped: RevisionsByDate[] = [];
 
@@ -162,15 +157,8 @@ export default defineComponent({
 						if (today) dateFormatted = i18n.t('today');
 						else if (yesterday) dateFormatted = i18n.t('yesterday');
 						else if (thisYear)
-							dateFormatted = await formatLocalized(
-								date,
-								String(i18n.t('date-fns_date_short_no_year'))
-							);
-						else
-							dateFormatted = await formatLocalized(
-								date,
-								String(i18n.t('date-fns_date_short'))
-							);
+							dateFormatted = await formatLocalized(date, String(i18n.t('date-fns_date_short_no_year')));
+						else dateFormatted = await formatLocalized(date, String(i18n.t('date-fns_date_short')));
 
 						revisionsGrouped.push({
 							date: date,
diff --git a/src/views/private/components/revisions-drawer-detail/revisions-modal-picker.vue b/src/views/private/components/revisions-drawer-detail/revisions-modal-picker.vue
index d7b3db3d1e..c1369eb464 100644
--- a/src/views/private/components/revisions-drawer-detail/revisions-modal-picker.vue
+++ b/src/views/private/components/revisions-drawer-detail/revisions-modal-picker.vue
@@ -79,15 +79,9 @@ export default defineComponent({
 		return { _current, options, selectedOption };
 
 		async function getFormattedDate(revision: Revision) {
-			const date = await localizedFormat(
-				new Date(revision!.activity.action_on),
-				String(i18n.t('date-fns_date'))
-			);
+			const date = await localizedFormat(new Date(revision!.activity.action_on), String(i18n.t('date-fns_date')));
 
-			const time = await localizedFormat(
-				new Date(revision!.activity.action_on),
-				String(i18n.t('date-fns_time'))
-			);
+			const time = await localizedFormat(new Date(revision!.activity.action_on), String(i18n.t('date-fns_time')));
 
 			return `${date} (${time})`;
 		}
diff --git a/src/views/private/components/revisions-drawer-detail/revisions-modal-preview.vue b/src/views/private/components/revisions-drawer-detail/revisions-modal-preview.vue
index 13f97a0286..0d6c61a698 100644
--- a/src/views/private/components/revisions-drawer-detail/revisions-modal-preview.vue
+++ b/src/views/private/components/revisions-drawer-detail/revisions-modal-preview.vue
@@ -1,10 +1,5 @@
 <template>
-	<v-form
-		disabled
-		:collection="revision.collection"
-		:primary-key="revision.item"
-		:initial-values="revision.data"
-	/>
+	<v-form disabled :collection="revision.collection" :primary-key="revision.item" :initial-values="revision.data" />
 </template>
 
 <script lang="ts">
diff --git a/src/views/private/components/revisions-drawer-detail/revisions-modal-updates.vue b/src/views/private/components/revisions-drawer-detail/revisions-modal-updates.vue
index caf2cc5a0b..a9fc0dbaf0 100644
--- a/src/views/private/components/revisions-drawer-detail/revisions-modal-updates.vue
+++ b/src/views/private/components/revisions-drawer-detail/revisions-modal-updates.vue
@@ -31,9 +31,7 @@ export default defineComponent({
 		const fieldsStore = useFieldsStore();
 
 		const previousRevision = computed(() => {
-			const currentIndex = props.revisions.findIndex(
-				(revision) => revision.id === props.revision.id
-			);
+			const currentIndex = props.revisions.findIndex((revision) => revision.id === props.revision.id);
 
 			// This is assuming props.revisions is in chronological order from newest to oldest
 			return props.revisions[currentIndex + 1];
diff --git a/src/views/private/components/revisions-drawer-detail/revisions-modal.vue b/src/views/private/components/revisions-drawer-detail/revisions-modal.vue
index 692b720203..a6f52620c1 100644
--- a/src/views/private/components/revisions-drawer-detail/revisions-modal.vue
+++ b/src/views/private/components/revisions-drawer-detail/revisions-modal.vue
@@ -13,10 +13,7 @@
 			</template>
 
 			<div class="content">
-				<revisions-modal-preview
-					v-if="currentTab[0] === 'preview'"
-					:revision="currentRevision"
-				/>
+				<revisions-modal-preview v-if="currentTab[0] === 'preview'" :revision="currentRevision" />
 				<revisions-modal-updates
 					v-if="currentTab[0] === 'updates'"
 					:revision="currentRevision"
diff --git a/src/views/private/components/save-options/save-options.test.ts b/src/views/private/components/save-options/save-options.test.ts
index a8f8067fbd..031fce9b7c 100644
--- a/src/views/private/components/save-options/save-options.test.ts
+++ b/src/views/private/components/save-options/save-options.test.ts
@@ -3,12 +3,7 @@ import { shallowMount, createLocalVue } from '@vue/test-utils';
 import VueCompositionAPI from '@vue/composition-api';
 import { i18n } from '@/lang';
 
-import VList, {
-	VListItem,
-	VListItemIcon,
-	VListItemContent,
-	VListItemHint,
-} from '@/components/v-list/';
+import VList, { VListItem, VListItemIcon, VListItemContent, VListItemHint } from '@/components/v-list/';
 import VIcon from '@/components/v-icon';
 import VMenu from '@/components/v-menu';
 
diff --git a/src/views/private/components/search-input/search-input.vue b/src/views/private/components/search-input/search-input.vue
index 8b7a606a77..e26e2d9a3d 100644
--- a/src/views/private/components/search-input/search-input.vue
+++ b/src/views/private/components/search-input/search-input.vue
@@ -33,10 +33,7 @@ export default defineComponent({
 			}
 		});
 
-		const emitValue = debounce(
-			(event: InputEvent) => emit('input', (event.target as HTMLInputElement).value),
-			850
-		);
+		const emitValue = debounce((event: InputEvent) => emit('input', (event.target as HTMLInputElement).value), 850);
 
 		return { active, disable, input, emitValue, emptyAndClose };
 
diff --git a/src/views/private/components/user-popover/user-popover.vue b/src/views/private/components/user-popover/user-popover.vue
index e3924f3d1f..990e03a86d 100644
--- a/src/views/private/components/user-popover/user-popover.vue
+++ b/src/views/private/components/user-popover/user-popover.vue
@@ -22,9 +22,7 @@
 			</v-avatar>
 			<div class="data">
 				<div class="name type-title">{{ data.first_name }} {{ data.last_name }}</div>
-				<div class="status-role" :class="data.status">
-					{{ $t(data.status) }} {{ data.role.name }}
-				</div>
+				<div class="status-role" :class="data.status">{{ $t(data.status) }} {{ data.role.name }}</div>
 				<div class="email">{{ data.email }}</div>
 			</div>
 		</div>
@@ -64,9 +62,8 @@ export default defineComponent({
 		const avatarSrc = computed(() => {
 			if (data.value === null) return null;
 
-			return data.value.avatar?.data?.thumbnails?.find(
-				(thumbnail) => thumbnail.key === 'directus-medium-crop'
-			)?.url;
+			return data.value.avatar?.data?.thumbnails?.find((thumbnail) => thumbnail.key === 'directus-medium-crop')
+				?.url;
 		});
 
 		const active = ref(false);
@@ -93,14 +90,7 @@ export default defineComponent({
 			try {
 				const response = await api.get(`/${currentProjectKey}/users/${props.user}`, {
 					params: {
-						fields: [
-							'first_name',
-							'last_name',
-							'avatar.data',
-							'role.name',
-							'status',
-							'email',
-						],
+						fields: ['first_name', 'last_name', 'avatar.data', 'role.name', 'status', 'email'],
 					},
 				});
 				data.value = response.data.data;
diff --git a/src/views/private/private-view.vue b/src/views/private/private-view.vue
index 6e0c3ea950..6b133d7d1a 100644
--- a/src/views/private/private-view.vue
+++ b/src/views/private/private-view.vue
@@ -1,11 +1,6 @@
 <template>
 	<div class="private-view" :class="{ theme, dragging }">
-		<aside
-			role="navigation"
-			aria-label="Module Navigation"
-			class="navigation"
-			:class="{ 'is-open': navOpen }"
-		>
+		<aside role="navigation" aria-label="Module Navigation" class="navigation" :class="{ 'is-open': navOpen }">
 			<module-bar />
 			<div class="module-nav alt-colors">
 				<project-chooser />
@@ -16,15 +11,8 @@
 			</div>
 		</aside>
 		<div class="content" ref="contentEl">
-			<header-bar
-				:title="title"
-				@toggle:drawer="drawerOpen = !drawerOpen"
-				@toggle:nav="navOpen = !navOpen"
-			>
-				<template
-					v-for="(_, scopedSlotName) in $scopedSlots"
-					v-slot:[scopedSlotName]="slotData"
-				>
+			<header-bar :title="title" @toggle:drawer="drawerOpen = !drawerOpen" @toggle:nav="navOpen = !navOpen">
+				<template v-for="(_, scopedSlotName) in $scopedSlots" v-slot:[scopedSlotName]="slotData">
 					<slot :name="scopedSlotName" v-bind="slotData" />
 				</template>
 			</header-bar>
@@ -112,14 +100,7 @@ export default defineComponent({
 
 		provide('main-element', contentEl);
 
-		const {
-			onDragEnter,
-			onDragLeave,
-			onDrop,
-			onDragOver,
-			showDropEffect,
-			dragging,
-		} = useFileUpload();
+		const { onDragEnter, onDragLeave, onDrop, onDragOver, showDropEffect, dragging } = useFileUpload();
 
 		useEventListener(window, 'dragenter', onDragEnter);
 		useEventListener(window, 'dragover', onDragOver);
@@ -174,9 +155,7 @@ export default defineComponent({
 				event.preventDefault();
 				dragCounter.value++;
 
-				const isDropzone =
-					event.target &&
-					(event.target as HTMLElement).getAttribute?.('data-dropzone') === '';
+				const isDropzone = event.target && (event.target as HTMLElement).getAttribute?.('data-dropzone') === '';
 
 				if (
 					dragCounter.value === 1 &&
@@ -205,10 +184,7 @@ export default defineComponent({
 					disableDropEffect();
 				}
 
-				if (
-					event.target &&
-					(event.target as HTMLElement).getAttribute?.('data-dropzone') === ''
-				) {
+				if (event.target && (event.target as HTMLElement).getAttribute?.('data-dropzone') === '') {
 					enableDropEffect();
 					dragCounter.value = 1;
 				}
@@ -241,8 +217,7 @@ export default defineComponent({
 				});
 
 				await uploadFiles(files, (progress) => {
-					const percentageDone =
-						progress.reduce((val, cur) => (val += cur)) / progress.length;
+					const percentageDone = progress.reduce((val, cur) => (val += cur)) / progress.length;
 
 					const total = files.length;
 					const done = progress.filter((p) => p === 100).length;
diff --git a/src/views/public/components/project-chooser/project-chooser.vue b/src/views/public/components/project-chooser/project-chooser.vue
index 13d839b55c..03dcad8ad3 100644
--- a/src/views/public/components/project-chooser/project-chooser.vue
+++ b/src/views/public/components/project-chooser/project-chooser.vue
@@ -1,11 +1,5 @@
 <template>
-	<v-menu
-		v-if="project"
-		show-arrow
-		placement="bottom-start"
-		close-on-content-click
-		:disabled="projects.length <= 1"
-	>
+	<v-menu v-if="project" show-arrow placement="bottom-start" close-on-content-click :disabled="projects.length <= 1">
 		<template #activator="{ toggle }">
 			<div class="project-chooser" @click="toggle">
 				<div class="public-view-logo" v-if="project && project.logo">
diff --git a/src/views/public/public-view.test.ts b/src/views/public/public-view.test.ts
index 2ef407db90..9a439f2be9 100644
--- a/src/views/public/public-view.test.ts
+++ b/src/views/public/public-view.test.ts
@@ -30,21 +30,18 @@ const mockProject: ProjectWithKey = {
 		database: 'mysql',
 		project_name: 'Thumper',
 		project_logo: {
-			full_url:
-				'http://localhost:8080/uploads/my-project/originals/19acff06-4969-5c75-9cd5-dc3f27506de2.svg',
+			full_url: 'http://localhost:8080/uploads/my-project/originals/19acff06-4969-5c75-9cd5-dc3f27506de2.svg',
 			url: '/uploads/my-project/originals/19acff06-4969-5c75-9cd5-dc3f27506de2.svg',
 			asset_url: '/uploads/my-project/assets/abc',
 		},
 		project_color: '#4CAF50',
 		project_foreground: {
-			full_url:
-				'http://localhost:8080/uploads/my-project/originals/f28c49b0-2b4f-571e-bf62-593107cbf2ec.svg',
+			full_url: 'http://localhost:8080/uploads/my-project/originals/f28c49b0-2b4f-571e-bf62-593107cbf2ec.svg',
 			url: '/uploads/my-project/originals/f28c49b0-2b4f-571e-bf62-593107cbf2ec.svg',
 			asset_url: '/uploads/my-project/assets/abc',
 		},
 		project_background: {
-			full_url:
-				'http://localhost:8080/uploads/my-project/originals/03a06753-6794-4b9a-803b-3e1cd15e0742.jpg',
+			full_url: 'http://localhost:8080/uploads/my-project/originals/03a06753-6794-4b9a-803b-3e1cd15e0742.jpg',
 			url: '/uploads/my-project/originals/03a06753-6794-4b9a-803b-3e1cd15e0742.jpg',
 			asset_url: '/uploads/my-project/assets/abc',
 		},