Making Vueper-Slides work with Markdown front matter in Gridsome

Question

I've installed various slideshow/carousels for Vue JS but kept breaking my build, until I came across Vueper-Slides.

Using Gridsome's $page.post.slides to query the front-matter metadata in my Markdown, my image array looks like this:

---
title: My title
path: /my-title
date: 2020-09-12
summary: Lorem ipsum dolor sit amet
tags: ["tags", "tags"]
slides:
  - { image: "./images/image1.jpg" }
  - { image: "./images/image2.jpg" }
  - { image: "./images/image3.jpg" }
---

In the CarouselComponent.vue I have:

    <vueper-slides>
        <vueper-slide
            v-for="(slide, i) in slides"
            :key="i"
            :image="$page.post.slides"
        />
    </vueper-slides>

In the script block I have:

import { VueperSlides, VueperSlide } from "vueperslides"
import "vueperslides/dist/vueperslides.css"

export default {
    name: "CarouselComponent",
    components: { VueperSlides, VueperSlide },
    data: () => ({
        slides: [],
    }),
}

At the moment, I'm getting a blank carousel - with no errors or [object object] for the <img src> tag in my console.

Does anyone know how I can make Vueper-Slides work with Gridsome? Apologies in advance if I'm not making myself very clear, as I've just started learning VueJS. :)

Many thanks in advance!

Answer 1

You have an empty slides array slides: [] that you are iterating with v-for, this results in an empty slideshow (no <vueper-slide>).

So instead you should put $page.post.slides in the v-for, and in :image give it slide.image.

Here is a working demo for you using Gridsome and a starter page: https://codesandbox.io/s/staging-water-ortxw?file=/src/pages/Index.vue