vue3-lottie - npm Package Compare versions

Comparing version 2.2.1 to 2.2.2

dist/vue3-lottie.es.js

@@ -335,5 +335,5 @@ import { defineComponent, ref, computed, watch, onMounted, openBlock, createElementBlock, normalizeStyle } from "vue";
 const plugin = {
-  version: "2.2.1",
+  version: "2.2.2",
   install
 };
 export { Vue3Lottie, plugin as default, install };

dist/vue3-lottie.umd.js

@@ -1,1 +0,1 @@
-(function(r,i){typeof exports=="object"&&typeof module!="undefined"?i(exports,require("vue"),require("lottie-web")):typeof define=="function"&&define.amd?define(["exports","vue","lottie-web"],i):(r=typeof globalThis!="undefined"?globalThis:r||self,i(r["vue3-lottie"]={},r.Vue,r.Lottie))})(this,function(r,i,h){"use strict";function g(e){return e&&typeof e=="object"&&"default"in e?e:{default:e}}var p=g(h),F="",S=(e,o)=>{const t=e.__vccOpts||e;for(const[s,d]of o)t[s]=d;return t};const O=i.defineComponent({props:{animationData:{type:Object,default:()=>({})},animationLink:{type:String,default:""},loop:{type:[Boolean,Number],default:!0},autoPlay:{type:Boolean,default:!0},width:{type:[Number,String],default:"100%"},height:{type:[Number,String],default:"100%"},speed:{type:Number,default:1},delay:{type:Number,default:0},direction:{type:String,default:"forward"},pauseOnHover:{type:Boolean,default:!1},playOnHover:{type:Boolean,default:!1},backgroundColor:{type:String,default:"transparent"},pauseAnimation:{type:Boolean,default:!1}},emits:{onComplete:null,onLoopComplete:null,onEnterFrame:null,onSegmentStart:null,onAnimationLoaded:null},setup(e,{emit:o}){let t=i.ref(null);const s=i.ref("");let d=1;const v=n=>document.querySelector(`[data-id="${n}" ]`)!==null,f=async n=>{let a=e.autoPlay;e.playOnHover&&(a=!1);let l={};if(e.animationData!=={}&&(l=JSON.parse(JSON.stringify(e.animationData))),e.animationLink!="")try{l=await(await fetch(e.animationLink)).json()}catch(c){console.error(c);return}let u=e.loop;typeof u=="number"&&u>0&&(u=u-1),e.delay>0&&(a=!1),t=p.default.loadAnimation({container:n,renderer:"svg",loop:u,autoplay:a,animationData:l}),setTimeout(()=>{a=e.autoPlay,e.playOnHover?t.pause():t.play(),o("onAnimationLoaded")},e.delay),t.setSpeed(e.speed),e.direction==="reverse"&&t.setDirection(-1),e.direction==="normal"&&t.setDirection(1),(e.pauseAnimation||e.playOnHover)&&t.pause(),t.addEventListener("loopComplete",()=>{e.direction==="alternate"&&(t.stop(),d=d*-1,t.setDirection(d),t.play()),o("onLoopComplete")}),t.addEventListener("complete",()=>{o("onComplete")}),t.addEventListener("enterFrame",()=>{o("onEnterFrame")}),t.addEventListener("segmentStart",()=>{o("onSegmentStart")})},H=i.computed(()=>{let n=e.width,a=e.height;return typeof e.width=="number"&&(n=`${e.width}px`),typeof e.height=="number"&&(a=`${e.height}px`),{"--lottie-animation-container-width":n,"--lottie-animation-container-height":a,"--lottie-animation-container-background-color":e.backgroundColor}}),A=()=>{t&&e.pauseOnHover&&t.pause(),t&&e.playOnHover&&t.play()},D=()=>{t&&e.pauseOnHover&&t.play(),t&&e.playOnHover&&t.pause()};i.watch(()=>e,()=>{(e.pauseOnHover||e.playOnHover)&&!e.pauseAnimation&&console.error("If you are using pauseAnimation prop for Vue3-Lottie, please remove the props pauseOnHover or playOnHover"),!e.pauseOnHover&&!e.playOnHover&&(e.pauseAnimation&&t?t.pause():t&&!e.pauseAnimation&&t.play())});const E=()=>{t&&t.play()},k=()=>{t&&t.pause()},_=()=>{t&&(console.log(t),t.stop())},C=()=>{t&&t.destroy()},j=(n=1)=>{if(n<=0)throw new Error("Speed must be greater than 0");t&&t.setSpeed(n)},T=n=>{t&&(n==="forward"?t.setDirection(1):n==="reverse"&&t.setDirection(-1))},V=(n,a=!0)=>{t&&t.goToAndStop(n,a)},$=(n,a=!0)=>{t&&t.goToAndPlay(n,a)},B=(n,a=!1)=>{t&&t.playSegments(n,a)},M=(n=!0)=>{t&&t.setSubframe(n)},N=(n=!0)=>{if(t)return t.getDuration(n)},P=n=>{for(var a="",l="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789",u=l.length,c=0;c<n;c++)a+=l.charAt(Math.floor(Math.random()*u));return a},q=n=>{if(e.pauseOnHover&&e.playOnHover)throw new Error("You cannot set pauseOnHover and playOnHover for Vue3-Lottie at the same time.");if(e.animationLink===""&&e.animationData==={})throw new Error("You must provide either animationLink or animationData");const a=setInterval(()=>{if(v(n)){clearInterval(a);const l=document.querySelector(`[data-id="${n}" ]`);l&&f(l)}},0)};return i.onMounted(async()=>{s.value=P(20),q(s.value)}),{elementid:s,hoverEnded:D,hoverStarted:A,getCurrentStyle:H,play:E,pause:k,stop:_,destroy:C,setSpeed:j,setDirection:T,goToAndStop:V,goToAndPlay:$,playSegments:B,setSubFrame:M,getDuration:N}}}),L=["data-id"];function b(e,o,t,s,d,v){return i.openBlock(),i.createElementBlock("div",{"data-id":e.elementid,class:"lottie-animation-container",style:i.normalizeStyle(e.getCurrentStyle),onMouseenter:o[0]||(o[0]=(...f)=>e.hoverStarted&&e.hoverStarted(...f)),onMouseleave:o[1]||(o[1]=(...f)=>e.hoverEnded&&e.hoverEnded(...f))},null,44,L)}var m=S(O,[["render",b]]);function y(e,o){const t=Object.assign({},{name:"Vue3Lottie"},o);e.component(`${t.name}`,m)}const w={version:"2.2.1",install:y};r.Vue3Lottie=m,r.default=w,r.install=y,Object.defineProperty(r,"__esModule",{value:!0}),r[Symbol.toStringTag]="Module"});
+(function(r,i){typeof exports=="object"&&typeof module!="undefined"?i(exports,require("vue"),require("lottie-web")):typeof define=="function"&&define.amd?define(["exports","vue","lottie-web"],i):(r=typeof globalThis!="undefined"?globalThis:r||self,i(r["vue3-lottie"]={},r.Vue,r.Lottie))})(this,function(r,i,h){"use strict";function g(e){return e&&typeof e=="object"&&"default"in e?e:{default:e}}var p=g(h),F="",S=(e,o)=>{const t=e.__vccOpts||e;for(const[s,d]of o)t[s]=d;return t};const O=i.defineComponent({props:{animationData:{type:Object,default:()=>({})},animationLink:{type:String,default:""},loop:{type:[Boolean,Number],default:!0},autoPlay:{type:Boolean,default:!0},width:{type:[Number,String],default:"100%"},height:{type:[Number,String],default:"100%"},speed:{type:Number,default:1},delay:{type:Number,default:0},direction:{type:String,default:"forward"},pauseOnHover:{type:Boolean,default:!1},playOnHover:{type:Boolean,default:!1},backgroundColor:{type:String,default:"transparent"},pauseAnimation:{type:Boolean,default:!1}},emits:{onComplete:null,onLoopComplete:null,onEnterFrame:null,onSegmentStart:null,onAnimationLoaded:null},setup(e,{emit:o}){let t=i.ref(null);const s=i.ref("");let d=1;const v=n=>document.querySelector(`[data-id="${n}" ]`)!==null,f=async n=>{let a=e.autoPlay;e.playOnHover&&(a=!1);let l={};if(e.animationData!=={}&&(l=JSON.parse(JSON.stringify(e.animationData))),e.animationLink!="")try{l=await(await fetch(e.animationLink)).json()}catch(c){console.error(c);return}let u=e.loop;typeof u=="number"&&u>0&&(u=u-1),e.delay>0&&(a=!1),t=p.default.loadAnimation({container:n,renderer:"svg",loop:u,autoplay:a,animationData:l}),setTimeout(()=>{a=e.autoPlay,e.playOnHover?t.pause():t.play(),o("onAnimationLoaded")},e.delay),t.setSpeed(e.speed),e.direction==="reverse"&&t.setDirection(-1),e.direction==="normal"&&t.setDirection(1),(e.pauseAnimation||e.playOnHover)&&t.pause(),t.addEventListener("loopComplete",()=>{e.direction==="alternate"&&(t.stop(),d=d*-1,t.setDirection(d),t.play()),o("onLoopComplete")}),t.addEventListener("complete",()=>{o("onComplete")}),t.addEventListener("enterFrame",()=>{o("onEnterFrame")}),t.addEventListener("segmentStart",()=>{o("onSegmentStart")})},H=i.computed(()=>{let n=e.width,a=e.height;return typeof e.width=="number"&&(n=`${e.width}px`),typeof e.height=="number"&&(a=`${e.height}px`),{"--lottie-animation-container-width":n,"--lottie-animation-container-height":a,"--lottie-animation-container-background-color":e.backgroundColor}}),A=()=>{t&&e.pauseOnHover&&t.pause(),t&&e.playOnHover&&t.play()},D=()=>{t&&e.pauseOnHover&&t.play(),t&&e.playOnHover&&t.pause()};i.watch(()=>e,()=>{(e.pauseOnHover||e.playOnHover)&&!e.pauseAnimation&&console.error("If you are using pauseAnimation prop for Vue3-Lottie, please remove the props pauseOnHover or playOnHover"),!e.pauseOnHover&&!e.playOnHover&&(e.pauseAnimation&&t?t.pause():t&&!e.pauseAnimation&&t.play())});const E=()=>{t&&t.play()},k=()=>{t&&t.pause()},_=()=>{t&&(console.log(t),t.stop())},C=()=>{t&&t.destroy()},j=(n=1)=>{if(n<=0)throw new Error("Speed must be greater than 0");t&&t.setSpeed(n)},T=n=>{t&&(n==="forward"?t.setDirection(1):n==="reverse"&&t.setDirection(-1))},V=(n,a=!0)=>{t&&t.goToAndStop(n,a)},$=(n,a=!0)=>{t&&t.goToAndPlay(n,a)},B=(n,a=!1)=>{t&&t.playSegments(n,a)},M=(n=!0)=>{t&&t.setSubframe(n)},N=(n=!0)=>{if(t)return t.getDuration(n)},P=n=>{for(var a="",l="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789",u=l.length,c=0;c<n;c++)a+=l.charAt(Math.floor(Math.random()*u));return a},q=n=>{if(e.pauseOnHover&&e.playOnHover)throw new Error("You cannot set pauseOnHover and playOnHover for Vue3-Lottie at the same time.");if(e.animationLink===""&&e.animationData==={})throw new Error("You must provide either animationLink or animationData");const a=setInterval(()=>{if(v(n)){clearInterval(a);const l=document.querySelector(`[data-id="${n}" ]`);l&&f(l)}},0)};return i.onMounted(async()=>{s.value=P(20),q(s.value)}),{elementid:s,hoverEnded:D,hoverStarted:A,getCurrentStyle:H,play:E,pause:k,stop:_,destroy:C,setSpeed:j,setDirection:T,goToAndStop:V,goToAndPlay:$,playSegments:B,setSubFrame:M,getDuration:N}}}),L=["data-id"];function b(e,o,t,s,d,v){return i.openBlock(),i.createElementBlock("div",{"data-id":e.elementid,class:"lottie-animation-container",style:i.normalizeStyle(e.getCurrentStyle),onMouseenter:o[0]||(o[0]=(...f)=>e.hoverStarted&&e.hoverStarted(...f)),onMouseleave:o[1]||(o[1]=(...f)=>e.hoverEnded&&e.hoverEnded(...f))},null,44,L)}var m=S(O,[["render",b]]);function y(e,o){const t=Object.assign({},{name:"Vue3Lottie"},o);e.component(`${t.name}`,m)}const w={version:"2.2.2",install:y};r.Vue3Lottie=m,r.default=w,r.install=y,Object.defineProperty(r,"__esModule",{value:!0}),r[Symbol.toStringTag]="Module"});

