add microCMS

nuxt.config.ts

@@ -1,5 +1,10 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
+  modules: ["nuxt-microcms-module"],
+  microCMS: {
+    serviceDomain: process.env.MICROCMS_SERVICE_DOMAIN,
+    apiKey: process.env.MICROCMS_API_KEY,
+  },
   devtools: { enabled: true },
   build: {
     transpile: ['gsap']
@@ -11,14 +16,6 @@ export default defineNuxtConfig({
       },
     },
   },
-  runtimeConfig: {
-    public: {
-      newt: {
-        spaceUid: process.env.NEWT_SPACE_UID,
-        token: process.env.NEWT_CDN_API_TOKEN
-      }
-    }
-  },
   typescript: {
     typeCheck: true
   },

package.json

@@ -17,7 +17,7 @@
   "dependencies": {
     "@nuxt/image": "^0.7.1",
     "gsap": "^3.12.2",
-    "newt-client-js": "^3.2.6",
+    "nuxt-microcms-module": "^3.0.2",
     "vue-tsc": "^1.8.8"
   }
 }

pages/404.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <h1>404: Page not found</h1>
+  </div>
+</template>

pages/articles/[id].vue

@@ -0,0 +1,36 @@
+<template>
+    <main>
+	<template v-if="data">
+	<h1>
+		{{ data.title }}
+	</h1>
+	<img
+		:src="data.eyecatch?.url"
+		:width="data.eyecatch?.width"
+		:height="data.eyecatch?.height"
+		alt=""
+	/>
+	<div>
+		<div>
+		{{ data.category?.name }}
+		</div>
+		<div>
+		{{ data.publishedAt ?? data.createdAt }}
+		</div>
+	</div>
+	<div v-html="data.content"></div>
+	</template>
+    </main>
+</template>
+
+<script setup lang="ts">
+import { Blog } from "../../types/blog";
+
+const { params } = useRoute();
+
+const { data } = await useMicroCMSGetListDetail<Blog>({
+  endpoint: "blogs",
+  contentId: Array.isArray(params.id) ? params.id[0] : params.id,
+});
+console.log(data)
+</script>