Documentation update for <script setup>

[rhclayto]

Hi,

It would be useful to give an example for Vue 3 using the <script setup> pattern. I haven't yet been able to figure out how to translate the example given here with setup() to <script setup>. Specifically, how to translate

components: {
      LottieAnimation
  },

from the export.

[rhclayto]

I have it working with the following config:

<script setup>
  import { onMounted, ref } from 'vue';
  // Lottie.
  import animationURL from '@/assets/animations/spinningLogo.json';
  const anim = ref(null);
  const loopComplete = () => {
    console.log('loopComplete');
  }
  const complete = () => {
    console.log('complete');
  }
  const enterFrame = () => {
    console.log('enterFrame');
  }
  onMounted(() => {
    // The DOM element will be assigned to the ref after initial render.
    anim.value.play();
  });
</script>
<template>
  <lottie-animation
    ref="anim"
     :animationData="animationURL"
     :loop="true"
    :autoPlay="false"
    @loopComplete="loopComplete"
    @complete="complete"
    @enterFrame="enterFrame"
    style="height:64px;"
  />
</template>

I had to take import LottieAnimation from 'lottie-web-vue' out of the component, otherwise it didn't work. It's already in the global scope.