Single project route and vue strcuture

Author: zlrundefined

src/components/About.vue

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

src/components/Projects.vue

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

src/components/SingleProject.vue

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

src/router/index.js

@@ -1,45 +1,63 @@
-import { createRouter, createWebHistory } from 'vue-router'
-import Home from '../components/Home.vue'
+import { createRouter, createWebHistory } from 'vue-router';
+import Home from '../components/Home.vue';
 
 const routes = [
-  {
-    path: '/',
-    name: 'Home',
-    component: Home,
-    meta: {
-      title: 'Home'
-    }
-  },
-  {
-    path: '/about',
-    name: 'About',
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: () => import(/* webpackChunkName: "about" */ '../components/About.vue'),
-    meta: {
-      title: 'About'
-    }
-  },
-  {
-    path: '/projects',
-    name: 'Projects',
-    // 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/Projects.vue'),
-    meta: {
-      title: 'Projects'
-    }
-  }
-]
+	{
+		path: '/',
+		name: 'Home',
+		component: Home,
+		meta: {
+			title: 'Home',
+		},
+	},
+	{
+		path: '/about',
+		name: 'About',
+		// route level code-splitting
+		// this generates a separate chunk (about.[hash].js) for this route
+		// which is lazy-loaded when the route is visited.
+		component: () =>
+			import(/* webpackChunkName: "about" */ '../components/About.vue'),
+		meta: {
+			title: 'About',
+		},
+	},
+	{
+		path: '/projects',
+		name: 'Projects',
+		// 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/Projects.vue'
+			),
+		meta: {
+			title: 'Projects',
+		},
+	},
+	{
+		path: '/projects/single-project',
+		name: 'Single Project',
+		// 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/SingleProject.vue'
+			),
+		meta: {
+			title: 'Single Project',
+		},
+	},
+];
 
 const router = createRouter({
-  history: createWebHistory(process.env.BASE_URL),
-  routes
-})
+	history: createWebHistory(process.env.BASE_URL),
+	routes,
+});
 
-export default router
+export default router;
 
 /**
  * Below code will display the component/active page title
@@ -48,44 +66,56 @@ export default router
 
 // This callback runs before every route change, including on page load.
 router.beforeEach((to, from, next) => {
-  // This goes through the matched routes from last to first, finding the closest route with a title.
-  // e.g., if we have `/some/deep/nested/route` and `/some`, `/deep`, and `/nested` have titles,
-  // `/nested`'s will be chosen.
-  const nearestWithTitle = to.matched.slice().reverse().find(r => r.meta && r.meta.title);
+	// This goes through the matched routes from last to first, finding the closest route with a title.
+	// e.g., if we have `/some/deep/nested/route` and `/some`, `/deep`, and `/nested` have titles,
+	// `/nested`'s will be chosen.
+	const nearestWithTitle = to.matched
+		.slice()
+		.reverse()
+		.find((r) => r.meta && r.meta.title);
 
-  // Find the nearest route element with meta tags.
-  const nearestWithMeta = to.matched.slice().reverse().find(r => r.meta && r.meta.metaTags);
+	// Find the nearest route element with meta tags.
+	const nearestWithMeta = to.matched
+		.slice()
+		.reverse()
+		.find((r) => r.meta && r.meta.metaTags);
 
-  const previousNearestWithMeta = from.matched.slice().reverse().find(r => r.meta && r.meta.metaTags);
+	const previousNearestWithMeta = from.matched
+		.slice()
+		.reverse()
+		.find((r) => r.meta && r.meta.metaTags);
 
-  // If a route with a title was found, set the document (page) title to that value.
-  if(nearestWithTitle) {
-    document.title = nearestWithTitle.meta.title;
-  } else if(previousNearestWithMeta) {
-    document.title = previousNearestWithMeta.meta.title;
-  }
+	// If a route with a title was found, set the document (page) title to that value.
+	if (nearestWithTitle) {
+		document.title = nearestWithTitle.meta.title;
+	} else if (previousNearestWithMeta) {
+		document.title = previousNearestWithMeta.meta.title;
+	}
 
-  // Remove any stale meta tags from the document using the key attribute we set below.
-  Array.from(document.querySelectorAll('[data-vue-router-controlled]')).map(el => el.parentNode.removeChild(el));
+	// Remove any stale meta tags from the document using the key attribute we set below.
+	Array.from(
+		document.querySelectorAll('[data-vue-router-controlled]')
+	).map((el) => el.parentNode.removeChild(el));
 
-  // Skip rendering meta tags if there are none.
-  if(!nearestWithMeta) return next();
+	// Skip rendering meta tags if there are none.
+	if (!nearestWithMeta) return next();
 
-  // Turn the meta tag definitions into actual elements in the head.
-  nearestWithMeta.meta.metaTags.map(tagDef => {
-    const tag = document.createElement('meta');
+	// Turn the meta tag definitions into actual elements in the head.
+	nearestWithMeta.meta.metaTags
+		.map((tagDef) => {
+			const tag = document.createElement('meta');
 
-    Object.keys(tagDef).forEach(key => {
-      tag.setAttribute(key, tagDef[key]);
-    });
+			Object.keys(tagDef).forEach((key) => {
+				tag.setAttribute(key, tagDef[key]);
+			});
 
-    // We use this to track which meta tags we create so we don't interfere with other ones.
-    tag.setAttribute('data-vue-router-controlled', '');
+			// We use this to track which meta tags we create so we don't interfere with other ones.
+			tag.setAttribute('data-vue-router-controlled', '');
 
-    return tag;
-  })
-  // Add the meta tags to the document head.
-  .forEach(tag => document.head.appendChild(tag));
+			return tag;
+		})
+		// Add the meta tags to the document head.
+		.forEach((tag) => document.head.appendChild(tag));
 
-  next();
+	next();
 });