devlog#02 (draft) : Instant update nuxt content articles in a production build

• ContentDoc uses ContentRenderer and ContentQuery under the hood
  • 👉 we can render our article using <ContentRenderer :value="toRender" />
• The value attributes expects an abstract syntax tree that you can fetch using QueryContent.findOne
  • 👉 Which means we can provide our own tree instead of relying on the QueryBuilder nuxt content offers to us.
• As the abstract syntax tree is a javascript object, we can store the stringified ast in a database
  • 👉 no need to rely on files in the /content folder and the content query api.
• Nuxt exports a markdown to AST transformer :

  • // @ts-expect-error - Avoid typescript import error, as nuxt's internal transformer is not meant to be used like this
    import { transformContent } from '@nuxt/content/transformers';

• We can then use a server route to convert our file into AST:

  • export default defineEventHandler(async (event) => {
        const file = `markdown file without yaml header !`;
        return await transformContent("content:test.md", file, {});
    });

• And render directly the data using UseFetch

  • <template>
        <main class="">
            <ContentRenderer :value="data" />
        </main>
    </template>
    <script setup lang="ts">
        const { data, error } = await useFetch("/api/test");
    </script>