diff --git a/.eslintrc.json b/.eslintrc.json
index 8c8f1e67..7f9df3ed 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -1,9 +1,11 @@
 {
-	"parser": "@typescript-eslint/parser",
+	"parser": "vue-eslint-parser",
 	"parserOptions": {
+		"parser": "@typescript-eslint/parser",
 		"sourceType": "module",
 		"ecmaVersion": 2021,
-		"project": "tsconfig.json"
+		"project": "tsconfig.json",
+		"extraFileExtensions": [".vue"]
 	},
 	"extends": [
 		"prettier",
@@ -11,6 +13,7 @@
 		"plugin:@typescript-eslint/eslint-recommended",
 		"plugin:@typescript-eslint/recommended",
 		"plugin:@typescript-eslint/recommended-requiring-type-checking",
+		"plugin:vue/vue3-recommended",
 		"plugin:functional/external-typescript-recommended",
 		"plugin:ava/recommended",
 		"plugin:prettier/recommended"
diff --git a/justfile b/justfile
index e0ac6f7f..35570152 100644
--- a/justfile
+++ b/justfile
@@ -4,7 +4,7 @@ lint:
 	npx astro sync
 	npx astro check
 	npx prettier --check source
-	npx eslint . --ext ".ts"
+	npx eslint . --ext ".ts,.vue"
 	npx jscpd source
 
 @compile:
diff --git a/package-lock.json b/package-lock.json
index 40b3c1c0..69c193a1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -53,6 +53,7 @@
 				"eslint-plugin-ava": "14.0.0",
 				"eslint-plugin-functional": "6.5.1",
 				"eslint-plugin-prettier": "5.1.3",
+				"eslint-plugin-vue": "9.26.0",
 				"fastify": "4.27.0",
 				"fishery": "2.2.2",
 				"get-port": "7.1.0",
@@ -67,6 +68,7 @@
 				"tailwindcss": "3.4.4",
 				"tsx": "4.15.4",
 				"typescript": "5.4.5",
+				"vue-eslint-parser": "9.4.3",
 				"vue-tsc": "2.0.21",
 				"wait-on": "7.2.0",
 				"zx": "8.1.2"
@@ -4596,6 +4598,12 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/boolbase": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
+			"integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
+			"dev": true
+		},
 		"node_modules/boxen": {
 			"version": "7.1.1",
 			"resolved": "https://registry.npmjs.org/boxen/-/boxen-7.1.1.tgz",
@@ -6343,6 +6351,68 @@
 				}
 			}
 		},
+		"node_modules/eslint-plugin-vue": {
+			"version": "9.26.0",
+			"resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-9.26.0.tgz",
+			"integrity": "sha512-eTvlxXgd4ijE1cdur850G6KalZqk65k1JKoOI2d1kT3hr8sPD07j1q98FRFdNnpxBELGPWxZmInxeHGF/GxtqQ==",
+			"dev": true,
+			"dependencies": {
+				"@eslint-community/eslint-utils": "^4.4.0",
+				"globals": "^13.24.0",
+				"natural-compare": "^1.4.0",
+				"nth-check": "^2.1.1",
+				"postcss-selector-parser": "^6.0.15",
+				"semver": "^7.6.0",
+				"vue-eslint-parser": "^9.4.2",
+				"xml-name-validator": "^4.0.0"
+			},
+			"engines": {
+				"node": "^14.17.0 || >=16.0.0"
+			},
+			"peerDependencies": {
+				"eslint": "^6.2.0 || ^7.0.0 || ^8.0.0 || ^9.0.0"
+			}
+		},
+		"node_modules/eslint-plugin-vue/node_modules/globals": {
+			"version": "13.24.0",
+			"resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz",
+			"integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==",
+			"dev": true,
+			"dependencies": {
+				"type-fest": "^0.20.2"
+			},
+			"engines": {
+				"node": ">=8"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/eslint-plugin-vue/node_modules/postcss-selector-parser": {
+			"version": "6.1.0",
+			"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.0.tgz",
+			"integrity": "sha512-UMz42UD0UY0EApS0ZL9o1XnLhSTtvvvLe5Dc2H2O56fvRZi+KulDyf5ctDhhtYJBGKStV2FL1fy6253cmLgqVQ==",
+			"dev": true,
+			"dependencies": {
+				"cssesc": "^3.0.0",
+				"util-deprecate": "^1.0.2"
+			},
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/eslint-plugin-vue/node_modules/type-fest": {
+			"version": "0.20.2",
+			"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
+			"integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
+			"dev": true,
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
 		"node_modules/eslint-scope": {
 			"version": "7.2.2",
 			"resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.2.tgz",
@@ -10349,6 +10419,18 @@
 				"set-blocking": "^2.0.0"
 			}
 		},
+		"node_modules/nth-check": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
+			"integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
+			"dev": true,
+			"dependencies": {
+				"boolbase": "^1.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/fb55/nth-check?sponsor=1"
+			}
+		},
 		"node_modules/object-assign": {
 			"version": "4.1.1",
 			"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -14866,6 +14948,30 @@
 				}
 			}
 		},
