add: content-pages plugin

app/content/wissen/klopapier.md

@@ -0,0 +1,7 @@
+---
+date: 2020-11-11
+---
+
+# Foo
+
+This is Foo blog post.

app/pages/wissen/[slug].vue

@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+const slug = useRoute().params.slug
+const { data: post } = await useAsyncData(`wissen-${slug}`, () => {
+  return queryCollection('wissen').path(`/wissen/${slug}`).first()
+})
+</script>
+
+<template>
+  <template v-if="post">
+    <ContentRenderer :value="post" />
+  </template>
+  <template v-else>
+    <section class="Legal flex-col gap-default content full">
+      <h1>Page Not Found</h1>
+      <p>Oops! The content you're looking for doesn't exist.</p>
+      <NuxtLink to="/">Go back home</NuxtLink>
+    </section>
+  </template>
+</template>

content.config.ts

@@ -0,0 +1,13 @@
+import { defineCollection, defineContentConfig, z } from '@nuxt/content'
+
+export default defineContentConfig({
+    collections: {
+        wissen: defineCollection({
+            type: 'page',
+            source: 'wissen/*.md',
+            schema: z.object({
+                date: z.string()
+            })
+        })
+    }
+})

nuxt.config.ts

@@ -46,7 +46,8 @@ export default defineNuxtConfig({
     'nuxt-ripple',
     '@nuxtjs/sitemap',
     '@nuxtjs/robots',
-    '@nuxtjs/plausible'
+    '@nuxtjs/plausible',
+    '@nuxt/content'
   ],
 
   css : [

package.json

@@ -14,6 +14,7 @@
   "dependencies": {
     "@iconify-json/simple-icons": "^1.2.32",
     "@iconify-json/uil": "^1.2.3",
+    "@nuxt/content": "^3.5.1",
     "@nuxt/fonts": "^0.11.3",
     "@nuxt/icon": "^1.10.3",
     "@nuxtjs/device": "^3.2.4",