# Vue Player
Vue 3 component for rendering Lottie and dotLottie animations, built on the core dotLottie web player.

To add Lottie animations to a Vue app, use `@lottiefiles/dotlottie-vue` — a Vue 3 component that renders `.lottie` and `.json` files. It wraps the core [dotLottie web player](/en/runtimes/distributions/js/v0.x/api/reference) and adds Vue-friendly props plus template-ref access to the underlying `DotLottie` instance.

The current version is [v0.x](/en/runtimes/distributions/vue/v0.x).

<Grid columns="2">
  <Feature title="Getting Started" icon="PiRocketLaunch" href="/en/runtimes/distributions/vue/v0.x">
    Install the component and render your first animation.
  </Feature>

  <Feature title="Examples" icon="PiCode" href="/en/runtimes/distributions/vue/v0.x/examples">
    Control playback, handle events, and switch between animations.
  </Feature>

  <Feature title="Advanced Usage" icon="PiSliders" href="/en/runtimes/distributions/vue/v0.x/advanced-usage">
    Drive the player through the DotLottie instance.
  </Feature>

  <Feature title="Props Reference" icon="PiListBullets" href="/en/runtimes/distributions/vue/v0.x/props-reference">
    All component props with types and defaults.
  </Feature>

  <Feature title="API Reference" icon="PiBookOpen" href="/en/runtimes/distributions/vue/v0.x/api-reference">
    setWasmUrl, instance access, and core player API links.
  </Feature>
</Grid>