Gallery, card, avatar, animation background, flexblock, ... more component support out-of-box

[zillionare]

https://github.com/ksky521/nodeppt seems have more components out-of-box. Slidev is powerful and hackable, but hard for one know very little about js and vue.

It would be great if slidev can have those very common components for presentation:

1. Gallery (scrollable cards)
2. Card with image, title, text and clickable
3. avatar
4. more in-page layout components, like Grids (with 9 grid cells)
5. Timeline, refer to https://github.com/NUKnightLab/TimelineJS3, very common in presentation
6. markdown mindmap, refer to https://stackblitz.com/edit/markmap-vue?file=src%2Fapp.vue it's way beautiful than mindmap in mermaid.

[antfu]

Thanks for bringing this up - while Slidev is somewhat quite opinionated already - I don't want it to be more opinionated. The point of having Slidev that built on top of Web is that we want you to have full control with everything available for Web. I am happy to open more flexibility if anything is not yet possible to integrate, but definitely not more components. Thank you.

[zillionare]

Understand. I found vue devUI contains many components suitable for presentation:

Steps:

Timeline:

Progress to show how many slides left:

However, I'm not familiar with web front tech, don't know how to integrate it with slidev.

as DevUI's documentation says:

import Components from 'unplugin-vue-components/vite'
import { DevUiResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({
  plugins: [
    // 新增
    Components({
      resolvers: [
        DevUiResolver()
      ]
    })
  ]
})

by doing this, I can make devUI works as I want, but this will cause some important slidev components failed to be loaded, for example, it will report failed to resolve component SlidesTotal.

Many thanks if anyone could help!

[KermanX]

Currently, you can manually import the DevUI‘s components in each slide when you are using it:

<script setup>
import MyComponent from "devui/.../a.vue"
</script>

# Slide 3

<my-component />

Using unplugin-vue-components can be a little bit hard currently. I will work on this maybe in the next week.