Nuxt•2mo ago

Extract children from li

I’m trying to render the content of a slot in a component, but the content inside the <li> isn’t showing only the icons appear. Does anyone know what I’m doing wrong here?

20 Replies

kapa.ai•2mo ago

Hi @DJ Kondzio. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I'm sorry, but the knowledge sources do not contain enough information to provide a definitive answer to your specific issue with extracting children from <li> elements in a slot, or why only icons are appearing and not the slot content. However, if you are using Nuxt Content and rendering slot content inside a custom component, make sure you are using the <slot /> element correctly in your component template. For example:

<template>
  <li>
    <slot />
  </li>
</template>

<template>
  <li>
    <slot />
  </li>
</template>

If you want to unwrap certain tags (like <p>) from the slot content, you can use the mdc-unwrap prop as described in the Nuxt Content documentation:

<template>
  <li>
    <slot mdc-unwrap="p" />
  </li>
</template>

<template>
  <li>
    <slot mdc-unwrap="p" />
  </li>
</template>

This will remove the wrapping <p> tags from the slotted content, which can sometimes interfere with rendering inside list items. For more details, see the Nuxt Content slot documentation. If you are using a UI component from Nuxt UI (like navigation menus, trees, or timelines), ensure you are using the correct slot names and passing the right props, as shown in the various examples in the knowledge sources. If you can provide more context or code, I may be able to give a more targeted answer. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@217727541321007104> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

DJ KondzioOP•2mo ago

message.txt

DJ KondzioOP•2mo ago

In md file I use like that

::changelog-list{type=new}
* Lorem ipsum dolor sit amet, consectetur adipiscing elit. **Aliquam bibendum lorem vitae purus ultricies interdum.** `Pellentesque interdum venenatis tellus, id efficitur nisi ultrices et.`
* Mauris eu dolor ex. Sed volutpat enim in finibus aliquet.
* Donec urna ex, varius a lobortis maximus, consequat id dui.
* Donec commodo nulla sit amet tempus cursus. Aliquam erat volutpat.
::

::changelog-list{type=new}
* Lorem ipsum dolor sit amet, consectetur adipiscing elit. **Aliquam bibendum lorem vitae purus ultricies interdum.** `Pellentesque interdum venenatis tellus, id efficitur nisi ultrices et.`
* Mauris eu dolor ex. Sed volutpat enim in finibus aliquet.
* Donec urna ex, varius a lobortis maximus, consequat id dui.
* Donec commodo nulla sit amet tempus cursus. Aliquam erat volutpat.
::

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: Sorry @DJ Kondzio, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

DJ KondzioOP•2mo ago

@kapa.ai But I need get li children in script tag content and render in template tag

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I'm sorry, but the knowledge sources do not contain explicit information on how to programmatically extract the children of an <li> element from a slot in the <script setup> section and then render them in the <template> in Nuxt or Vue. The available documentation covers how to use slots for content projection and how to unwrap tags using the mdc-unwrap prop in Nuxt Content, but it does not describe accessing slot content in the script and re-rendering it elsewhere in the template Nuxt Content Slot Documentation. If you need to manipulate or access slot content in the script, this typically requires advanced usage such as render functions or custom slot processing, which is not covered in the provided sources. If you can clarify your use case or provide more details, I can check if any related patterns are documented. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@217727541321007104> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

DJ KondzioOP•2mo ago

@kapa.ai But I try to do this with useSlots()

const slots = useSlots();
function extractLis(raw: any[] = []): any[] {
  const lis: any[] = [];
  raw.forEach((vnode) => {
    if (vnode?.type?.tag === 'ul') {
      const ulChildren = Array.isArray(vnode.children)
        ? vnode.children
        : (vnode.children?.default?.() ?? []);
      ulChildren.forEach((li) => {
        if (li?.type?.tag === 'li') {
          lis.push(li);
        }
      });
    }
  });

  return lis;
}

const slots = useSlots();
function extractLis(raw: any[] = []): any[] {
  const lis: any[] = [];
  raw.forEach((vnode) => {
    if (vnode?.type?.tag === 'ul') {
      const ulChildren = Array.isArray(vnode.children)
        ? vnode.children
        : (vnode.children?.default?.() ?? []);
      ulChildren.forEach((li) => {
        if (li?.type?.tag === 'li') {
          lis.push(li);
        }
      });
    }
  });

  return lis;
}

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I'm sorry, but the knowledge sources do not contain explicit information or examples about using useSlots() to programmatically extract <li> children from slot content in the <script setup> section and render them in the template. The available documentation covers standard slot usage and unwrapping tags with the mdc-unwrap prop in Nuxt Content, but does not address advanced vnode manipulation or extracting children from slots in this way Nuxt Content Slot Documentation. If you need to manipulate slot content at the vnode level, this is considered an advanced Vue pattern and is not documented in the provided Nuxt or Nuxt UI sources. If you have a more specific use case or can provide additional context, I can check if any related patterns are documented. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@217727541321007104> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

DJ KondzioOP•2mo ago

@kapa.ai Are there any replacements for this in Nuxt 4?

const { flatUnwrap, unwrap } = useUnwrap()

