switch to default nuxt routing

Author: gpproton

layouts/BlogLayout.vue

@@ -16,16 +16,10 @@ export default defineNuxtConfig({
       APP_MODE: process.env?.NODE_ENV,
     },
   },
-  hooks: {
-    'pages:routerOptions'({ files }) {
-      files.push({
-        path: path.resolve('./router.options'),
-        optional: true,
-      });
-    },
-  },
   app: {
     head: {
+      charset: 'utf-8',
+      viewport: 'width=device-width, initial-scale=1',
       link: [],
     },
   },

layouts/AppLayout.vue renamed to layouts/default.vue

@@ -0,0 +1,35 @@
+<script lang="ts" setup>
+import type { NuxtError } from '#app';
+
+defineProps({
+  // eslint-disable-next-line vue/require-default-prop
+  error: Object as () => NuxtError,
+});
+
+const handleError = () => clearError({ redirect: '/' });
+</script>
+
+<template>
+  <main
+    class="grid min-h-full place-items-center bg-white px-6 py-24 sm:py-32 lg:px-8"
+  >
+    <div class="text-center">
+      <h1
+        class="mt-4 text-5xl uppercase font-bold tracking-tight text-gray-900 sm:text-5xl"
+      >
+        {{ 'Not Found' }}
+      </h1>
+      <p class="mt-6 text-base leading-7 text-gray-600">
+        Sorry, we couldn’t find the page you’re looking for.
+      </p>
+      <div class="mt-10 flex items-center justify-center gap-x-6">
+        <Button
+          type="button"
+          class="rounded-md px-4 py-4 text-md font-semibold text-white shadow-sm hover:bg-blue-600"
+          @click="() => handleError()"
+          >Go Back</Button
+        >
+      </div>
+    </div>
+  </main>
+</template>

nuxt.config.ts

@@ -10,6 +10,17 @@ const { data: page } = await useAsyncData(() =>
     .findOne(),
 );
 const pagePath = computed<string>(() => page.value?._path ?? '');
+
+if (page.value !== null) {
+  useSeoMeta({
+    title: page.value.title + ' :: Godwin Peter .O',
+    ogTitle: page.value.title,
+    description: page.value.description,
+    ogDescription: page.value.description,
+    ogImage: page.value.image,
+    twitterCard: 'summary_large_image',
+  });
+}
 </script>
 
 <template>

pages/ErrorView.vue

@@ -12,13 +12,26 @@ const { data: articles } = await useAsyncData(() =>
     .sort({ date: -1 })
     .find(),
 );
+
+const pageHeading = ref("Peter's Random Musings");
+const pageTitle = ref('Blog :: Godwin Peter .O');
+const pageDescription = ref('List of articles in the blog');
+
+useSeoMeta({
+  title: pageTitle.value,
+  description: pageDescription.value,
+  ogTitle: pageHeading.value,
+  ogDescription: pageDescription.value,
+  ogImage: 'https://godwin.dev//images/placeholder.webp',
+  twitterCard: 'summary_large_image',
+});
 </script>
 
 <template>
   <div class="mt-8">
     <div class="text-center">
       <div class="text-5xl text-blue-500 font-bold mb-3">
-        {{ "Peter's Random Musings" }}
+        {{ pageHeading }}
       </div>
       <p class="font-sans text-base font-light xl:w-2/4 lg:w-3/4 mx-auto">
         {{ "Here's a list of all my blog posts" }}

pages/ProjectsView.vue

@@ -0,0 +1,25 @@
+<script lang="ts" setup>
+// const search = ref('');
+// const results = searchContent(search);
+
+const pageHeading = ref('Search blog');
+const pageTitle = ref('Search');
+const pageDescription = ref('List of filtered articles');
+
+useSeoMeta({
+  title: pageTitle.value + ' :: Godwin Peter .O',
+  description: pageDescription.value,
+  ogTitle: pageHeading.value,
+  ogDescription: pageDescription.value,
+  ogImage: 'https://godwin.dev//images/placeholder.webp',
+  twitterCard: 'summary_large_image',
+});
+</script>
+
+<template>
+  <div>
+    <!-- <InputText v-model="search" type="text" />
+
+    <pre>{{ results }} </pre> -->
+  </div>
+</template>

pages/[...slug].vue

@@ -1,4 +1,16 @@
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+const pageHeading = ref('Godwin Peter .O personal website');
+const pageTitle = ref('Home :: Godwin Peter .O');
+const pageDescription = ref('Profile home page for Godwin Peter .O');
+
+useSeoMeta({
+  title: pageTitle.value,
+  description: pageDescription.value,
+  ogTitle: pageHeading.value,
+  ogDescription: pageDescription.value,
+  twitterCard: 'summary_large_image',
+});
+</script>
 
 <template>
   <div>

pages/blog/ArticleSearch.vue

@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+const pageHeading = ref('Godwin Peter .O projects');
+const pageTitle = ref('Projects :: Godwin Peter .O');
+const pageDescription = ref('Projects for Godwin Peter .O');
+
+useSeoMeta({
+  title: pageTitle.value,
+  description: pageDescription.value,
+  ogTitle: pageHeading.value,
+  ogDescription: pageDescription.value,
+  twitterCard: 'summary_large_image',
+});
+</script>
+
+<template>
+  <div></div>
+</template>
+
+<style></style>