package.json

 {
   "name": "vue3-lottie",
-  "version": "2.2.1",
+  "version": "2.2.2",
   "license": "MIT",
@@ -35,10 +35,10 @@ "author": "Sanjay Soundarajan <[e-mail]> (https://sanjaysoundarajan.dev)",
   "devDependencies": {
-    "@babel/types": "^7.17.0",
-    "@types/node": "^17.0.18",
-    "@vitejs/plugin-vue": "^2.2.0",
-    "typescript": "^4.5.5",
-    "vite": "^2.8.4",
-    "vue": "^3.2.31",
-    "vue-tsc": "^0.31.4",
-    "vue-typegen": "^0.2.0"
+    "@babel/types": "7.18.4",
+    "@types/node": "17.0.19",
+    "@vitejs/plugin-vue": "2.2.2",
+    "typescript": "4.7.2",
+    "vite": "2.8.4",
+    "vue": "3.2.31",
+    "vue-tsc": "0.31.4",
+    "vue-typegen": "0.2.0"
   },
@@ -63,3 +63,3 @@ "bugs": {
   },
-  "readme": "# Vue 3 Lottie\r\n\r\n[![npm](https://img.shields.io/npm/v/vue3-lottie)](https://www.npmjs.com/package/vue3-lottie) [![Downloads](https://img.shields.io/npm/dt/vue3-lottie)](https://www.npmjs.com/package/vue3-lottie) [![Stars](https://img.shields.io/github/stars/megasanjay/vue3-lottie.svg?style=flat-square)](https://github.com/megasanjay/vue3-lottie/stargazers) [![License](https://img.shields.io/npm/l/vue3-lottie)](https://github.com/megasanjay/vue3-lottie/blob/main/LICENSE) [![GitHub issues](https://img.shields.io/github/issues/megasanjay/vue3-lottie)](https://github.com/megasanjay/vue3-lottie/issues)\r\n\r\n`vue3-lottie` was created to help developers add Lottie animations to their Vue 3 applications. In my search for a simple way to add Lottie animations to my Vue application I found a suprising lack of maintained solutions. `vue3-lottie` is a vue wrapper around the `lottie-web` library with a few additional features.\r\n\r\n# Demos\r\n\r\nView the live demos here: [https://vue3-lottie.vercel.app](https://vue3-lottie.vercel.app)\r\n\r\n# Upgrade to v2.x\r\n\r\nIf you are using version 1.x of `vue3-lottie` you should upgrade to version 2.x. You can do this by running the [Installation](#installation) command below. This adds TS support for the component. There are some new imports so take a look at the [new documentation](https://vue3-lottie.vercel.app/guide.html#usage).\r\n\r\n# Installation\r\n\r\nIf you are using npm:\r\n\r\n```shell\r\nnpm install vue3-lottie@latest --save\r\n```\r\n\r\nIf you are using yarn:\r\n\r\n```shell\r\nyarn add vue3-lottie@latest\r\n```\r\n\r\n# Usage\r\n\r\nThe most common use case is to register the component globally.\r\n\r\n```js\r\n// main.js\r\nimport { createApp } from 'vue'\r\nimport Vue3Lottie from 'vue3-lottie'\r\nimport 'vue3-lottie/dist/style.css'\r\n\r\ncreateApp(App).use(Vue3Lottie).mount('#app')\r\n```\r\n\r\nAlternatively you can also import the component locally.\r\n\r\n```js\r\nimport { Vue3Lottie } from 'vue3-lottie'\r\nimport 'vue3-lottie/dist/style.css'\r\n\r\nexport default {\r\n  components: {\r\n    Vue3Lottie,\r\n  },\r\n}\r\n```\r\n\r\nYou can then use the component in your template\r\n\r\n```vue\r\n<template>\r\n  <Vue3Lottie :animationData=\"DogJSON\" :height=\"200\" :width=\"200\" />\r\n</template>\r\n\r\n<script>\r\nimport { Vue3Lottie } from 'vue3-lottie'\r\nimport 'vue3-lottie/dist/style.css'\r\n\r\nimport DogJSON from './lotties/dog.json'\r\n\r\nexport default {\r\n  components: {\r\n    Vue3Lottie,\r\n  },\r\n  data() {\r\n    return {\r\n      DogJSON,\r\n    }\r\n  },\r\n}\r\n</script>\r\n```\r\n\r\n# Props and options\r\n\r\nMore detailed explanations are provided in the [documentation](https://vue3-lottie.vercel.app/guide.html).\r\n\r\n| Prop             | Type              | Default Value | Description                                                                              |\r\n| ---------------- | ----------------- | ------------- | ---------------------------------------------------------------------------------------- |\r\n| animationData    | Object            | {}            | The lottie animation data provided as a JSON object                                      |\r\n| animationLink    | String            | ''            | A URL link to the Lottie animation data (eg: `Lottie Animation URL` on lottiefiles.com)  |\r\n| width            | Number or String  | \"100%\"        | Width of the lottie animation container (Numbers correspond to pixel values)             |\r\n| height           | Number or String  | \"100%\"        | Height of the lottie animation container (Numbers correspond to pixel values)            |\r\n| speed            | Number            | \"1\"           | Speed of the lottie animation                                                            |\r\n| direction        | String            | \"forward\"     | Animation play direction                                                                 |\r\n| loop             | Number or Boolean | true          | The number of instances that the lottie animation should run (true is infinite)          |\r\n| autoPlay         | Boolean           | true          | Start animation on component load                                                        |\r\n| delay            | Number            | 0             | Delay the animation play state by some milliseconds                                      |\r\n| pauseAnimation   | Boolean           | false         | Prop to pass reactive variables so that you can control animation pause and play         |\r\n| pauseOnHover     | Boolean           | false         | Whether to pause the animation on hover                                                  |\r\n| playOnHover      | Boolean           | false         | Whether to play the animation when you hover                                             |\r\n| backgroundColor  | String            | transparent   | Background color of the container                                                        |\r\n| rendererSettings | Object            | {}            | Options for if you want to use an existing canvas to draw (can be ignored on most cases) |\r\n\r\n# Events\r\n\r\nA few events are emitted from the component. Look at the [Demos](#Demos) for examples.\r\n\r\n- onComplete\r\n  - If your animation has a finite amount of loops you can use this event to know when the animation has completed.\r\n- onLoopComplete\r\n  - If your animation has a finite amount of loops you can use this event to know when the animation has completed a loop.\r\n- onEnterFrame\r\n  - This event is fired every frame of the animation. There will be 60 events fired per second if your lottie animation runs at 60fps.\r\n- onSegmentStart\r\n  - This event is fired when the animation enters a segment.\r\n- onAnimationLoaded\r\n  - This event is fired when the animation has loaded. This should let you know when you can start referencing the methods for the component.\r\n\r\n# Methods\r\n\r\nYou can control the animation with the following methods. These methods can be called by assigning a `ref` value to the `vue3-lottie` component. Look at the [Demos](#Demos) for examples.\r\n\r\n- play\r\n  - Plays the animation\r\n- pause\r\n  - Pauses the animation\r\n- stop\r\n  - Stops the animation. This will also reset the animation to the first frame. Look at the demo for some examples.\r\n- destroy\r\n  - You can call this method to destroy the animation. It will remove the animation from the DOM.\r\n- setSpeed(speed)\r\n  - You can call this method to change the speed of your animation.\r\n- setDirection(direction)\r\n  - You can call this method to change the direction of your animation.\r\n- getDuration(inFrames)\r\n  - You can call this method to get the duration of your animation.\r\n- goToAndStop(frameNumber, isFrames)\r\n  - You can call this method to go to a specific frame of your animation. The animation will be stopped at the end of this call.\r\n- goToAndPlay(frameNumber, isFrames)\r\n  - You can call this method to go to a specific frame of your animation. The animation will be played from this frame.\r\n- playSegments(segments, forceFlag)\r\n  - You can call this method to play a specific segment of your animation.\r\n- setSubFrame(subFrame)\r\n  - You can call this method to set the subframe value.\r\n\r\n# Credits\r\n\r\nA big thank you goes to [@reslear](https://github.com/reslear) for adding Typescript support to this library. Go check out his profile and give him a follow!\r\n\r\n- @DamianGlowala - PR #29 - Fix `watch` function\r\n\r\n![forthebadge](https://forthebadge.com/images/badges/made-with-vue.svg) ![forthebadge](https://forthebadge.com/images/badges/built-with-love.svg)\r\n"
+  "readme": "# Vue 3 Lottie\r\n\r\n[![npm](https://img.shields.io/npm/v/vue3-lottie)](https://www.npmjs.com/package/vue3-lottie) [![Downloads](https://img.shields.io/npm/dt/vue3-lottie)](https://www.npmjs.com/package/vue3-lottie) [![Stars](https://img.shields.io/github/stars/megasanjay/vue3-lottie.svg?style=flat-square)](https://github.com/megasanjay/vue3-lottie/stargazers) [![License](https://img.shields.io/npm/l/vue3-lottie)](https://github.com/megasanjay/vue3-lottie/blob/main/LICENSE) [![GitHub issues](https://img.shields.io/github/issues/megasanjay/vue3-lottie)](https://github.com/megasanjay/vue3-lottie/issues)\r\n\r\n`vue3-lottie` was created to help developers add Lottie animations to their Vue 3 applications. In my search for a simple way to add Lottie animations to my Vue application I found a suprising lack of maintained solutions. `vue3-lottie` is a vue wrapper around the `lottie-web` library with a few additional features.\r\n\r\n# Demos\r\n\r\nView the live demos here: [https://vue3-lottie.vercel.app](https://vue3-lottie.vercel.app)\r\n\r\n# Upgrade to v2.x\r\n\r\nIf you are using version 1.x of `vue3-lottie` you should upgrade to version 2.x. You can do this by running the [Installation and Usage](#installation-and-usage) command below. This adds TS support for the component. There are some new imports so take a look at the [new documentation](https://vue3-lottie.vercel.app/guide.html#usage).\r\n\r\n# Installation and Usage\r\n\r\n## Vue 3\r\n\r\n- You can install `vue3-lottie` over `yarn` or `npm`. `lottie-web` is a dependency of `vue3-lottie` and should be automatically installed when you install `vue3-lottie`.\r\n\r\nIf you are using npm:\r\n\r\n```shell\r\nnpm install vue3-lottie@latest --save\r\n```\r\n\r\nIf you are using yarn:\r\n\r\n```shell\r\nyarn add vue3-lottie@latest\r\n```\r\n\r\n- Register the component in your Vue 3 application.\r\n\r\nThe most common use case is to register the component globally.\r\n\r\n```js\r\n// main.js\r\nimport { createApp } from 'vue'\r\nimport Vue3Lottie from 'vue3-lottie'\r\nimport 'vue3-lottie/dist/style.css'\r\n\r\ncreateApp(App).use(Vue3Lottie).mount('#app')\r\n```\r\n\r\nTo define global components for [Volar type-checking](https://github.com/johnsoncodehk/volar/tree/master/extensions/vscode-vue-language-features#usage) you will need to add:\r\n\r\n```ts\r\n// components.d.ts\r\ndeclare module '@vue/runtime-core' {\r\n  export interface GlobalComponents {\r\n    LottieAnimation: typeof import('vue3-lottie')['Vue3Lottie']\r\n  }\r\n}\r\nexport {}\r\n```\r\n\r\nIf needed rename component to use:\r\n\r\n```ts\r\napp.use(Vue3Lottie, { name: 'LottieAnimation' }) // use in template <LottieAnimation />\r\n```\r\n\r\n- `name` string (default: 'Vue3Lottie') - set custom component name\r\n\r\nAlternatively you can also import the component locally.\r\n\r\n```js\r\nimport { Vue3Lottie } from 'vue3-lottie'\r\nimport 'vue3-lottie/dist/style.css'\r\n\r\nexport default {\r\n  components: {\r\n    Vue3Lottie,\r\n  },\r\n}\r\n```\r\n\r\nYou can then use the component in your template\r\n\r\n```vue\r\n<template>\r\n  <Vue3Lottie :animationData=\"AstronautJSON\" :height=\"200\" :width=\"200\" />\r\n</template>\r\n\r\n<script>\r\nimport { Vue3Lottie } from 'vue3-lottie'\r\nimport 'vue3-lottie/dist/style.css'\r\n\r\nimport AstronautJSON from './astronaut.json'\r\n\r\nexport default {\r\n  components: {\r\n    Vue3Lottie,\r\n  },\r\n  data() {\r\n    return {\r\n      AstronautJSON,\r\n    }\r\n  },\r\n}\r\n</script>\r\n```\r\n\r\n## Nuxt 3\r\n\r\nThis is still experimental. Will be updated soon.\r\n\r\n- You can install `vue3-lottie` over `yarn` or `npm`. `lottie-web` is a dependency of `vue3-lottie` and should be automatically installed when you install `vue3-lottie`.\r\n\r\nIf you are using npm:\r\n\r\n```shell\r\nnpm install vue3-lottie@latest --save\r\n```\r\n\r\nIf you are using yarn:\r\n\r\n```shell\r\nyarn add vue3-lottie@latest\r\n```\r\n\r\n- Create a folder called **`plugins`** at the root of your project.\r\n- Create a file named **`vue3-lottie.client.js`** inside the _plugins_ directory.\r\n- Add the following code to the **`vue3-lottie.client.js`** file.\r\n\r\n```js\r\nimport { Vue3Lottie } from 'vue3-lottie'\r\n\r\nexport default defineNuxtPlugin((nuxtApp) => {\r\n  nuxtApp.vueApp.use(Vue3Lottie)\r\n})\r\n```\r\n\r\n- Import the css file required by the component into your **`app.vue`** file.\r\n\r\n```js\r\nimport 'vue3-lottie/dist/style.css'\r\n```\r\n\r\n# Props and options\r\n\r\nMore detailed explanations are provided in the [documentation](https://vue3-lottie.vercel.app/guide.html).\r\n\r\n| Prop             | Type              | Default Value | Description                                                                              |\r\n| ---------------- | ----------------- | ------------- | ---------------------------------------------------------------------------------------- |\r\n| animationData    | Object            | {}            | The lottie animation data provided as a JSON object                                      |\r\n| animationLink    | String            | ''            | A URL link to the Lottie animation data (eg: `Lottie Animation URL` on lottiefiles.com)  |\r\n| width            | Number or String  | \"100%\"        | Width of the lottie animation container (Numbers correspond to pixel values)             |\r\n| height           | Number or String  | \"100%\"        | Height of the lottie animation container (Numbers correspond to pixel values)            |\r\n| speed            | Number            | \"1\"           | Speed of the lottie animation                                                            |\r\n| direction        | String            | \"forward\"     | Animation play direction                                                                 |\r\n| loop             | Number or Boolean | true          | The number of instances that the lottie animation should run (true is infinite)          |\r\n| autoPlay         | Boolean           | true          | Start animation on component load                                                        |\r\n| delay            | Number            | 0             | Delay the animation play state by some milliseconds                                      |\r\n| pauseAnimation   | Boolean           | false         | Prop to pass reactive variables so that you can control animation pause and play         |\r\n| pauseOnHover     | Boolean           | false         | Whether to pause the animation on hover                                                  |\r\n| playOnHover      | Boolean           | false         | Whether to play the animation when you hover                                             |\r\n| backgroundColor  | String            | transparent   | Background color of the container                                                        |\r\n| rendererSettings | Object            | {}            | Options for if you want to use an existing canvas to draw (can be ignored on most cases) |\r\n\r\n# Events\r\n\r\nA few events are emitted from the component. Look at the [Demos](#Demos) for examples.\r\n\r\n- onComplete\r\n  - If your animation has a finite amount of loops you can use this event to know when the animation has completed.\r\n- onLoopComplete\r\n  - If your animation has a finite amount of loops you can use this event to know when the animation has completed a loop.\r\n- onEnterFrame\r\n  - This event is fired every frame of the animation. There will be 60 events fired per second if your lottie animation runs at 60fps.\r\n- onSegmentStart\r\n  - This event is fired when the animation enters a segment.\r\n- onAnimationLoaded\r\n  - This event is fired when the animation has loaded. This should let you know when you can start referencing the methods for the component.\r\n\r\n# Methods\r\n\r\nYou can control the animation with the following methods. These methods can be called by assigning a `ref` value to the `vue3-lottie` component. Look at the [Demos](#Demos) for examples.\r\n\r\n- play\r\n  - Plays the animation\r\n- pause\r\n  - Pauses the animation\r\n- stop\r\n  - Stops the animation. This will also reset the animation to the first frame. Look at the demo for some examples.\r\n- destroy\r\n  - You can call this method to destroy the animation. It will remove the animation from the DOM.\r\n- setSpeed(speed)\r\n  - You can call this method to change the speed of your animation.\r\n- setDirection(direction)\r\n  - You can call this method to change the direction of your animation.\r\n- getDuration(inFrames)\r\n  - You can call this method to get the duration of your animation.\r\n- goToAndStop(frameNumber, isFrames)\r\n  - You can call this method to go to a specific frame of your animation. The animation will be stopped at the end of this call.\r\n- goToAndPlay(frameNumber, isFrames)\r\n  - You can call this method to go to a specific frame of your animation. The animation will be played from this frame.\r\n- playSegments(segments, forceFlag)\r\n  - You can call this method to play a specific segment of your animation.\r\n- setSubFrame(subFrame)\r\n  - You can call this method to set the subframe value.\r\n\r\n# Credits\r\n\r\nA big thank you goes to [@reslear](https://github.com/reslear) for adding Typescript support to this library. Go check out his profile and give him a follow!\r\n\r\n- [@DamianGlowala](https://github.com/DamianGlowala) - PR [#29](https://github.com/megasanjay/vue3-lottie/pull/29) - Fix `watch` function\r\n\r\n![forthebadge](https://forthebadge.com/images/badges/made-with-vue.svg) ![forthebadge](https://forthebadge.com/images/badges/built-with-love.svg)\r\n"
 }

