components/LinkCard.vue

@@ -1,12 +1,34 @@
 <template>
-	<a class="card" :href="link">
+	<a v-if="isExternal" target="_blank" rel="nofollow noreferrer" class="card" :href="to">
 		<p>{{ title }} →</p>
 	</a>
+	<router-link v-else v-bind="$props" class="card">
+		<p>{{ title }} →</p>
+	</router-link>
 </template>
 
 <script>
+import { RouterLink } from 'vue-router';
+
 export default {
-	props: ['title', 'link'],
+	props: {
+		title: {
+			type: String,
+			required: true,
+		},
+		to: {
+			type: String,
+			required: true,
+		},
+		...RouterLink.props,
+	},
+	computed: {
+		isExternal() {
+			return (
+				typeof this.to === 'string' && this.to.startsWith('http')
+			);
+		},
+	},
 };
 </script>
 
@@ -45,6 +67,5 @@ export default {
 		padding: 1.25rem;
 		width: 9rem;
 	}
-	
 }
 </style>

pages/index.vue

@@ -13,25 +13,22 @@ import '@/assets/styles/index.scss';
 		<div class="grid">
 			<LinkCard
 				title="Watch"
-				link="https://www.netflix.com/title/81210762"
+				to="https://www.netflix.com/title/81210762"
 			/>
-			<LinkCard title="Discord" link="https://discord.gg/hyKVDeRJ8Y" />
+			<LinkCard title="Discord" to="https://discord.gg/hyKVDeRJ8Y" />
 			<LinkCard
 				title="Reddit"
-				link="https://www.reddit.com/r/YoungRoyals/"
+				to="https://www.reddit.com/r/YoungRoyals/"
 			/>
 			<LinkCard
 				title="Babbel (ref)"
-				link="https://www.talkable.com/x/IchxFl"
+				to="https://www.talkable.com/x/IchxFl"
 			/>
 			<LinkCard
 				title="Matrix →"
-				link="https://matrix.to/#/#young-royals:matrix.org"
-			/>
-			<LinkCard
-				title="Discord Utilities"
-				link="/utilities"
+				to="https://matrix.to/#/#young-royals:matrix.org"
 			/>
+			<LinkCard title="Discord Utilities" to="/utilities" />
 		</div>
 	</div>
 </template>

pages/utilities/index.vue

@@ -3,7 +3,7 @@
 		<h1 class="title">Utilities for the Discord Server</h1>
         <LinkCard
             title="Birthdays"
-            link="/utilities/birthdays"
+            to="/utilities/birthdays"
          />
 	</div>
 </template>