Nuxt•7mo ago

Accordion in nuxt-content

I want to create accordion component for nuxt-content markdown. I thought it would use NuxtUI Accordion (https://ui.nuxt.com/components/accordion) I would like every H2 to be turned into a title in accordion and the rest of the content to be hidden to make markdown look normal, like here:

::accordion
## This is accordion title
This is accordion **content**
1. something
2. something2
## New title here
Hello world
## End
Something here too
::

::accordion
## This is accordion title
This is accordion **content**
1. something
2. something2
## New title here
Hello world
## End
Something here too
::

Or if it is possible to create multiple slots simultaneously:

::accordion
#title
This is **FAQ** title 1
#content
This is content for FAQ-1
#title
This is FAQ title 2
#content
This is content for FAQ-2?
::

::accordion
#title
This is **FAQ** title 1
#content
This is content for FAQ-1
#title
This is FAQ title 2
#content
This is content for FAQ-2?
::

But I don't know how to get to the slots in the normal way, I tried:

<template>
    <div>
        <div class="title">
            <MDCSlot :body="items[0].title" />
        </div>
    </div>
</template>

<script setup>
const slots = useSlots()

const defaultSlotContent = slots.default();

const items = []
let item = {
    title: '',
    body: []
}
defaultSlotContent.forEach((node) => {
    if (node.type.tag == "h2") {
        if (item.title) {
            items.push(item)
            item = { title: '', body: [] }
        }
        item.title = node
    } else {
        item.body.push(node)
    }
})
console.log("items", items)
</script>

<template>
    <div>
        <div class="title">
            <MDCSlot :body="items[0].title" />
        </div>
    </div>
</template>

<script setup>
const slots = useSlots()

const defaultSlotContent = slots.default();

const items = []
let item = {
    title: '',
    body: []
}
defaultSlotContent.forEach((node) => {
    if (node.type.tag == "h2") {
        if (item.title) {
            items.push(item)
            item = { title: '', body: [] }
        }
        item.title = node
    } else {
        item.body.push(node)
    }
})
console.log("items", items)
</script>

but MDCSlot runs the entire $slots.default, and using the same slot name makes it rendered one at a time Or if its not worth doing - can I use slots like this?

::accordion
---
items:
    - 
        label: "What this guide is about"
        slot: "test"
    - label: "Title here"
---
#test
Hello world
::

::accordion
---
items:
    - 
        label: "What this guide is about"
        slot: "test"
    - label: "Title here"
---
#test
Hello world
::

Accordion.vue: <UAccordion :items="items" />

1 Reply

Mustached_Maniac•6mo ago

Just seeing if you got something working on this? I've been banging my head against the wall and getting nowhere!

Gaming

Programming

Accordion in nuxt-content