const { flatUnwrap, unwrap } = useUnwrap()

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I'm sorry, but the knowledge sources do not mention a useUnwrap() composable or provide any direct replacements for flatUnwrap or unwrap in Nuxt 4. There is no documentation or migration guidance about these utilities in the provided sources. However, for unwrapping tags in Markdown content (such as removing <p> or <li> wrappers), Nuxt Content v3+ recommends using the mdc-unwrap prop on the native Vue <slot> component or the unwrap prop on the <ContentRenderer> component. For example:

<slot mdc-unwrap="p" />

<slot mdc-unwrap="p" />

<ContentRenderer :unwrap="'ul li'" />

<ContentRenderer :unwrap="'ul li'" />

This approach is now the recommended way to "unwrap" elements in Nuxt Content, replacing the need for custom unwrapping utilities in most cases Nuxt Content Slot Documentation ContentRenderer Props. If you were using useUnwrap() for something other than Markdown/slot unwrapping, the knowledge sources do not provide an alternative. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@217727541321007104> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

DJ KondzioOP•2mo ago

@kapa.ai but I need unwrap in script setup and render component

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I'm sorry, but the knowledge sources do not contain any information about unwrapping Markdown or slot content programmatically within the <script setup> section in Nuxt 4 or Nuxt Content. All documented unwrapping functionality—such as the mdc-unwrap prop for slots or the unwrap prop for <ContentRenderer>—is designed to be used in the template, not in the script context Nuxt Content Slot Documentation ContentRenderer Props. There is no mention of a composable or utility (like useUnwrap()) that allows you to unwrap content in the script and then render it in the template. If you require this functionality, it is not covered in the official documentation or migration guides provided in the knowledge sources. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@217727541321007104> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

DJ KondzioOP•2mo ago

@kapa.ai I know that Nuxt Content use inside @nuxtjs/mdc, maybe I can use useSlots and function form @nuxtjs/mdc to extract <li> childrens?

<script setup lang="ts">
const props = defineProps<{
  type?: 'new' | 'fix' | 'removed' | 'update';
}>();

const slots = useSlots();
function extractLis(raw: any[] = []): any[] {
  const lis: any[] = [];
  raw.forEach((vnode) => {
    if (vnode?.type?.tag === 'ul') {
      const ulChildren = Array.isArray(vnode.children)
        ? vnode.children
        : (vnode.children?.default?.() ?? []);
      ulChildren.forEach((li) => {
        if (li?.type?.tag === 'li') {
          lis.push(li);
        }
      });
    }
  });

  return lis;
}
</script>

<template>
  <ul class="not-prose">
    <li
      v-for="(li, index) in extractLis(slots.default?.())"
      :key="index"
      class="flex items-start mb-2 last:mb-0"
    >
      <UBadge
        :color="badgeColor"
        class="list-icon flex justify-center items-center p-[1px] mt-[3px] me-2 size-6 rounded-full"
      >
        <UIcon :name="badgeIcon" class="size-6 m-[3px]" />
      </UBadge>
      <span class="text-sm">
        <template v-for="(child, cIndex) in flattenLiChildren(li.children)">
          <component v-if="child" :is="child" />
        </template>
      </span>
    </li>
  </ul>
</template>

<script setup lang="ts">
const props = defineProps<{
  type?: 'new' | 'fix' | 'removed' | 'update';
}>();

const slots = useSlots();
function extractLis(raw: any[] = []): any[] {
  const lis: any[] = [];
  raw.forEach((vnode) => {
    if (vnode?.type?.tag === 'ul') {
      const ulChildren = Array.isArray(vnode.children)
        ? vnode.children
        : (vnode.children?.default?.() ?? []);
      ulChildren.forEach((li) => {
        if (li?.type?.tag === 'li') {
          lis.push(li);
        }
      });
    }
  });

  return lis;
}
</script>

<template>
  <ul class="not-prose">
    <li
      v-for="(li, index) in extractLis(slots.default?.())"
      :key="index"
      class="flex items-start mb-2 last:mb-0"
    >
      <UBadge
        :color="badgeColor"
        class="list-icon flex justify-center items-center p-[1px] mt-[3px] me-2 size-6 rounded-full"
      >
        <UIcon :name="badgeIcon" class="size-6 m-[3px]" />
      </UBadge>
      <span class="text-sm">
        <template v-for="(child, cIndex) in flattenLiChildren(li.children)">
          <component v-if="child" :is="child" />
        </template>
      </span>
    </li>
  </ul>
</template>

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on the knowledge sources provided, there is no official documentation or API in Nuxt Content or Nuxt UI that exposes internal MDC utilities (such as a function to programmatically unwrap or extract <li> children from slot content in the <script setup> section). The recommended and documented approach for unwrapping elements is to use the mdc-unwrap prop on the <slot> component within your template, not in the script context Nuxt Content Slot Documentation. There is also no mention in the sources of using internal functions from js/mdc or similar packages for this purpose. The use of useSlots() and manual vnode traversal, as shown in your example, is not covered or recommended in the official documentation. All documented unwrapping and slot manipulation is template-based. If you need to manipulate or extract children from slots in the script, this is considered an advanced Vue pattern and is not supported or documented by Nuxt Content or Nuxt UI. Therefore, I cannot confirm that this approach is supported or recommended, and there is no official API for this in the knowledge sources. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@217727541321007104> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

Extract children from li

Did you find this page helpful?