README.md

@@ -13,6 +13,10 @@ # Vue 3 Lottie
 
-If you are using version 1.x of `vue3-lottie` you should upgrade to version 2.x. You can do this by running the [Installation](#installation) command below. This adds TS support for the component. There are some new imports so take a look at the [new documentation](https://vue3-lottie.vercel.app/guide.html#usage).
+If you are using version 1.x of `vue3-lottie` you should upgrade to version 2.x. You can do this by running the [Installation and Usage](#installation-and-usage) command below. This adds TS support for the component. There are some new imports so take a look at the [new documentation](https://vue3-lottie.vercel.app/guide.html#usage).
 
-# Installation
+# Installation and Usage
 
+## Vue 3
+
+- You can install `vue3-lottie` over `yarn` or `npm`. `lottie-web` is a dependency of `vue3-lottie` and should be automatically installed when you install `vue3-lottie`.
+
 If you are using npm:
@@ -30,3 +34,3 @@
 
-# Usage
+- Register the component in your Vue 3 application.
 
@@ -44,2 +48,22 @@ The most common use case is to register the component globally.
 
+To define global components for [Volar type-checking](https://github.com/johnsoncodehk/volar/tree/master/extensions/vscode-vue-language-features#usage) you will need to add:
+
+```ts
+// components.d.ts
+declare module '@vue/runtime-core' {
+  export interface GlobalComponents {
+    LottieAnimation: typeof import('vue3-lottie')['Vue3Lottie']
+  }
+}
+export {}
+```
+
+If needed rename component to use:
+
+```ts
+app.use(Vue3Lottie, { name: 'LottieAnimation' }) // use in template <LottieAnimation />
+```
+
+- `name` string (default: 'Vue3Lottie') - set custom component name
+
 Alternatively you can also import the component locally.
@@ -62,3 +86,3 @@
 <template>
-  <Vue3Lottie :animationData="DogJSON" :height="200" :width="200" />
+  <Vue3Lottie :animationData="AstronautJSON" :height="200" :width="200" />
 </template>
@@ -70,3 +94,3 @@
 
-import DogJSON from './lotties/dog.json'
+import AstronautJSON from './astronaut.json'
 
@@ -79,3 +103,3 @@ export default {
     return {
-      DogJSON,
+      AstronautJSON,
     }
@@ -87,2 +111,38 @@ },
 
+## Nuxt 3
+
+This is still experimental. Will be updated soon.
+
+- You can install `vue3-lottie` over `yarn` or `npm`. `lottie-web` is a dependency of `vue3-lottie` and should be automatically installed when you install `vue3-lottie`.
+
+If you are using npm:
+
+```shell
+npm install vue3-lottie@latest --save
+```
+
+If you are using yarn:
+
+```shell
+yarn add vue3-lottie@latest
+```
+
+- Create a folder called **`plugins`** at the root of your project.
+- Create a file named **`vue3-lottie.client.js`** inside the _plugins_ directory.
+- Add the following code to the **`vue3-lottie.client.js`** file.
+
+```js
+import { Vue3Lottie } from 'vue3-lottie'
+
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.use(Vue3Lottie)
+})
+```
+
+- Import the css file required by the component into your **`app.vue`** file.
+
+```js
+import 'vue3-lottie/dist/style.css'
+```
+
 # Props and options
@@ -155,4 +215,4 @@
 
-- @DamianGlowala - PR #29 - Fix `watch` function
+- [@DamianGlowala](https://github.com/DamianGlowala) - PR [#29](https://github.com/megasanjay/vue3-lottie/pull/29) - Fix `watch` function
 
 ![forthebadge](https://forthebadge.com/images/badges/made-with-vue.svg) ![forthebadge](https://forthebadge.com/images/badges/built-with-love.svg)

No alert changes

Improved metrics

Total package byte prevSize

39891

increased by10.49%

Number of lines in readme file

211

increased by39.74%

No dependency changes