use of flatUnwrap and ContentSlot[unwrap] per the docs doesn't iterate properly through content

[samcarrington]

Environment

• Operating System: Windows_NT
• Node Version: v20.8.0
• Nuxt Version: 3.7.4
• CLI Version: 3.9.0
• Nitro Version: 2.6.3
• Package Manager: [email protected]
• Builder: -
• User Config: modules, typescript, app, colorMode, nitro, runtimeConfig, content
• Runtime Modules: @nuxtjs/[email protected], @nuxt/[email protected], @nuxtjs/[email protected], @nuxthq/[email protected]
• Build Modules: -

Reproduction

https://stackblitz.com/edit/nuxt-starter-zfuxp6?file=content%2Findex.md,components%2Fcontent%2FcontentList.vue

Describe the bug

Using the useUnwrap composable to unpack and re-render a list from a markdown file no longer effectively iterates through list items in the pass-through of the used slot from the iteration through flatUnwrap into the ContentSlot component.

The v-for iteration runs through the correct number of items, but the ContentSlot :use and unwrap parameters have no effect on the output, and the whole content of the list is rendered into each item rather than a single item.

Additional context

No response

Logs

No response

[Lexpeartha]

The only work around I found for this is to pin version to ~2.7.X and do workaround mentioned in #2254
Latter is only needed if you want to use nuxt 3.7+

[mklueh]

Any news on this?

I'd also wish the docs would cover how to use it. I had no idea how the list should look like in my markdown and thought you'd do something like this

. a
. b
. c

the markdown side on how to use named slots other than "default" is also not covered

[gsabater]

I'm having the same issue, right now im worndering if I should use two components or props to print the list items, but as of now, the iteration of list items using <ContentSlot :use="() => item" unwrap="li" /> is not working

[samcarrington]

This implementation has been broken over a year now - behaves contrary to the docs and doesn't iterate list items properly.

[masterkram]

Hello, I have also been having this issue. I came up with a workaround of making my List component from scratch:
Did not manage to understand however, why the approach with ContentSlot duplicates the list. Hope this helps.

<script setup lang="ts">
const { flatUnwrap, unwrap } = useUnwrap()
import { resolveComponent } from 'vue';

const slots = useSlots();


function renderListElements() {
  return flatUnwrap(slots.default!(), ['ul']
  ).map((element: any) => h(resolveComponent('MDCSlot'), { use: () => element, unwrap: 'li' }));
}

</script>

<template>
  <ul class="not-prose">
    <li v-for="el in renderListElements()">
      <Icon name="tabler:check" />
      <span>
        <component :is="() => unwrap(el, ['li'])" />
      </span>
    </li>
  </ul>
</template>

[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.