[Feat]: For Vue docs, use a more common SFC format

[mujahidfa]

Which variants of Embla Carousel are relevant to this request?

• embla-carousel (Core)
• embla-carousel-react
• embla-carousel-vue
• embla-carousel-svelte
• embla-carousel-autoplay
• embla-carousel-solid
• embla-carousel-auto-height
• embla-carousel-class-names
• embla-carousel-docs (Documentation)
• embla-carousel-docs (Generator)

Feature description

To use a format for Vue Single File Components (SFCs) that is more succint and commonly used by the Vue community.

As per what is shown in the Introduction page of the Vue docs:

1. <script setup> is more commonly used, and
2. <script setup> -> <template> -> <style scoped> order is more common

Here's the current example found in the docs:

<template>
  <div class="embla" ref="emblaNode">
    <div class="embla__container">
      <div class="embla__slide">Slide 1</div>
      <div class="embla__slide">Slide 2</div>
      <div class="embla__slide">Slide 3</div>
    </div>
  </div>
</template>

<script>
  import emblaCarouselVue from 'embla-carousel-vue'

  export default {
    setup() {
      const [emblaNode] = emblaCarouselVue()
      return { emblaNode }
    }
  }
</script>

And here's the proposed change in format - less verbose, more commonly used:

<script setup>
import emblaCarouselVue from 'embla-carousel-vue'

const [emblaNode] = emblaCarouselVue()
</script>

<template>
  <div class="embla" ref="emblaNode">
    <div class="embla__container">
      <div class="embla__slide">Slide 1</div>
      <div class="embla__slide">Slide 2</div>
      <div class="embla__slide">Slide 3</div>
    </div>
  </div>
</template>

Before submitting

• I've made research efforts and searched the documentation
• I've searched for existing issues
• I agree to follow this project's Contributing Guidelines for feature requests

[mujahidfa]

• Pull request created in [Feat]: For Vue docs, use a more common SFC format #701!