Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
MickL opened this issue May 18, 2024 · 0 comments
Open

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

MickL opened this issue May 18, 2024 · 0 comments
Assignees
Labels
🔖4.x v4.x~ related issue ✋Suggestion Suggest new things 📦Vue3 @egjs/vue3-flicking related issue

Comments

@MickL
Copy link

MickL commented May 18, 2024

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>
@malangfox malangfox self-assigned this Jun 6, 2024
@malangfox malangfox added ✋Suggestion Suggest new things 🔖4.x v4.x~ related issue 📦Vue3 @egjs/vue3-flicking related issue labels Jun 6, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🔖4.x v4.x~ related issue ✋Suggestion Suggest new things 📦Vue3 @egjs/vue3-flicking related issue
Projects
None yet
Development

No branches or pull requests

2 participants