{"_id":"@amplavia/lottie-web-vue","_rev":"2-d3bb0e10004b389698074d32b6362ced","name":"@amplavia/lottie-web-vue","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.0":{"name":"@amplavia/lottie-web-vue","version":"1.0.0","description":"Airbnb Lottie-web component for Vue.js projects","type":"module","exports":{".":"./dist/index.js"},"types":"./dist/LottieAnimation.d.ts","scripts":{"dev":"vite","build":"vue-tsc --noEmit && vite build","preview":"vite preview --port 5050","typecheck":"vue-tsc --noEmit","lint":"eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"},"repository":{"type":"git","url":"git+https://github.com/garbit/lottie-web-vue.git"},"keywords":["vuejs","lottie","lottie-web-vue","lottie-web-vuejs","lottie-web-animation","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":"Vinicius Berto"},"license":"MIT","bugs":{"url":"https://github.com/garbit/lottie-web-vue/issues"},"homepage":"https://github.com/garbit/lottie-web-vue#readme","dependencies":{"lottie-web":"^5.8.1","vue":"^3.2.29"},"devDependencies":{"@rushstack/eslint-patch":"^1.1.0","@types/node":"^16.11.22","@vitejs/plugin-vue":"^2.1.0","@vue/eslint-config-prettier":"^7.0.0","@vue/eslint-config-typescript":"^10.0.0","@vue/tsconfig":"^0.1.3","eslint":"^8.5.0","eslint-plugin-vue":"^8.2.0","prettier":"^2.5.1","rollup-plugin-typescript2":"^0.31.2","typescript":"~4.5.5","vite":"^2.7.13","vue-tsc":"^0.31.1"},"gitHead":"699be47391b2de273d0769b8ba6b26f2afd59783","_id":"@amplavia/lottie-web-vue@1.0.0","_nodeVersion":"18.13.0","_npmVersion":"9.4.0","dist":{"integrity":"sha512-Oavb2tfuGCdMN7KoSTK6RALBSx8ijqToLwgVh0QFAPwTu3O09GXzlh1DdOLzXshc3pR427KopRWFCSnoouJU9A==","shasum":"906917ad63a5d7d3d22a8ae7231b000b47711819","tarball":"https://registry.npmjs.org/@amplavia/lottie-web-vue/-/lottie-web-vue-1.0.0.tgz","fileCount":3,"unpackedSize":13758,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCd1L3YZ0NRRdAvWxmfh733zVLZoNzeVPYLk/qP9qAOIwIge1alXvFox8DndcWEZQJuUdoOaR292LDZkoaU1WPTHcI="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj33EVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpmLQ//TnaXGlwC4PgvR5+m/wjXMS3+UrEV+4chEk5nn9m7W9i8SV1T\r\nhUeEz5Bd3rvSvKE3/n3svEJBI00mHmkhGeQRba6QqRSlyFtEybsnUM0IgpCG\r\neg4a6T758pdZoRF8wCXr6aBuQ5UXSZKnnQc7SmzKNXI9dtwK3R8+y3w29EEQ\r\nlg1iyDwnrIeQfiKcofVwwmmgQ0Y6om8RE+/MIe+/HlYGgi99+kIu0nAHaFh+\r\nJJcHIaIv/y6cMDN6X6oYg2ViveYP+nAeqGoNUyuPJplDXsgt3aoDIL99IjzF\r\n8/RuLvXW0xW/X8n8Cq+ocRZHZGb77fnBVXDqyBbEnP5vHMYU+E1hV686Hb3b\r\ncEIxBiY5yvtsIQmNhBS/VUMa3/yoH8vC4fE+BA1HibX4K0HpQPnlj6KtGrks\r\nV779UhG9E6Z2wmhlFgl0ABCQ+TGeZc3117KpAs2W3nT2U91R+/ek38esYvr+\r\n3G2PbjPX/NlpeZAEUjsLCjldcgfi855nTeoMJ/mT+aDFIQw787+ptUJCZi7R\r\nEt/2ZDPlQNWKj6zw0/vMpUtxuEmB/Nqfgo7Mpu22JQdUaaeEqtESyZJ8XxLU\r\nymQwo/nETX6fu5cqW1ZUfWRHDwpInI6hDOjFEmG79BIDSQ2Z+fJM1QpiCVVp\r\nRwGu6MFIViopR/upeFzDkUqpAKYsv41zvD8=\r\n=3C2F\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"viniciusberto","email":"vinio2507@gmail.com"},"directories":{},"maintainers":[{"name":"viniciusberto","email":"vinio2507@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lottie-web-vue_1.0.0_1675587860981_0.19707726964087158"},"_hasShrinkwrap":false},"1.0.1":{"name":"@amplavia/lottie-web-vue","version":"1.0.1","description":"Airbnb Lottie-web component for Vue.js projects","type":"module","exports":{".":"./dist/index.js"},"types":"./dist/LottieAnimation.d.ts","scripts":{"dev":"vite","build":"vue-tsc --noEmit && vite build","preview":"vite preview --port 5050","typecheck":"vue-tsc --noEmit","lint":"eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"},"repository":{"type":"git","url":"git+https://github.com/garbit/lottie-web-vue.git"},"keywords":["vuejs","lottie","lottie-web-vue","lottie-web-vuejs","lottie-web-animation","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":"Vinicius Berto"},"license":"MIT","bugs":{"url":"https://github.com/garbit/lottie-web-vue/issues"},"homepage":"https://github.com/garbit/lottie-web-vue#readme","dependencies":{"lottie-web":"^5.8.1","vue":"^3.2.29"},"devDependencies":{"@rushstack/eslint-patch":"^1.1.0","@types/node":"^16.11.22","@vitejs/plugin-vue":"^2.1.0","@vue/eslint-config-prettier":"^7.0.0","@vue/eslint-config-typescript":"^10.0.0","@vue/tsconfig":"^0.1.3","eslint":"^8.5.0","eslint-plugin-vue":"^8.2.0","prettier":"^2.5.1","rollup-plugin-typescript2":"^0.31.2","typescript":"~4.5.5","vite":"^2.7.13","vue-tsc":"^0.31.1"},"gitHead":"e751d6347fd305847f226d8d8eb2f58d40921c23","_id":"@amplavia/lottie-web-vue@1.0.1","_nodeVersion":"18.13.0","_npmVersion":"9.4.0","dist":{"integrity":"sha512-e8K6EgxrqHTujwAATVLhG5x035RmjdeTJB0+xU702pjI9sEzooR/pL7hUCQSGB0Xi4Hp2Lc3wi9pvjJW15y8xQ==","shasum":"b09c5dd6191a85bd97b3b09a7ddf428880188b77","tarball":"https://registry.npmjs.org/@amplavia/lottie-web-vue/-/lottie-web-vue-1.0.1.tgz","fileCount":13,"unpackedSize":930410,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDYvaEupjM8yx/8yuPlwl7ZcN4z4SFzpYjssbSn42HBxQIhAJHscdh3W0FI0Z9kKcTy1CIrySp5ZkGJUoJ4WPgNH4YS"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj33J/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqibw//aaK+/8YxtwHr9roBlqfHKfXZUBbRUvQ0q+EtUh4uYYmRIq49\r\nnjT5dqTcFncTu2xLDmjewxGPaB6/CHj9zsMpX9grivQtwPqOTlcbeGnEokCp\r\n8ZSbg5IOl9ihd8t3alKVHTBhxW1DhLNIvsdaau6kWYwKeTMHtrjJxZwse9aH\r\nw7nTy/4AXXZ9yGSWc+RCny+DLM3d4DUSS74o7pi6t3wvJewzzYzqjZ18YvpY\r\ndeaZ8tFbBxFn+YMn6GpnyEzcUU5B8EnXkz0gyUJbI2G2vPk64phJDkSDDJEF\r\n1ELP2FShOfDydiVVkQgONQHSkn6uXSOimjZ1HM0afF02YKCUKjr+hyipbNGx\r\nf6N6LR7l4vdR3kqns0BwyuMqs0CXEkiOxEPiYAN9XQcES+xDid716fdhZLuJ\r\nlNV9Rd/shuEPLEiW+gU1DC1a6XqzRyzO9LPZcd0z4tuqe+JjhKwsRAoo8rWR\r\nNkcir5mYlUxoORLYyHg728Vh4kJsMUI76B0+FjbnJB8QWOOsJAJvWIUVaD7a\r\nsY2YEw3DuTzPrOCw0LoAlM6c1GmmmOmfI9Ndo5V5KHgxXhSAIFQAgNjL6F1I\r\nlCH/jZOuSTHbm0sQqQ6Kj0RTzlMrY8tCAun3K6NNW/6NbyDMr4C8D7yR866q\r\nu8yCLp64BtnlwIzORhMu+5b26IBcn4YMa4w=\r\n=JC2R\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"viniciusberto","email":"vinio2507@gmail.com"},"directories":{},"maintainers":[{"name":"viniciusberto","email":"vinio2507@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lottie-web-vue_1.0.1_1675588222862_0.07577830005650288"},"_hasShrinkwrap":false},"1.0.2":{"name":"@amplavia/lottie-web-vue","version":"1.0.2","description":"Airbnb Lottie-web component for Vue.js projects","type":"module","exports":{".":"./dist/index.js"},"types":"./dist/LottieAnimation.d.ts","scripts":{"dev":"vite","build":"vue-tsc --noEmit && vite build","preview":"vite preview --port 5050","typecheck":"vue-tsc --noEmit","lint":"eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"},"repository":{"type":"git","url":"git+https://github.com/garbit/lottie-web-vue.git"},"keywords":["vuejs","lottie","lottie-web-vue","lottie-web-vuejs","lottie-web-animation","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":"Vinicius Berto"},"license":"MIT","bugs":{"url":"https://github.com/garbit/lottie-web-vue/issues"},"homepage":"https://github.com/garbit/lottie-web-vue#readme","dependencies":{"lottie-web":"^5.8.1","vue":"^3.2.29"},"devDependencies":{"@rushstack/eslint-patch":"^1.1.0","@types/node":"^16.11.22","@vitejs/plugin-vue":"^2.1.0","@vue/eslint-config-prettier":"^7.0.0","@vue/eslint-config-typescript":"^10.0.0","@vue/tsconfig":"^0.1.3","eslint":"^8.5.0","eslint-plugin-vue":"^8.2.0","prettier":"^2.5.1","rollup-plugin-typescript2":"^0.31.2","typescript":"~4.5.5","vite":"^2.7.13","vue-tsc":"^0.31.1"},"gitHead":"960332955288f95c1d5903ce4e015e8e9edfe385","_id":"@amplavia/lottie-web-vue@1.0.2","_nodeVersion":"18.13.0","_npmVersion":"9.4.0","dist":{"integrity":"sha512-cauxNDxEQW4jmy/MdSNCgp7He9dnixmSRd8tkopkNug0tOtF4kj5Ei5ImWYNCWiVWWjeTCLEIqTv9V9T6V8Png==","shasum":"c1eba3f64045e0e8a1e080f025dac283febc538c","tarball":"https://registry.npmjs.org/@amplavia/lottie-web-vue/-/lottie-web-vue-1.0.2.tgz","fileCount":13,"unpackedSize":930727,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCeFrq9ke5DA8J4rs2OJi8iAjuTxy1PUCtzl7vXPXlVWwIgehowAIQHDE/pYPRVKpmlAzZiB+D+XUWFjsYEFVHYO/Y="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj33q6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpshA//WX5iXIjrYIMyLLZUc2/+Icw+wDEG7LeQ5ESIL156Fv9NNUL0\r\nBtWZYkacQftoJrbMzcOrrToBIfISxwH6IcQb8d6YZeNOK6N4YXx2MVD650mi\r\nAtjex87LmAKjtoQBYQftcss34fo9xD+BGMYCpNBK5ygkqAJQX8zLxfiQ86ad\r\n18sgmJDjpqgiLl8GcbBemnpNzbP6YY+Dlihnpe5ktylyPuhGzU6uhqz9fBAb\r\n7ygqGzdaHt7gnGDA03R4QMInN3DBUOHLbDjzQlqR15yxHbaXnjD2tzS9iVvB\r\nnqB6KR/5Q6v810qMKHmUSE6OW3vc5g2xCDQCcVNEBNPSkJVrQxcarCcQv9pI\r\nph/wRkQUhsfIOWs9fJI8hWvRKTAjyU9F+kRgLA/qPFNqoLbvU1EX0tIKszy1\r\nTeEdTAJ6Mqx8lRuwQwW1yvh36d+TSMT/EBjVMEiqMQn6AYc0/5rr5WXLTLLO\r\ns51XvinWm+ztTf04JEk3Rv31C+o0i4bfuQfZl1siugxvwoSBl9DuYlLXOihG\r\nR9y1AO50DruUX3eOttxwbn+HwRyUGr25x2eglWkVfHWeY0Q+swBmwgJxR+tg\r\n0s++QcSrpgDgWtMhkS78UpZLzJiauNEWEB5txFKWv8Ybjpbd7JRyZDP8pG4z\r\ncODWPGg0Je0WdsmhjiVn1EmxBzcGE55DRZQ=\r\n=m8b7\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"viniciusberto","email":"vinio2507@gmail.com"},"directories":{},"maintainers":[{"name":"viniciusberto","email":"vinio2507@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lottie-web-vue_1.0.2_1675590330646_0.3509255596217764"},"_hasShrinkwrap":false}},"time":{"created":"2023-02-05T09:04:20.901Z","1.0.0":"2023-02-05T09:04:21.146Z","modified":"2023-02-05T09:45:30.997Z","1.0.1":"2023-02-05T09:10:23.042Z","1.0.2":"2023-02-05T09:45:30.903Z"},"maintainers":[{"name":"viniciusberto","email":"vinio2507@gmail.com"}],"description":"Airbnb Lottie-web component for Vue.js projects","homepage":"https://github.com/garbit/lottie-web-vue#readme","keywords":["vuejs","lottie","lottie-web-vue","lottie-web-vuejs","lottie-web-animation","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":{"type":"git","url":"git+https://github.com/garbit/lottie-web-vue.git"},"author":{"name":"Vinicius Berto"},"bugs":{"url":"https://github.com/garbit/lottie-web-vue/issues"},"license":"MIT","readme":"<div style=\"text-align: center\" align=\"center\">\n  <h1>Lottie-Web-Vue</h1>\n  <img src=\"lottie-web-vue-animation.gif\" style=\"width: 50%\"/>\n  \n  [![npm](https://img.shields.io/npm/dt/lottie-web-vue.svg?style=flat-square)](https://www.npmjs.com/package/lottie-web-vue)\n  ![npm](https://img.shields.io/npm/dw/lottie-web-vue)\n  ![GitHub contributors](https://img.shields.io/github/contributors/garbit/lottie-web-vue?color=%23007ec6)\n  [![Software License](https://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat-square)](LICENSE.md)\n\n  > Lottie-web-vue is an Airbnb Lottie-web component for Vue.js projects\n</div>\n\n*** \nAirbnb's [Lottie-web](https://github.com/airbnb/lottie-web) is a library for rendering animations exported from Adobe After Effects using the BodyMovin plugin. This package allows you to easily import animation files (available in .json format) into your Vue.js project.\n\n# Vue 3 + Typescript Support\nWith latest ```lottie-web-vue  2.x.x``` release the library now supports Vue 3 + Typescript typing! If you are using Vue 2.x **ensure to use version 1.2.1** (see below)\n\n```js\nnpm install lottie-web-vue\n```\n\n# Vue 2\nPlease install ```v1.2.1``` of the plugin. This plugin will focus on maintaining Vue 3 now that it has been officially released.\n\n```js\nnpm install lottie-web-vue@1.2.1 \n```\n\n<br />\n\n# Animations\nYou can browse and download animations from [LottieFiles](https://lottiefiles.com/). First, find an animation you like > signup > click `export JSON` and save to your project. In vue you can save these under `assets` and then use `require('@/assets/animation.json')` to load them into the `LottieAnimator` as part of the `lottie-web-vue` component.\n\nExample: [https://lottiefiles.com/38726-stagger-rainbow](https://lottiefiles.com/38726-stagger-rainbow)\n\n<p align=\"center\">\n  <img src=\"lottie-file.png\" style=\"width: 50%\" />\n</p>\n\n<br />\n<br />\n\n# Installation\nAdd lottie-web-vue to your Vue 3.x project package using:\n```bash\nnpm install --save lottie-web-vue\n```\nor\n```\nyarn add lottie-web-vue\n```\n\nTo use Vue 2.x use:\n```js\nnpm install lottie-web-vue@1.2.1 \n```\n\n## Add to global scope\n\n## Vue 3.x\n```js\nimport { createApp } from \"vue\";\nimport App from \"./App.vue\";\nimport LottieAnimation from \"lottie-web-vue\";\n\nconst app = createApp(App);\n\napp.use(LottieAnimation);\n\napp.mount(\"#app\");\n\n```\n\nfor [volar Type-Checking](https://github.com/johnsoncodehk/volar/tree/master/extensions/vscode-vue-language-features#usage) need add:\n\n```ts\n// components.d.ts\ndeclare module '@vue/runtime-core' {\n  export interface GlobalComponents {\n    LottieAnimation: typeof import('lottie-web-vue')['LottieAnimation']\n  }\n}\n\nexport {}\n```\n\n\n## Vue 2.x\nPlease install ```v1.2.1``` of the plugin (this will no longer be maintained)\n```js\nimport Vue from 'vue'\nimport LottieAnimation from 'lottie-web-vue'\n \nVue.use(LottieAnimation); // add lottie-animation to your global scope\n \nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n```\n<br />\n\n# Usage\nBasic:\n```html\n<script setup>\n  import animation from '@/assets/animation.json';\n</script>\n<template>\n  <lottie-animation\n    ref=\"anim\"\n    :animationData=\"animation\"\n  />\n</template>\n```\n\nFull available props and events:\n```html\n<script setup>\n  import animation from '@/assets/animation.json';\n</script>\n<template>\n  <lottie-animation\n    ref=\"anim\"\n    :animationData=\"animation\"\n    :loop=\"false\"\n    :autoPlay=\"false\"\n    :speed=\"1\"\n    @loopComplete=\"loopComplete\"\n    @complete=\"complete\"\n    @enterFrame=\"enterFrame\"\n    @segmentStart=\"segmentStart\"\n    @stopped=\"stopped\"\n  />\n</template>\n```\n\n## Props\nThe component has a number of props you can use to control the animation playback.\n\n**You must pass animationData** to load the animation prior to the component being played.\n\n### animationData\nType: `Object`<br />\nRequired: `true`<br />\n\nInclude animation data from an import or require statement that imports the `.json` file from your assets folder. e.g. `require('@/assets/animation.json')` (save you animation as a.json file and put under src/assets in your project)\n\n### loop\nType: `[Boolean, Number]`<br />\nRequired: `false`<br />\nDefault: `false`\n\n`True`: Animation continously loops\n`False`: Animation plays only once\n`[number e.g. 3]`: Animation plays N number of times before stopping (pass an integer)\n\n### autoPlay\nType: `Boolean`<br />\nRequired: `false`<br />\nDefault: `true`\n\n`True`: Animation will play as soon as it has finished loading\n`False`: Animation will play only when you call `this.$refs.lottieAnimation.play()` (see below for playback controls)\n\n### speed\nType: `Number`<br />\nRequired: `false`<br />\nDefault: `1`\n\nThe speed that the animation will play back.\n<br />\n\n## Events\nYou can listen for events emitted by the component by using the `@` syntax, passing in the parent method you wish to trigger. For more documentation about the Lottie-web events see [here](https://github.com/airbnb/lottie-web#events).\n\n### @loopComplete\nFired once a complete loop of the animation has occurred\n\n### @complete\nFired once the animation has completed (only fired when loop = false)\n\n### @enterFrame\nAs each frame is played this event is fired. Warning - this fires very frequently.\n\n### @segmentStart\nEvent is fired when the animation enters each animation segment.\n\n### @stopped\nPlaying the animation using ```goToAndStop()``` function will raise an event once the animation has stopped at the designated frame.\n<br />\n\n## Methods\nYou can call animation playback methods directly on the component if you wish to trigger playback on an event (i.e. when a user clicks the button, play the animation). You need to use the `this.$refs` syntax and give your LottieAnimation a `ref` id to use in the `this.$refs.[your-name-here]`.\n\n```html\n<script setup>\n  import animation from '@/assets/animation.json';\n</script>\n<template>\n  <lottie-animation\n    ref=\"anim\"\n    :animationData=\"animation\"\n  />\n</template>\n```\nOnce your component (in the parent view) has a `ref` id you can then use this in a method of your choosing:\n\n```js\n... // in your parent .vue file\nmethods: {\n  buttonClicked() {\n    this.$refs.anim.play() // .play, .pause, .stop available\n  }\n}\n```\n### Play\nUsing `this.$refs.anim.play()` will play the animation. \n\n### Pause\nUsing `this.$refs.anim.pause()` will pause the animation. \n\n### Stop\nUsing `this.$refs.anim.stop()` will stop the animation. \n\n### setSpeed [number: speed]\nUsing ```this.$refs.anim.setSpeed(2)``` you can set the playback speed to ```2```. Default speed is set to 1.\n- number: Set the speed playback rate\n\n### goToAndStop [Position: frame number or seconds, isFrame: boolean]\nUsing ```this.$refs.anim.goToAndStop(10, true``` you can set the specific frame you wish the animation to stop at. Pass in the frame number or seconds to play and if the first value is a frame or a time as true/false. This function will raise an emit (add @stopped=\"Yourfunction()\" to your lottie-animation listen for it).\n- position: numeric value (specific frame number or second to stop)\n- isFrame: defines if first argument is a time based value or a frame based (default false).\n\n### goToAndPlay [Position: frame number or seconds, isFrame: boolean]\nUsing ```this.$refs.anim.goToAndPlay(50, true)``` allows you to specify the start time of the animation in either frame number (passing isFrame true/false if value is a frame or in seconds).\n- position: numeric value (specific frame number or second to stop)\n- isFrame: defines if first argument is a time based value or a frame based (default false).\n### setDirection [Direction: -1: reverse, 1: forwards]\nUsing ```this.$refs.anim.setDirection(-1)``` you can reverse your animation. You can pass in either ```AnimationDirection.``` to reverse the animation or ```1``` to play forwards. Default playback is ```1```.\n- Direction:\n  - -1 (reverse playback)\n  - 1 (play forwards)\n\n### getDuration [inFrames: true/false]\nUsing ```this.$refs.anim.getDuration(true)``` you can retrieve the current duration of the animation in frames or seconds (false). If you pass true, function returns duration in frames, if false, duration is passed back in seconds. Default is false (returned in seconds).\n- inFrames: boolean to request current duration in either frames (inFrames: true) or in seconds (inFrames: false)\n### destroy\nUsing ```this.$refs.anim.destroy()``` you can destroy the animation from the DOM.\n\n<br />\n\n## Options API Example\nSee here for an example:\n```html\n<template>\n  <div id=\"app\">\n    <lottie-animation\n      ref=\"anim\"\n      :animationData=\"require('@/assets/animation.json')\"\n      :loop=\"true\"\n      :autoPlay=\"true\"\n      @loopComplete=\"loopComplete\"\n      @complete=\"complete\"\n      @enterFrame=\"enterFrame\"\n    />\n  </div>\n</template>\n\n<script>\nimport LottieAnimation from 'lottie-web-vue'\n\nexport default {\n  components: {\n    LottieAnimation\n  },\n  mounted() {\n    this.$refs.anim.play()\n  },\n  methods: {\n    loopComplete() {\n      console.log('loopComplete')\n    },\n    complete() {\n      console.log('complete')\n    },\n    enterFrame() {\n      console.log('enterFrame')\n    }\n  }\n}\n</script>\n```\n## Vue 3 Composition API with Setup\nTo use this in a Vue 3 project that uses the ```setup``` Composition API use the following:\n\n### Script setup\n```html\n<script setup>\n  import animation from '@/assets/animation.json';\n</script>\n<template>\n  <lottie-animation\n    ref=\"anim\"\n    :animationData=\"animation\"\n  />\n</template>\n```\n\n### Setup\n```html\n<template>\n  <div id=\"app\">\n    <lottie-animation\n      ref=\"anim\"\n      :animationData=\"animation\"\n      :loop=\"true\"\n      :autoPlay=\"true\"\n      @loopComplete=\"loopComplete\"\n      @complete=\"complete\"\n      @enterFrame=\"enterFrame\"\n    />\n  </div>\n</template>\n\n<script>\nimport LottieAnimation from 'lottie-web-vue'\nimport { onMounted, ref } from 'vue'\nimport animation from '@/assets/animation.json';\n\n\nexport default {\n  components: {\n      LottieAnimation\n  },\n  setup() {\n    const anim = ref(null)\n\n    const loopComplete = () => {\n      console.log('loopComplete')\n    }\n\n    const complete = () => {\n      console.log('complete')\n    }\n\n    const enterFrame = () => {\n      console.log('enterFrame')\n    }\n\n    onMounted(() => {\n      // the DOM element will be assigned to the ref after initial render\n      anim.value.play()\n    })\n\n    return {\n      anim, \n      loopComplete,\n      complete,\n      enterFrame\n    }\n  }\n}\n</script>\n```\n\n## Typescript Support + Setup Example\nWhen using the ```<script setup>``` attribute when delcaring your ts component you can use the following:\n\n```html\n<script setup>\nimport { onMounted, ref } from 'vue'\nimport WatermelonJSON from \"@/assets/watermelon.json\";\n\nlet anim = ref();\n\nonMounted(() => {\n  // the DOM element will be assigned to the ref after initial render\n  anim.value.play()\n})\n\n</script>\n\n<template>\n  <lottie-animation\n    :animation-data=\"WatermelonJSON\"\n    :auto-play=\"true\"\n    :loop=\"true\"\n    :speed=\"1\"\n    ref=\"anim\"\n  />\n</template>\n```\n","readmeFilename":"README.md"}