+		"node_modules/vue-eslint-parser": {
+			"version": "9.4.3",
+			"resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-9.4.3.tgz",
+			"integrity": "sha512-2rYRLWlIpaiN8xbPiDyXZXRgLGOtWxERV7ND5fFAv5qo1D2N9Fu9MNajBNc6o13lZ+24DAWCkQCvj4klgmcITg==",
+			"dev": true,
+			"dependencies": {
+				"debug": "^4.3.4",
+				"eslint-scope": "^7.1.1",
+				"eslint-visitor-keys": "^3.3.0",
+				"espree": "^9.3.1",
+				"esquery": "^1.4.0",
+				"lodash": "^4.17.21",
+				"semver": "^7.3.6"
+			},
+			"engines": {
+				"node": "^14.17.0 || >=16.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/mysticatea"
+			},
+			"peerDependencies": {
+				"eslint": ">=6.0.0"
+			}
+		},
 		"node_modules/vue-template-compiler": {
 			"version": "2.7.16",
 			"resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.7.16.tgz",
@@ -15297,6 +15403,15 @@
 				"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
 			}
 		},
+		"node_modules/xml-name-validator": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-4.0.0.tgz",
+			"integrity": "sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==",
+			"dev": true,
+			"engines": {
+				"node": ">=12"
+			}
+		},
 		"node_modules/y18n": {
 			"version": "5.0.8",
 			"resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
diff --git a/package.json b/package.json
index 4f00ebfa..1c2be86a 100644
--- a/package.json
+++ b/package.json
@@ -58,6 +58,7 @@
 		"eslint-plugin-ava": "14.0.0",
 		"eslint-plugin-functional": "6.5.1",
 		"eslint-plugin-prettier": "5.1.3",
+		"eslint-plugin-vue": "9.26.0",
 		"fastify": "4.27.0",
 		"fishery": "2.2.2",
 		"get-port": "7.1.0",
@@ -72,6 +73,7 @@
 		"tailwindcss": "3.4.4",
 		"tsx": "4.15.4",
 		"typescript": "5.4.5",
+		"vue-eslint-parser": "9.4.3",
 		"vue-tsc": "2.0.21",
 		"wait-on": "7.2.0",
 		"zx": "8.1.2"
diff --git a/source/statistics/GitHubRepositories.vue b/source/statistics/GitHubRepositories.vue
index 0ad9f1d2..a462849c 100644
--- a/source/statistics/GitHubRepositories.vue
+++ b/source/statistics/GitHubRepositories.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { Maybe } from "true-myth";
 import type { GitHubStatistics } from "../github-statistics/github-statistics-schema";
-import Figure from "./Figure.vue";
+import StatisticsFigure from "./StatisticsFigure.vue";
 import LoadingSpinner from "./LoadingSpinner.vue";
-import Cite from "./Cite.vue";
+import StatisticsCite from "./StatisticsCite.vue";
 
 interface Properties {
 	readonly isFetching: boolean;
@@ -14,10 +14,10 @@ const { isFetching, gitHubStatistics } = defineProps<Properties>();
 </script>
 
 <template>
-	<Figure description="GitHub Repos">
+	<StatisticsFigure description="GitHub Repos">
 		<LoadingSpinner v-if="isFetching" />
-		<Cite v-if="!isFetching" ariaLabel="GitHub Repos">
+		<StatisticsCite v-if="!isFetching" ariaLabel="GitHub Repos">
 			{{ gitHubStatistics.get("user").get("repositories").get("totalCount").unwrapOr(0) }}
-		</Cite>
-	</Figure>
+		</StatisticsCite>
+	</StatisticsFigure>
 </template>
diff --git a/source/statistics/GitHubStars.vue b/source/statistics/GitHubStars.vue
index e2a929fa..ce709010 100644
--- a/source/statistics/GitHubStars.vue
+++ b/source/statistics/GitHubStars.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { Maybe } from "true-myth";
 import type { GitHubStatistics } from "../github-statistics/github-statistics-schema";
-import Figure from "./Figure.vue";
+import StatisticsFigure from "./StatisticsFigure.vue";
 import LoadingSpinner from "./LoadingSpinner.vue";
-import Cite from "./Cite.vue";
+import StatisticsCite from "./StatisticsCite.vue";
 
 interface Properties {
 	readonly isFetching: boolean;
@@ -14,10 +14,10 @@ const { isFetching, gitHubStatistics } = defineProps<Properties>();
 </script>
 
 <template>
-	<Figure description="GitHub Stars">
+	<StatisticsFigure description="GitHub Stars">
 		<LoadingSpinner v-if="isFetching" />
-		<Cite v-if="!isFetching" ariaLabel="GitHub Stars">
+		<StatisticsCite v-if="!isFetching" ariaLabel="GitHub Stars">
 			{{ gitHubStatistics.get("user").get("starredRepositories").get("totalCount").unwrapOr(0) }}
-		</Cite>
-	</Figure>
+		</StatisticsCite>
+	</StatisticsFigure>
 </template>
diff --git a/source/statistics/Cite.vue b/source/statistics/StatisticsCite.vue
similarity index 100%
rename from source/statistics/Cite.vue
rename to source/statistics/StatisticsCite.vue
diff --git a/source/statistics/StatisticsData.vue b/source/statistics/StatisticsData.vue
index 8b72a2a0..0e8e0381 100644
--- a/source/statistics/StatisticsData.vue
+++ b/source/statistics/StatisticsData.vue
@@ -6,7 +6,7 @@ import { Maybe } from "true-myth";
 import YearsInBusiness from "./YearsInBusiness.vue";
 import GitHubRepositories from "./GitHubRepositories.vue";
 import GitHubStars from "./GitHubStars.vue";
-import Figure from "./Figure.vue";
+import StatisticsFigure from "./StatisticsFigure.vue";
 import { gitHubStatisticsSchema, type GitHubStatistics } from "../github-statistics/github-statistics-schema";
 
 const currentYear = import.meta.env.PROD ? new Date() : new Date(2022, 2, 23);
@@ -30,7 +30,7 @@ const barChartIcon = icons["bar-chart"].toSvg({ class: "text-dracula-green w-6 h
 	<YearsInBusiness :years-of-experience="yearsOfExperience" />
 	<GitHubRepositories :is-fetching="isFetching" :gitHubStatistics="gitHubStatistics" />
 	<GitHubStars :is-fetching="isFetching" :gitHubStatistics="gitHubStatistics" />
-	<Figure description="Lines of Code">
+	<StatisticsFigure description="Lines of Code">
 		<figure v-html="barChartIcon" />
-	</Figure>
+	</StatisticsFigure>
 </template>
diff --git a/source/statistics/Figure.vue b/source/statistics/StatisticsFigure.vue
similarity index 100%
rename from source/statistics/Figure.vue
rename to source/statistics/StatisticsFigure.vue
diff --git a/source/statistics/YearsInBusiness.vue b/source/statistics/YearsInBusiness.vue
index e2e41362..43adf51f 100644
--- a/source/statistics/YearsInBusiness.vue
+++ b/source/statistics/YearsInBusiness.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import Figure from "./Figure.vue";
-import Cite from "./Cite.vue";
+import StatisticsFigure from "./StatisticsFigure.vue";
+import StatisticsCite from "./StatisticsCite.vue";
 
 interface Properties {
 	readonly yearsOfExperience: number;
@@ -10,7 +10,7 @@ const { yearsOfExperience } = defineProps<Properties>();
 </script>
 
 <template>
-	<Figure description="Experience">
-		<Cite ariaLabel="Years of experience">{{ yearsOfExperience }} yrs</Cite>
-	</Figure>
+	<StatisticsFigure description="Experience">
+		<StatisticsCite ariaLabel="Years of experience">{{ yearsOfExperience }} yrs</StatisticsCite>
+	</StatisticsFigure>
 </template>