How to use Partials Documentation

[khawarizmus]

Environment

------------------------------
- Operating System: Darwin
- Node Version:     v18.18.2
- Nuxt Version:     3.7.4
- CLI Version:      3.9.0
- Nitro Version:    2.7.1
- Package Manager:  bun@1.0.4
- Builder:          -
- User Config:      ssr, imports, devtools, modules, content, runtimeConfig, components
- Runtime Modules:  @nuxtjs/tailwindcss@6.8.0, @pinia/nuxt@0.4.11, @formkit/nuxt@1.2.2, @vueuse/nuxt@9.13.0, @nuxt/content@2.8.5, nuxt-vitest@0.11.0
- Build Modules:    -
------------------------------

Reproduction

The Docs

Describe the bug

The docs don't mention what partials can be used for nor how to use them. I can imagine that they can be included in documents just like how Vitepress can inject documents. But when i tried that syntax it didn't work

Additional context

I opened an issue because this question was asked a while ago in the discussion and didn't receive any answer https://github.com/nuxt/content/discussions/2049

Logs

No response

[Barbapapazes]

Hello,

something like this: https://github.com/unjs/website/blob/main/components/home/HomeNoArticles.vue?

[khawarizmus]

So it's just a way to render markdown text and not treat it as an Blog/Article/Page ? can a partial be injeccted in a Blog/Article/Page markdown file like Vitepress offer?

[Barbapapazes]

Ooh you talk about something like this! https://vitepress.dev/guide/markdown#markdown-file-inclusion I never try but could just be some plugins to add

[khawarizmus]

Yes, as I pointed to the link in my original question. I have found this plugin https://github.com/dotansimha/remark-import-partial which looks great but i want to avoid using something like that if Nuxt/Content support such a behaviour out of the box. hence i am asking here.

Maybe @pi0 or @Atinux have some insights on this?

[Barbapapazes]

Yes, as I pointed to the link in my original question. I have found this plugin dotansimha/remark-import-partial which looks great but i want to avoid using something like that if Nuxt/Content support such a behaviour out of the box. hence i am asking here.

Maybe @pi0 or @Atinux have some insights on this?

There is no such behavior out of the box but content is parsed using remark. https://content.nuxt.com/get-started/configuration#markdown

[Schille]

FWIW: Here is my humble solution.

Partial.vue

<template>
    <div>
        <ContentRenderer :value="data">
            <template #empty>
                <p>No content found.</p>
            </template>
        </ContentRenderer>
    </div>
</template>

<script setup lang="ts">

const props = defineProps({
    content: {
        default: "default"
    }

});
const arg = ref(props.content);
const { data } = await useAsyncData(arg.value, () => queryContent('_partials/' + arg.value).where({ _partial: true }).findOne());

</script>

Whatever.md

[...]
<!--- Featured Services Grid --->
:::GlobalPartial{content=services-grid-2}
:::
[...]

[github-actions[bot]]

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.