naver / egjs-flicking

🎠 ♻️ Everyday 30 million people experience. It's reliable, flexible and extendable carousel.
https://naver.github.io/egjs-flicking/
MIT License
2.78k stars 129 forks source link

Rewrite Vue3 examples to use <script setup> instead #862

Open MickL opened 6 months ago

MickL commented 6 months ago

Description

The examples in the docs show how to setup flicking (and plugins) in an old fashioned way. Personally I would replace them to use the <script setup> syntax, e.g.:

<script setup>
import Flicking from "@egjs/vue3-flicking";
</script>

<template>
<Flicking :options="{ align: 'prev', circular: true }" @move-end="onMoveEnd">
  <div class="panel">1</div>
  <div class="panel">2</div>
  <div class="panel">3</div>
</Flicking>
</template>

Instead of:

<script>
import Flicking from "@egjs/vue3-flicking";

export default {
  components: {
    Flicking: Flicking
  }
}
</script>

This will be useful especially to everyone new to Vue. It took me some time that a plugin could be setup like this:

<Flicking
     :options="{ align: 'prev' }"
     :plugins="[new Pagination({ type: 'bullet' })]"
>
    ...
</Flicking>

Instead of writing this:

<script>
export default {
  components: {
    Flicking
  },
  data() {
    return {
      plugins: [new Pagination({ type: 'bullet' })]
    }
  }
}
</script>