@lottiefiles/lottie-player - npm Package Compare versions

Comparing version 1.5.7 to 1.5.8

package.json

 {
   "name": "@lottiefiles/lottie-player",
-  "version": "1.5.7",
+  "version": "1.5.8",
   "description": "Lottie animation and Telegram Sticker player web components.",
@@ -33,3 +33,3 @@ "main": "dist/lottie-player.js",
     "lit": "^2.1.2",
-    "lottie-web": "^5.8.1",
+    "lottie-web": "^5.9.6",
     "pako": "^2.0.4",
@@ -36,0 +36,0 @@ "resize-observer-polyfill": "^1.5.1"

README.md

@@ -174,17 +174,48 @@ ## lottie-player Web Component
 
-### NuxtJS
+### Nuxt 2
 
-The process for NuxtJS is slightly different. Create a lottie-player.js file in project root inside a folder named 'plugins'. Add the code below to the file
+Create a `lottie-player.js` file inside the `/plugins` folder and add the below code to the file:
 
 ```js
 import * as LottiePlayer from "@lottiefiles/lottie-player";
+```  
+\
+Open `nuxt.config.js` file and add the following entry to register the newly created plugin:
+
+```js
+export default {
+  plugins: [{ src: "~/plugins/lottie-player.js", mode: "client" }]
+}
 ```
 
-Open nuxt.config.js file and adjust the plugins array as shown below
+This is because the player script needs to be rendered on the browser/client side and we must configure Nuxt to load the script on the client side only.  
+\
+You would then be able to use the player as follows inside any component:
 
+```html
+<lottie-player
+  autoplay
+  controls
+  loop
+  style="width:400px"
+  src="https://assets3.lottiefiles.com/packages/lf20_RItkEz.json"
+  speed="1"
+  debug
+/>
+```
+
+### Nuxt 3
+
+The process for Nuxt 3 is slightly different.  
+Create a `lottie-player.client.ts` file inside the `/plugins` folder and add the below code to the file:
+
 ```js
-plugins: [{ src: "~/plugins/lottie-player.js", mode: "client" }],
+import * as LottiePlayer from "@lottiefiles/lottie-player";
+
+export default LottiePlayer;
 ```
+\
+Your plugin will be automatically available throughout your Nuxt application thanks to the [plugin auto-registration](https://v3.nuxtjs.org/guide/directory-structure/plugins). Note the `client` suffix in the name of the plugin - this tells Nuxt to load it only on the client side, as the Lottie Player script can only be rendered in the browser.
 
-You would then be able to use the player as follows inside any component
+You would then be able to use the player as follows inside any component:
 
@@ -200,10 +231,8 @@ ```html
   debug
-></lottie-player>
+/>
 ```
 
-This is because the player script needs to be rendered on the browser/client side and we must configure nuxtjs to load the script on the client side only.
-
 ### NextJS
 
-The process to import in NextJS is similar to NuxtJS in the sense that on SSR mode, the library must be declared as a client side module. To do this, import the library within a react useEffect hook.
+The process to import in NextJS is similar to Nuxt in the sense that on SSR mode, the library must be declared as a client side module. To do this, import the library within a react useEffect hook.
 
@@ -210,0 +239,0 @@ ```javascript

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

6467567

increased by1.88%

Lines of code

6037

increased by3.2%

Number of lines in readme file

349

increased by9.06%

Worsened metrics

Number of package files

19

decreased by-5%

Number of medium supply chain risk alerts

8

increased by100%

Dependency changes

• Updatedlottie-web@^5.9.6