S1

src/pages/[...404].vue

@@ -7,7 +7,7 @@ useHead({
 <template>
   <header class="bg-white shadow">
     <div class="mx-auto max-w-7xl py-6 px-4 sm:px-6 lg:px-8">
-      <h1 class="text-3xl font-bold leading-tight text-gray-900">Not Found</h1>
+      <h1 class="text-3xl font-bold leading-tight text-gray-900">404 Not Found</h1>
     </div>
   </header>
 </template>

src/pages/[id].vue

@@ -0,0 +1,33 @@
+<template>
+<div class="container-fluid bg-white mx-auto mt-3  p-0">
+    <div v-if="isLoading">
+        <h2>Loading ...</h2>
+    </div>
+    <div v-else>
+        <div v-html="page[0].content" class="container">
+
+        </div>
+    </div>
+</div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            page: null,
+            isLoading: true
+        }
+    },
+    mounted: function () {
+        fetch('https://api8.siliconpin.com/items/scc22?filter[slug][_eq]=' + this.$route.params.id)
+        // fetch('https://api8.siliconpin.com/items/scc22?slug=about-us')
+            .then(response => response.json())
+            .then(data => {
+          this.page = data.data
+          console.log(data)
+          this.isLoading = false
+        })
+    }
+}
+</script>