Allow external variables into markdown render

[maximepvrt]

I would like to request the addition of external variables support in Nuxt Content. As of now, it is not possible to use variables defined outside of the content file, which can limit the flexibility of the application.

In many cases, it is essential to have access to external variables to generate dynamic content or to implement complex logic. For instance, it could be useful to define site-wide variables or to read data from an external API.

Adding external variables support would greatly enhance the capabilities of Nuxt Content and make it a more powerful and flexible tool. It would also help developers to build more sophisticated applications while keeping the content organized and easy to manage.

It would be an extension of this feature #1266

Thank you for considering my request.

[ManasMadrecha]

You can easily create 1 component, say "v.vue".

And use it in your markdown file like this:

:v{var="name"} <!-- `name` can be any global variable's key -->

Here,

The v component

• Can use accept one prop called var.
• Can fetch any global variable you have set up in your app, for e.g., via appConfig
• Use the prop as a key of the global variable
• And render it in the template

[maximepvrt]

I would like to inject a variable retrieved from useFetch into <ContentRenderer/> using a prop (for example data).

<template>
   <ContentRenderer :value="page" :data="data"/>
</template>

<script setup>
const { data: page } = await useAsyncData('page', () => queryContent(route.path).findOne());
const { data } = await useFetch('https://api.nuxtjs.dev/posts/1')
</script>

# The best post is {{$data.title}}

[maximepvrt]

@farnabaz @atinux What do you think ?

[ManasMadrecha]

In order to add random external variables into data so as to render it in markdown as a variable, you can add the variables in the afterParse hook of the Content Module. You can even add them in beforeParse hook if #2056 is resolved.

Refer this: https://content.nuxtjs.org/api/advanced#contentfileafterparse

Note: You can't add them after the markdown has already been rendered, by simply adding them as prop in the template section.

So, in the afterParse hook, you can async fetch whatever you want, and then simply add it as a key of the file. The afterParse hook works as a custom rehype-plugin. While it will work, but if it doesn't work, then you can try adding them in a custom remark-plugin as well.

I had tried this in Content V1 as well to fetch GitHub releases and then add them as a key into the implicit frontmatter in the afterParse hook, to later render them in the markdown.

[maximepvrt]

@ManasMadrecha 😉 Doc : https://content.nuxt.com/usage/markdown#example-2-define-in-external-with-contentrenderermarkdown

[ManasMadrecha]

Omg this is really cool @maximepvrt 👏🏻

[Rednas83]

Tried variables in markdown but I can't get it to work😭

app.config.ts

import { defineAppConfig } from "nuxt/app";

export default defineAppConfig({
  name: "playing with markdown",
  color: "red",
})

markdown.md

---
title: Markdown example
custom: Custom text
---

{{ title || 'Local variable like title work as expected' }}

{{ custom || 'Custom local variables are not supported' }}

{{ name || 'Global variables from app.config.ts are not working' }}

{{ app.config.name || 'Global variables from app.config.ts are not working' }}

Returns

Is it still suported? Preferable a solution with local variables so that it takes less memory and startup time🤞

Also tried nuxt-mdx but that has still has some issues as mentioned in acelletti/nuxt-mdx#1