Contact page router link, navigation and structure

Author: zlrundefined

src/components/Contact.vue

@@ -0,0 +1,24 @@
+<template>
+	<div class="container mx-auto px-4">
+		<p>Contact Page</p>
+	</div>
+</template>
+
+<script>
+import feather from 'feather-icons';
+
+export default {
+	name: 'Contact',
+	props: {
+		msg: String,
+	},
+	mounted() {
+		feather.replace();
+	},
+	updated() {
+		feather.replace();
+	},
+};
+</script>
+
+<style scoped></style>

src/components/shared/Header.vue

@@ -32,6 +32,11 @@
 						class="text-lg font-medium text-gray-400 uppercase  md:mx-2 mb-2 sm:py-2"
 						>About Me</router-link
 					>
+					<router-link
+						to="/contact"
+						class="text-lg font-medium text-gray-400 uppercase  md:mx-2 mb-2 sm:py-2"
+						>Contact</router-link
+					>
 				</div>
 			</div>
 			<div class="flex justify-between items-center flex-col md:flex-row">

src/router/index.js

@@ -50,6 +50,20 @@ const routes = [
 			title: 'Single Project',
 		},
 	},
+	{
+		path: '/contact',
+		name: 'Contact',
+		// route level code-splitting
+		// this generates a separate chunk (projects.[hash].js) for this route
+		// which is lazy-loaded when the route is visited.
+		component: () =>
+			import(
+				/* webpackChunkName: "projects" */ '../components/Contact.vue'
+			),
+		meta: {
+			title: 'Contact',
+		},
+	},
 ];
 
 const router = createRouter({