Lottie Animations for Vue 3

Common errors

• TypeError: (0 , vue3_lottie__WEBPACK_IMPORTED_MODULE_0__.Vue3Lottie) is not a function

  cause Attempting to import `Vue3Lottie` as a named export when it's a default export.
  fix Change the import statement from `import { Vue3Lottie } from 'vue3-lottie'` to `import Vue3Lottie from 'vue3-lottie'`.

• Property 'Vue3Lottie' was accessed during render but is not defined on instance.

  cause The `Vue3Lottie` component was not correctly registered with the Vue application, common in Nuxt 3 or non-global registrations.
  fix If in Nuxt 3, ensure you have a client-side plugin registering the component: `nuxtApp.vueApp.component('Vue3Lottie', Vue3Lottie);`. In a standard Vue CLI/Vite project, ensure it's imported and declared in the `components` option of your parent component or globally registered.

• Error: [Vue warn]: Failed to resolve component: Vue3Lottie

  cause The `Vue3Lottie` component is not imported or registered in the component where it's being used.
  fix Import `Vue3Lottie` in your script section (`import Vue3Lottie from 'vue3-lottie';`) and register it in the `components` option of your Vue component: `{ components: { Vue3Lottie } }`.

Warnings

• breaking Version 3.0.0 introduced breaking changes, including enhanced TypeScript support and the removal of the `dist/style.css` import. Projects upgrading from v2.x must adjust their setup.
  Fix: Review the official v3 documentation for updated TypeScript usage. Remove explicit imports for `dist/style.css` as it's no longer necessary or provided in the same manner. Ensure you are using the correct component import style (default export).
• gotcha The `Vue3Lottie` component is a default export, not a named export. Incorrectly importing it with curly braces will lead to a runtime error.
  Fix: Always use `import Vue3Lottie from 'vue3-lottie'` for importing the main component. Do not use `import { Vue3Lottie } from 'vue3-lottie'`.
• gotcha When integrating into Nuxt 3, it's crucial to register `Vue3Lottie` as a global component via a Nuxt plugin. Directly using `nuxtApp.vueApp.use(Vue3Lottie)` will not work as expected.
  Fix: Create a Nuxt plugin (e.g., `plugins/lottie.client.ts`) and register the component using `nuxtApp.vueApp.component('Vue3Lottie', Vue3Lottie);` as demonstrated in the Nuxt 3 import example.
• gotcha Animation data (the `animationData` prop) must be a parsed JSON object, not a string path to a JSON file. If loading from a URL, use the `animationLink` prop instead.
  Fix: Ensure that `animationData` is the actual parsed Lottie JSON. For files, `import AnimationData from 'path/to/animation.json'` handles this. If using a URL, pass the URL string to the `animationLink` prop introduced in v3.2.0.

Install

• npm install vue3-lottie npm
• yarn add vue3-lottie yarn
• pnpm add vue3-lottie pnpm

Imports

• Vue3Lottie
  wrong:

  import { Vue3Lottie } from 'vue3-lottie'

  correct:

  import Vue3Lottie from 'vue3-lottie'

  This is a default export. Importing as a named export will fail.
• Vue3Lottie (in Nuxt 3)
  wrong:

  import Vue3Lottie from 'vue3-lottie';
  
  export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp.use(Vue3Lottie);
  });

  correct:

  import { defineNuxtPlugin } from '#app';
  import Vue3Lottie from 'vue3-lottie';
  
  export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp.component('Vue3Lottie', Vue3Lottie);
  });

  For Nuxt 3, it's recommended to register the component globally via a plugin, not `use()`.
• Props interface (TypeScript)

  import type { Vue3LottieProps } from 'vue3-lottie'

  Use `import type` for type-only imports to ensure they are stripped during compilation.

Quickstart

This example demonstrates how to integrate and control a Lottie animation using the `Vue3Lottie` component in a Vue 3 application. It shows basic setup with local animation data, controlling playback direction, and handling component mount events. Remember to replace `./assets/lottie-animation.json` with your actual Lottie JSON file.

<!-- src/App.vue or a component file -->
<template>
  <div id="app">
    <h1>My Lottie Animation</h1>
    <Vue3Lottie
      :animationData="AnimationData"
      :height="200"
      :width="200"
      :loop="true"
      :autoplay="true"
      :speed="1"
      :direction="direction"
      @vnode-mounted="handleLottieMount"
    />
    <button @click="toggleDirection">Toggle Direction</button>
    <p>Current Direction: {{ direction }}</p>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import Vue3Lottie from 'vue3-lottie';
import AnimationData from './assets/lottie-animation.json'; // Assume you have a Lottie JSON file here

export default defineComponent({
  name: 'App',
  components: {
    Vue3Lottie,
  },
  setup() {
    const direction = ref(1); // 1 for forward, -1 for backward

    const toggleDirection = () => {
      direction.value = direction.value === 1 ? -1 : 1;
    };

    const handleLottieMount = (instance: any) => {
      console.log('Lottie component mounted:', instance);
      // You can access the lottie-web instance here if needed
    };

    return {
      AnimationData,
      direction,
      toggleDirection,
      handleLottieMount,
    };
  },
});
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>