Fech data from an external app

[daishizenSensei]

Hello everyone,

We use nuxt content for our content management. And we have to build another app in a new repo, but we have to fetch content of our first app. Is is possible to open an endpoint in production? Or maybe possible to achieve that with another cms git?
Hope that we are not blocked now with that... :(

Thanks for your help,
Kevin

[atinux]

Hi @kbrosseau

We plan to add this possibility very soon.

[daishizenSensei]

Hi @atinux, Great!

[cschweda]

One way to do this now (until it's actually a feature) is to run a node script before the build starts to (a) fetch content from one or more external endpoints, (b) save everything into your app's /content directory, and then (c) generate the Nuxt app.

[madsh93]

@atinux is this feature planned for v2?

[atinux]

It's planned yes 😀
We will need it in order to merge all of our modules documentation into one website.

[Clex1o1]

Hi all, I ran into the same problem. While @cschweda's solution only works once in the build step (I guess) I solved it by using the markdown-it library in my component directly:

<script lang="ts" setup>
import MarkDownIt from "markdown-it";

const md = new MarkDownIt({ html: true });

const props = withDefaults(
  defineProps<{
    Text: string;
  }>(),
  {}
);
</script>
<template>
  <article class="prose" v-html="md.render(props.Text)"></article>
</template>

[zefman]

Bump. Would love this feature! Our markdown is in a CMS for a lot of reasons and it would be awesome to use Nuxt content for the rendering and all the features that come with it.

[github-actions]

This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 30 days.

[Syndesi]

Just a comment to keep it open :)

[cschweda]

yes, please keep this open. I've solved my issue with Nuxt Content with the pre-build step I mention above, but I'd love to see some sort of configurable 'fetcher' for external content.

Happy to provide an example of my pre-build code if anyone is interested.

[adamdehaven]

I'd love to see some sort of configurable 'fetcher' for external content.

Are you wanting to fetch the external content during the build so that it can then be statically generated, or do you want fetching done at runtime so that the initial page can be loaded from the server, then subsequent pages can be fetched from the client?

[cschweda]

I'd love to see some sort of configurable 'fetcher' for external content.

Are you wanting to fetch the external content during the build so that it can then be statically generated, or do you want fetching done at runtime so that the initial page can be loaded from the server, then subsequent pages can be fetched from the client?

Doesn't really matter, right? All that matters is when the page is rendered the content is there. How it happens? Don't care.

What I do now is -- as I say above -- do a pre-build process that (a) grabs the data from the cms, (b) inserts it into files in content, and then (c) renders the content on the page.

It works well -- no issues -- but I'm never sure if a pre-build step is a best-practice type-thing -- or if it's just a hack. I'm sensing it'a a hack -- and that's fine -- it works -- but I would like a more elegant option.

EDIT: Btw, I use Strapi -- so it's super-easy to get the content during the pre-build. That's not the issue. The issue is if there's a way to do it directly in Nuxt Content/

[adamdehaven]

If you're fetching content before building (i.e. generate) and the content itself is static, I don't think there's anything wrong with using a build hook. You could trigger this whenever your pages are created/edited/etc., re-deploy, and you're good to go. This sounds essentially like your existing setup and supports deploying a fully-static, pre-rendered site.

While content v3 supports a remote source such as a GitHub repository, again, as a fully-static, pre-rendered site, there is another more custom solution you could set up assuming the following:

• Your content can be returned from your remote source as raw MDC content
• You don't need full site generation
• It's acceptable to render the first page request on the server at runtime; all other pages would then be fetched and rendered in the client
• Shown below is pseudo-code, adjust for your usage

---

1. Similar to the instructions for Implementing Document Driven mode, create a catch-all page component pages/[...slug].vue that will serve all of your pages, regardless of path.

2. Inside the page component, fetch the content from your external source, and manually parse and render in your component via @nuxtjs/mdc (this is what does the parsing under the hood in Nuxt Content):

   <template>
     <div v-if="ast">
       <MDCRenderer
         v-if="ast?.body"
         :body="ast.body"
         :data="ast.data"
       />
     </div>
   </template>
   
   <script lang="ts" setup>
   import { parseMarkdown } from '@nuxtjs/mdc/runtime'
   
   const route = useRoute()
   const currentPath = computed((): string => route.path)
   const { data: ast } = await useAsyncData(`parsed-page-${currentPath.value}`, async () => {
     // Call to your external API  
     const strapiMarkdown = await $fetch(`https://example.com/api/content?pagePath=${currentPath.value}`)
     return parseMarkdown(strapiMarkdown)
   }, { 
     watch: [currentPath] 
   })
   </script>

---

You'll need to account for loading and error states, etc. and ensure you install @nuxtjs/mdc and initialize it as a module in your nuxt.config.ts.

If you configure your app to render via SSR, you can do an extra step and configure routeRules in your nuxt.config.ts for proper caching, swr behavior, etc.

[github-actions]

This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 30 days.

[github-actions]

This issue was closed because it has been stalled for 30 days with no activity.