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

[mujahidfa]

• Closes: [Feat]: For Vue docs, use a more common SFC format #700.

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>

[davidjerleke]

Hi @mujahidfa,

Thanks a lot for your contribution, great initiative 👍. While at it, would you mind going through the code blocks in the API section and see if we can find more places where we could use the more succinct syntax? For example (.mdx files are located here):

• https://www.embla-carousel.com/api/options/
• https://www.embla-carousel.com/api/methods/
• https://www.embla-carousel.com/api/events/
• https://www.embla-carousel.com/api/plugins/

Thanks a lot for your time!

Best,
David

[mujahidfa]

Hi @mujahidfa,

Thanks a lot for your contribution, great initiative 👍. While at it, would you mind going through the code blocks in the API section and see if we can find more places where we could use the more succinct syntax? For example (.mdx files are located here):

• https://www.embla-carousel.com/api/options/
• https://www.embla-carousel.com/api/methods/
• https://www.embla-carousel.com/api/events/
• https://www.embla-carousel.com/api/plugins/

Thanks a lot for your time!

Best, David

Implemented in aea826e!

[davidjerleke]

@mujahidfa thanks for the additions 🙂!

[davidjerleke]

Nice work ⭐️! I will merge this as soon as possible.

[davidjerleke]

Thanks @mujahidfa for this. Really nice improvement ⭐. I decided to scrap the vue prism language alias because it breaks syntax highlighting in the .mdx files which I think is pretty important. Other than that this is awesome.

Best,
David