{"_id":"vue-lottie-player","_rev":"27-67a7ed8ca90f39d6521971c06f40f0e8","name":"vue-lottie-player","dist-tags":{"latest":"2.0.2"},"versions":{"0.1.9":{"name":"vue-lottie-player","version":"0.1.9","keywords":["vuejs","lottie","vue-lottie","lottie-vue","lottie-web","web-lottie","lottie-player","player-lottie","vue-lottie-player","lottie-player-vue","player-lottie-vue","vue-component","vue-animation","lottiefiles"],"author":{"name":"turopoff"},"license":"MIT","_id":"vue-lottie-player@0.1.9","maintainers":[{"name":"turopoff","email":"turopoff.n@gmail.com"}],"homepage":"https://github.com/turopoff/vue-lottie-player#readme","bugs":{"url":"https://github.com/turopoff/vue-lottie-player/issues"},"dist":{"shasum":"075ddbb27f4734cb838e50e27dd60d3f8e0645b1","tarball":"https://registry.npmjs.org/vue-lottie-player/-/vue-lottie-player-0.1.9.tgz","fileCount":8,"integrity":"sha512-jnZL4R338xbEAVfKD9h8tD/I74RSqe+emuL6bAmWBDJ8AogjLqopPALipXcqzd2e2MqoMJDTj6IccXN0JhsYZg==","signatures":[{"sig":"MEQCICzdpADPM6v5GDAtQKkZN9cnzKAkNFcK45E92OWcKgZDAiAcYafCGovZVkv7MWCzXCkexpAlCJyfwOpKnzDdKW6njg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":8643,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6TjKCRA9TVsSAnZWagAA/Z0P/376E06gIkRB9BkhK962\nin6NG4fYbSOEzs6Q/vMuDAkik0Mn+ckrF83+eqObMwW+ajyNKh14cDJ8B7me\njmoDFCcZEyWGdxV3wfbo+B9mIfNCzJzq+eZ1u6bshmCwuGXKXoFtiK9SPv7m\np5zejbqgy+q/+BJQ9XFMPdXut8PQeK8BHVG8P6gYJlWslkjxM7dzOMlua/2W\nm9xhHb2Etj3cfjUSObK8+2JTvQ21iEaeEuP+qItWpf799JZkPLNWqxSbVdgO\n0fD9XE4kCOutiZUkSTZUYgwmw4eLxQzOcaOHJczWdP/WrWYLc6haCpxXUIbb\n06XWILIePbGARzGjCJUzU55FFk1sK8aD2GxVZvWX47FKe7oXhtTobTAfasZA\n8/BFnDVtfB0j7sgYwFmM0/oaPXl/qTIlsqWSkIZ4IVUcsdWLwCIvrFRglWo4\nvhK7ipqglAPISZYd7A0f2sG7rkzvlO5dsyYa33wiqHXAv76hovsaJ+HstgqB\nzaEskZ4eg/2oXctWckogLu8P/NlyPzPulyraFjcm8irja5l0Ys2tbsMiGeLu\ngC0Zw6EVf62zZif79k/xIH7lebowUN8gIhuRz9157RIfOVQZV/IG6yQdu3Mt\nkd7zL8LU25FPJl2gktJS4EPmiwpegYkyDt2Z78RdQatGPl0MXHAsiOMD9ECj\nVIJX\r\n=plZn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"src/index.js","gitHead":"f3d92d76bf0683318a7f0ced546a88a771a1d597","private":false,"scripts":{"build":"webpack --config webpack.config.js"},"_npmUser":{"name":"turopoff","email":"turopoff.n@gmail.com"},"repository":{"url":"git+https://github.com/turopoff/vue-lottie-player.git","type":"git"},"_npmVersion":"6.14.4","description":"Lottie Animation Player for Vue","directories":{},"_nodeVersion":"12.18.0","browserslist":["> 1%","last 2 versions","not dead"],"dependencies":{"vue":"^2.6.11","core-js":"^3.6.5","lottie-web":"^5.6.10"},"eslintConfig":{"env":{"node":true},"root":true,"rules":{},"extends":["plugin:vue/essential","eslint:recommended"],"parserOptions":{"parser":"babel-eslint"}},"_hasShrinkwrap":false,"devDependencies":{"eslint":"^6.7.2","webpack":"^4.43.0","cross-env":"^7.0.2","node-sass":"^4.14.1","babel-core":"^6.26.3","css-loader":"^3.6.0","vue-loader":"^15.9.2","file-loader":"^6.0.0","sass-loader":"^8.0.2","webpack-cli":"^3.3.11","babel-eslint":"^10.1.0","babel-loader":"^8.1.0","@vue/cli-service":"~4.4.0","babel-preset-env":"^1.7.0","eslint-plugin-vue":"^6.2.2","webpack-dev-server":"^3.11.0","@vue/cli-plugin-babel":"~4.4.0","vue-template-compiler":"^2.6.11","@vue/cli-plugin-eslint":"~4.4.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-lottie-player_0.1.9_1592342729595_0.42883590963155327","host":"s3://npm-registry-packages"}},"2.0.0":{"name":"vue-lottie-player","version":"2.0.0","keywords":["vuejs","lottie","vue-lottie","lottie-vue","lottie-web","web-lottie","lottie-player","player-lottie","vue-lottie-player","lottie-player-vue","player-lottie-vue","vue-component","vue-animation","lottiefiles"],"author":{"name":"turopoff"},"license":"MIT","_id":"vue-lottie-player@2.0.0","maintainers":[{"name":"turopoff","email":"turopoff.n@gmail.com"}],"homepage":"https://github.com/turopoff/vue-lottie-player#readme","bugs":{"url":"https://github.com/turopoff/vue-lottie-player/issues"},"dist":{"shasum":"999f2480f2b60f01f5ab262c30f00fbc973f9541","tarball":"https://registry.npmjs.org/vue-lottie-player/-/vue-lottie-player-2.0.0.tgz","fileCount":19,"integrity":"sha512-XZcrUzOPm8lQNQpP4W8jOwHOp0KxsGksD17u8qHEqMM0HdQdebj7sC2A11UFU4ebYTCBquU8YIt7ufWVIzb3fQ==","signatures":[{"sig":"MEYCIQDYco6pa9PqD94LLUrFMw6AnLnRgDfm0Nivuky39hX/pgIhALKsg/pS7He5wXQ4ctUVzMMqWkTm8nBMoseAGY1FEH55","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":52237},"main":"./dist/vue-lottie-player.cjs","style":"./dist/vue-lottie-player.css","types":"./dist/index.d.ts","module":"./dist/vue-lottie-player.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/vue-lottie-player.js","require":"./dist/vue-lottie-player.cjs"},"./full":{"types":"./dist/full-index.d.ts","import":"./dist/full.js","require":"./dist/full.cjs"},"./style.css":"./dist/vue-lottie-player.css","./dist/style.css":"./dist/vue-lottie-player.css","./full/style.css":"./dist/vue-lottie-player.css","./dist/vue-lottie-player.css":"./dist/vue-lottie-player.css"},"gitHead":"d21a4863f0a8e180a0b8631b70a62fe9563daf9f","private":false,"scripts":{"build":"vite build && vite build --config vite.full.config.mjs && vue-tsc --emitDeclarationOnly --outDir dist","dev:vue":"npm run dev --prefix examples/vue","build:vue":"npm run build --prefix examples/vue","typecheck":"vue-tsc --noEmit","preview:vue":"npm run preview --prefix examples/vue"},"_npmUser":{"name":"turopoff","email":"turopoff.n@gmail.com"},"deprecated":"Deprecated. Use latest version.","repository":{"url":"git+https://github.com/turopoff/vue-lottie-player.git","type":"git"},"_npmVersion":"11.12.1","description":"Lottie Animation Player for Vue","directories":{},"_nodeVersion":"24.14.1","dependencies":{"lottie-web":"^5.13.0"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.5.32","vite":"^6.4.2","vue-tsc":"^3.1.1","typescript":"^5.9.3","@vitejs/plugin-vue":"^5.2.4"},"peerDependencies":{"vue":"^3.4.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-lottie-player_2.0.0_1776710907515_0.9904179110417408","host":"s3://npm-registry-packages-npm-production"}},"2.0.1":{"name":"vue-lottie-player","version":"2.0.1","keywords":["vuejs","lottie","vue-lottie","lottie-vue","lottie-web","web-lottie","lottie-player","player-lottie","vue-lottie-player","lottie-player-vue","player-lottie-vue","vue-component","vue-animation","lottiefiles"],"author":{"name":"turopoff"},"license":"MIT","_id":"vue-lottie-player@2.0.1","maintainers":[{"name":"turopoff","email":"turopoff.n@gmail.com"}],"homepage":"https://github.com/turopoff/vue-lottie-player#readme","bugs":{"url":"https://github.com/turopoff/vue-lottie-player/issues"},"dist":{"shasum":"6cadbeab61504d2d1099748fe56cbeb0eced5957","tarball":"https://registry.npmjs.org/vue-lottie-player/-/vue-lottie-player-2.0.1.tgz","fileCount":19,"integrity":"sha512-TcW6P3vJYkIA0L30e7xd9T3lm/vQQGSxr3boFByq5Uf1Ujpt9OsB3yhV4CGY1WFbLMTvXYHDZcsDQOpfjqMpaA==","signatures":[{"sig":"MEUCIFE4q1Qnz/RsasuwiHiG5d3PA4dL+TSLKTSIZx66pfGsAiEAksThzQhjSgxjYN7993Qjs6ttN1ngvkJKMqnZUBZ0PaA=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":55312},"main":"./dist/vue-lottie-player.cjs","style":"./dist/vue-lottie-player.css","types":"./dist/index.d.ts","module":"./dist/vue-lottie-player.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/vue-lottie-player.js","require":"./dist/vue-lottie-player.cjs"},"./full":{"types":"./dist/full-index.d.ts","import":"./dist/full.js","require":"./dist/full.cjs"},"./style.css":"./dist/vue-lottie-player.css","./dist/style.css":"./dist/vue-lottie-player.css","./full/style.css":"./dist/vue-lottie-player.css","./dist/vue-lottie-player.css":"./dist/vue-lottie-player.css"},"gitHead":"b86bde7f69b5219622b60196166730841932402b","private":false,"scripts":{"build":"vite build && vite build --config vite.full.config.mjs && vue-tsc --emitDeclarationOnly --outDir dist","dev:vue":"npm run dev --prefix examples/vue","build:vue":"npm run build --prefix examples/vue","typecheck":"vue-tsc --noEmit","preview:vue":"npm run preview --prefix examples/vue"},"_npmUser":{"name":"turopoff","email":"turopoff.n@gmail.com"},"repository":{"url":"git+https://github.com/turopoff/vue-lottie-player.git","type":"git"},"_npmVersion":"11.12.1","description":"Lottie Animation Player for Vue","directories":{},"_nodeVersion":"24.14.1","dependencies":{"lottie-web":"^5.13.0"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.5.32","vite":"^6.4.2","vue-tsc":"^3.1.1","typescript":"^5.9.3","@vitejs/plugin-vue":"^5.2.4"},"peerDependencies":{"vue":"^3.4.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-lottie-player_2.0.1_1776714431441_0.14477800047783562","host":"s3://npm-registry-packages-npm-production"},"deprecated":"Deprecated. Use latest version."},"2.0.2":{"name":"vue-lottie-player","version":"2.0.2","keywords":["vuejs","lottie","vue-lottie","lottie-vue","lottie-web","web-lottie","lottie-player","player-lottie","vue-lottie-player","lottie-player-vue","player-lottie-vue","vue-component","vue-animation","lottiefiles"],"author":{"name":"turopoff"},"license":"MIT","_id":"vue-lottie-player@2.0.2","maintainers":[{"name":"turopoff","email":"turopoff.n@gmail.com"}],"homepage":"https://github.com/turopoff/vue-lottie-player#readme","bugs":{"url":"https://github.com/turopoff/vue-lottie-player/issues"},"dist":{"shasum":"998fbec4a2384469db8cee1a8115704edce8c2f9","tarball":"https://registry.npmjs.org/vue-lottie-player/-/vue-lottie-player-2.0.2.tgz","fileCount":19,"integrity":"sha512-7LtrTH0TgjFLkEkkB56xLWQfOdTe9GyXwq9Umr7pXJpeVFcRRhN4aEN9Suwyg4QGm4sNRT5h0AGNcuda4n7MTA==","signatures":[{"sig":"MEUCIQD/A9cm0cNPK3f7KPG1ty+RUqtbGC8jZhl8NKhmSQ5uAQIgDaiWbL54VkTfsZ2EhUCjKZJNNH5myDmZWbKzF+TZ+SQ=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":55293},"main":"./dist/vue-lottie-player.cjs","style":"./dist/vue-lottie-player.css","types":"./dist/index.d.ts","module":"./dist/vue-lottie-player.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/vue-lottie-player.js","require":"./dist/vue-lottie-player.cjs"},"./full":{"types":"./dist/full-index.d.ts","import":"./dist/full.js","require":"./dist/full.cjs"},"./style.css":"./dist/vue-lottie-player.css","./dist/style.css":"./dist/vue-lottie-player.css","./full/style.css":"./dist/vue-lottie-player.css","./dist/vue-lottie-player.css":"./dist/vue-lottie-player.css"},"gitHead":"971f87baf9da3f58f7ce75f093081030cb52a8ec","private":false,"scripts":{"build":"vite build && vite build --config vite.full.config.mjs && vue-tsc --emitDeclarationOnly --outDir dist","dev:vue":"npm run dev --prefix examples/vue","build:vue":"npm run build --prefix examples/vue","typecheck":"vue-tsc --noEmit","preview:vue":"npm run preview --prefix examples/vue"},"_npmUser":{"name":"turopoff","email":"turopoff.n@gmail.com"},"repository":{"url":"git+https://github.com/turopoff/vue-lottie-player.git","type":"git"},"_npmVersion":"11.12.1","description":"Lottie Animation Player for Vue","directories":{},"_nodeVersion":"24.14.1","dependencies":{"lottie-web":"^5.13.0"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.5.32","vite":"^6.4.2","vue-tsc":"^3.1.1","typescript":"^5.9.3","@vitejs/plugin-vue":"^5.2.4"},"peerDependencies":{"vue":"^3.4.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-lottie-player_2.0.2_1776716110079_0.27598333555190013","host":"s3://npm-registry-packages-npm-production"}}},"time":{"created":"2020-06-16T14:08:40.688Z","modified":"2026-04-20T20:16:09.057Z","0.1.0":"2020-06-16T14:08:40.841Z","0.1.1":"2020-06-16T14:19:25.060Z","0.1.2":"2020-06-16T14:47:11.278Z","0.1.3":"2020-06-16T14:47:38.155Z","0.1.4":"2020-06-16T14:50:38.344Z","0.1.5":"2020-06-16T19:19:08.775Z","0.1.6":"2020-06-16T19:42:21.795Z","0.1.7":"2020-06-16T19:47:11.830Z","0.1.8":"2020-06-16T21:20:15.407Z","0.1.9":"2020-06-16T21:25:29.728Z","2.0.0":"2026-04-20T18:48:27.639Z","2.0.1":"2026-04-20T19:47:11.589Z","2.0.2":"2026-04-20T20:15:10.215Z"},"bugs":{"url":"https://github.com/turopoff/vue-lottie-player/issues"},"author":{"name":"turopoff"},"license":"MIT","homepage":"https://github.com/turopoff/vue-lottie-player#readme","keywords":["vuejs","lottie","vue-lottie","lottie-vue","lottie-web","web-lottie","lottie-player","player-lottie","vue-lottie-player","lottie-player-vue","player-lottie-vue","vue-component","vue-animation","lottiefiles"],"repository":{"url":"git+https://github.com/turopoff/vue-lottie-player.git","type":"git"},"description":"Lottie Animation Player for Vue","maintainers":[{"name":"turopoff","email":"turopoff.n@gmail.com"}],"readme":"# vue-lottie-player\n\nType-safe Vue 3 wrapper around `lottie-web`, with a CSP-friendly default build and an opt-in full build for expression-heavy animations.\n\nThis repository contains the published package in `src/`, shared demo animations in `examples/animations/`, and two local example apps for Vue 3 and Nuxt 3.\n\n`vue-lottie-player` gives you:\n\n- a Vue 3 component and plugin export\n- a typed `source` API for URL- and JSON-based animations\n- a default light-player build that avoids `unsafe-eval`\n- a `/full` entry for animations that depend on After Effects expressions\n- imperative ref controls when you need direct playback access\n- straightforward Nuxt 3 integration with client-only registration\n\nExamples and focused docs:\n\n- [Live demo](https://turopoff.github.io/vue-lottie-player)\n- [Vue example app](./examples/vue)\n- [Nuxt 3 example app](./examples/nuxt)\n- [Usage notes](./docs/usage.md)\n- [Props reference](./docs/props.md)\n- [Events reference](./docs/events.md)\n\n## Installation\n\n`vue` is a peer dependency and should be `^3.4.0` or newer.\n\n```bash\nnpm install vue-lottie-player\n```\n\n```bash\npnpm add vue-lottie-player\n```\n\n```bash\nyarn add vue-lottie-player\n```\n\nImport the bundled stylesheet once in your app:\n\n```ts\nimport \"vue-lottie-player/style.css\";\n```\n\n## Quick Start\n\nUse the component directly inside a Vue 3 app with the preferred `source` prop:\n\n```vue\n<script setup lang=\"ts\">\nimport type { AnimationItem } from \"lottie-web\";\nimport \"vue-lottie-player/style.css\";\nimport type { LottieUrlSource } from \"vue-lottie-player\";\nimport { VueLottiePlayer } from \"vue-lottie-player\";\n\nconst source: LottieUrlSource = {\n  kind: \"url\",\n  value: \"/animations/shape-animation.json\",\n};\n\nfunction onReady(animation: AnimationItem) {\n  animation.setSpeed(1.2);\n}\n</script>\n\n<template>\n  <VueLottiePlayer\n    name=\"hero-animation\"\n    width=\"320px\"\n    height=\"320px\"\n    background=\"#f5f7fb\"\n    loop\n    :source=\"source\"\n    @ready=\"onReady\"\n  />\n</template>\n```\n\n## Global Plugin Registration\n\nIf you want `<VueLottiePlayer />` available globally:\n\n```ts\nimport { createApp } from \"vue\";\nimport App from \"./App.vue\";\nimport \"vue-lottie-player/style.css\";\nimport { VueLottiePlayerPlugin } from \"vue-lottie-player\";\n\ncreateApp(App).use(VueLottiePlayerPlugin).mount(\"#app\");\n```\n\n## Using Imported JSON Data\n\nThe component can render imported animation JSON through `source.kind = \"data\"`:\n\n```vue\n<script setup lang=\"ts\">\nimport { ref } from \"vue\";\nimport demoAnimation from \"./assets/demo-animation.json\";\nimport \"vue-lottie-player/style.css\";\nimport type {\n  LottieDataSource,\n  VueLottiePlayerInstance,\n} from \"vue-lottie-player\";\nimport { VueLottiePlayer } from \"vue-lottie-player\";\n\nconst player = ref<VueLottiePlayerInstance | null>(null);\n\nconst source: LottieDataSource = {\n  kind: \"data\",\n  value: demoAnimation,\n};\n\nfunction play() {\n  player.value?.play();\n}\n\nfunction pause() {\n  player.value?.pause();\n}\n</script>\n\n<template>\n  <VueLottiePlayer\n    ref=\"player\"\n    name=\"local-demo\"\n    width=\"100%\"\n    height=\"320px\"\n    loop\n    :source=\"source\"\n  />\n\n  <button type=\"button\" @click=\"play\">Play</button>\n  <button type=\"button\" @click=\"pause\">Pause</button>\n</template>\n```\n\n## Nuxt 3\n\nBecause `lottie-web` depends on browser APIs, register the plugin on the client and render the component inside `<ClientOnly>`.\n\n`plugins/vue-lottie-player.client.ts`\n\n```ts\nimport \"vue-lottie-player/style.css\";\nimport { VueLottiePlayerPlugin } from \"vue-lottie-player\";\n\nexport default defineNuxtPlugin((nuxtApp) => {\n  nuxtApp.vueApp.use(VueLottiePlayerPlugin);\n});\n```\n\n`pages/index.vue`\n\n```vue\n<script setup lang=\"ts\">\nconst source = {\n  kind: \"url\" as const,\n  value: \"/animations/shape-animation.json\",\n};\n</script>\n\n<template>\n  <ClientOnly>\n    <VueLottiePlayer name=\"nuxt-demo\" loop :source=\"source\" />\n  </ClientOnly>\n</template>\n```\n\nSee the working example in [examples/nuxt](./examples/nuxt).\n\n## Default Build vs Full Build\n\nThe default package uses `lottie-web/build/player/lottie_light`, which is a better fit for environments with strict Content Security Policy rules.\n\nIf your animation relies on After Effects expressions, import from the full build instead:\n\n```ts\nimport \"vue-lottie-player/style.css\";\nimport { VueLottiePlayer, VueLottiePlayerPlugin } from \"vue-lottie-player/full\";\n```\n\nUse the default entry unless you specifically need expression support.\n\n## API\n\n### Props\n\n| Prop            | Type                          | Default         | Notes                                                        |\n| --------------- | ----------------------------- | --------------- | ------------------------------------------------------------ |\n| `name`          | `string`                      | auto-generated  | Optional animation name passed to `lottie-web`.              |\n| `source`        | `LottieSource`                | `null`          | Preferred input for new code.                                |\n| `src`           | `string`                      | `null`          | Deprecated URL/path bridge prop.                             |\n| `animationData` | `object`                      | `null`          | Deprecated bridge prop for imported animation JSON.          |\n| `loop`          | `boolean \\| number`           | `false`         | Use `true` for infinite loop or a number for finite repeats. |\n| `autoplay`      | `boolean`                     | `true`          | Starts playback immediately after load.                      |\n| `renderer`      | `\"svg\" \\| \"canvas\" \\| \"html\"` | `\"svg\"`         | Rendering mode passed to `lottie-web`.                       |\n| `width`         | `string \\| number`            | `\"200px\"`       | Numbers are converted to `px`.                               |\n| `height`        | `string \\| number`            | `\"200px\"`       | Numbers are converted to `px`.                               |\n| `background`    | `string`                      | `\"transparent\"` | Container background color.                                  |\n\n### `source` Formats\n\nUse `source` for all new integrations:\n\n```ts\nconst urlSource = {\n  kind: \"url\" as const,\n  value: \"/animations/intro.json\",\n};\n\nconst dataSource = {\n  kind: \"data\" as const,\n  value: importedAnimationJson,\n};\n```\n\nRules:\n\n- `source` cannot be combined with `src` or `animationData`\n- `src` and `animationData` cannot be combined with each other\n- `src` and `animationData` still work for migration, but they emit a development warning\n\n### Events\n\n| Event   | Payload         | Description                                                          |\n| ------- | --------------- | -------------------------------------------------------------------- |\n| `ready` | `AnimationItem` | Fired once per load when the underlying animation instance is ready. |\n| `error` | `Error`         | Fired when the source is invalid or the animation fails to load.     |\n\n### Ref Methods\n\nAccess imperative controls by binding a template ref to the component:\n\n- `play()`\n- `pause()`\n- `stop()`\n- `setSpeed(speed)`\n- `setDirection(direction)`\n- `goToAndPlay(value, isFrame)`\n- `goToAndStop(value, isFrame)`\n- `destroy()`\n- `getAnimation()`\n\n`getAnimation()` returns the underlying `lottie-web` `AnimationItem`, so you can call the lower-level API directly when needed.\n\n### Type Exports\n\nThe package exports the main public types:\n\n- `LottieSource`\n- `LottieUrlSource`\n- `LottieDataSource`\n- `VueLottiePlayerProps`\n- `VueLottiePlayerInstance`\n\n## Migrating from 0.1.x\n\nIf you are upgrading from the original Vue 2 line (`0.1.x`), these are the main API and packaging changes:\n\n| Area               | `0.1.x`                                                                               | Current package (`2.x`)                                                                                                           | Migration                                                                                       |\n| ------------------ | ------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- |\n| Vue version        | Built for Vue 2 and shipped `vue` as a dependency.                                    | Vue 3 only, with `vue` as a peer dependency (`^3.4.0`).                                                                           | Upgrade the host app to Vue 3 before adopting this release.                                     |\n| Package exports    | Default export component plus `Vue.use()` support.                                    | Named exports: `VueLottiePlayer` and `VueLottiePlayerPlugin`.                                                                     | Replace `import VueLottiePlayer from \"vue-lottie-player\"` with named imports.                   |\n| Auto-install       | Tried to auto-install when global Vue was present.                                    | No global auto-install behavior.                                                                                                  | Register the plugin explicitly with `app.use(VueLottiePlayerPlugin)`.                           |\n| Component name     | Global registration used `vLottiePlayer`, commonly rendered as `<v-lottie-player />`. | Global registration uses `VueLottiePlayer`.                                                                                       | Switch templates to `<VueLottiePlayer />` or `<vue-lottie-player />`.                           |\n| Source props       | `path` and `animationData` were the public loading props.                             | New typed `source` prop is the preferred API; `path` is removed; `src` and `animationData` are legacy bridge props.               | Replace `path=\"...\"` with `:source=\"{ kind: 'url', value: ... }\"` or, temporarily, `src=\"...\"`. |\n| Events and control | `@animControl` exposed the raw lottie instance.                                       | `@ready` returns the animation instance, and the component exposes ref methods such as `play()`, `pause()`, and `getAnimation()`. | Replace `@animControl` listeners with `@ready` and/or a component ref.                          |\n| Default runtime    | Used the full `lottie-web` runtime by default.                                        | Uses `lottie-web/build/player/lottie_light` by default.                                                                           | If an animation depends on After Effects expressions, import from `vue-lottie-player/full`.     |\n| Public entrypoints | Consumers could reach package internals such as `src/index.js`.                       | Package exports are now limited to documented entrypoints.                                                                        | Use only `vue-lottie-player`, `vue-lottie-player/full`, and `vue-lottie-player/style.css`.      |\n\nAdditional migration notes:\n\n- `source`, `src`, and `animationData` are now validated more strictly; invalid combinations emit an `error` event instead of silently continuing\n- Nuxt usage should stay client-only because `lottie-web` depends on browser APIs\n- `loop`, `autoplay`, `renderer`, `width`, `height`, and `background` keep the same general behavior, so most markup changes are around registration, source props, and control flow\n\nFor new code, prefer `source` and the named exports exclusively.\n\n## Local Development\n\nThis repo ships the library package together with two local demos:\n\n- `examples/vue` resolves `vue-lottie-player` to `src/entry.ts`, so it always runs against the latest source files\n- `examples/nuxt` depends on `file:../..`, so rebuild the package after source changes when you want Nuxt to consume the latest packaged output\n- `examples/animations` stores the shared JSON assets used by both demos\n\nInstall dependencies, then type-check and build the package:\n\n```bash\nnpm install\nnpm run typecheck\nnpm run build\n```\n\nRun the Vue example from the package root:\n\n```bash\nnpm run dev:vue\n```\n\nOr work inside each example app directly:\n\n```bash\ncd examples/vue\nnpm install\nnpm run dev\n```\n\n```bash\ncd examples/nuxt\nnpm install\nnpm run dev\n```\n\nRelevant project areas:\n\n- `src/components/` for the exported Vue components\n- `src/core/` for source resolution, runtime selection, and event wiring\n- `src/styles/index.css` for package styles\n- `examples/animations/` for the shared demo JSON files\n- `examples/vue/` for the Vite example app\n- `examples/nuxt/` for the Nuxt 3 example app\n- `docs/` for focused usage, props, and events references\n\n## License\n\n[MIT](./LICENSE)\n","readmeFilename":"README.md"}