Codepen vuejs 3 example (CDN) #526

Sp0ne · 2021-11-18T13:07:44Z

Sp0ne
Nov 18, 2021

Ohayô gozaimasu 👋🏻,

i try to use your awesome slider via CDN in this codepen
and for some reasons, i've errors:

My Javascript:

<script>
...
import { Splide, SplideSlide } from "https://cdn.skypack.dev/@splidejs/[email protected]";

export default {
  components: { Splide, SplideSlide },
  setup() {
    const options = { rewind: true, gap   : '1rem' };
    
    return { options }
  }
};
</script>

My HTML:

<Splide :options="options">
    <SplideSlide class="card">
      <img src="https://picsum.photos/seed/picsum/200/300"/>
    </SplideSlide>
    <SplideSlide class="card">
      <img src="https://picsum.photos/seed/picsum/200/300"/>
    </SplideSlide>
    <SplideSlide class="card">
      <img src="https://picsum.photos/seed/picsum/200/300"/>
    </SplideSlide>
</Splide>

My error :

[Vue warn]: Unhandled error during execution of render function 
  at <Splide options= Object { rewind: true, gap: "1rem" }> 
  at <Pen>

i don't know if i use the right process, for calling compoment via CDN.
i try to follow vuejs instructions here: https://splidejs.com/integration/vue-splide/

Can you tell why i'm wrong ?

Here is the link of codepen: https://codepen.io/Sp0ne/pen/YzxdBBw

Thanks a lot for your time
All Best'