Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

vue3-lottie

Package Overview
Dependencies
Maintainers
1
Versions
62
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue3-lottie - npm Package Compare versions

Comparing version 2.3.0 to 2.3.1

LICENSE

9

dist/vue3-lottie.vue.d.ts

@@ -71,2 +71,6 @@ import { PropType } from 'vue';

};
rendererSettings: {
type: PropType<any>;
default: () => {};
};
}, {

@@ -148,2 +152,6 @@ elementid: import("vue").Ref<string>;

};
rendererSettings: {
type: PropType<any>;
default: () => {};
};
}>> & {

@@ -169,3 +177,4 @@ onOnComplete?: ((...args: any[]) => any) | ((...args: unknown[]) => any);

pauseAnimation: boolean;
rendererSettings: any;
}>;
export default _default;

27

package.json
{
"name": "vue3-lottie",
"version": "2.3.0",
"version": "2.3.1",
"license": "MIT",
"author": "Sanjay Soundarajan <info@sanjaysoundarajan.dev> (https://sanjaysoundarajan.dev)",
"scripts": {
"dev": "vue-cli-service serve dev/serve.ts",
"build": "vite build && tsc -d --emitDeclarationOnly && vue-typegen gen -s ./src -o ./dist",
"prepublishOnly": "npm run build",
"lint": "eslint \"{packages,playground}/**/*.{ts,tsx,vue,js,jsx,html}\"",
"prettier": "npx prettier --write ."
},
"dependencies": {
"lodash": "^4.17.21",
"lottie-web": "^5.8.1"

@@ -42,9 +36,10 @@ },

"devDependencies": {
"@babel/types": "7.18.10",
"@babel/types": "7.19.0",
"@types/lodash": "^4.14.186",
"@types/node": "17.0.19",
"@vitejs/plugin-vue": "2.3.4",
"typescript": "4.7.4",
"typescript": "4.8.3",
"vite": "2.9.15",
"vue": "3.2.37",
"vue-tsc": "0.40.1",
"vue": "3.2.39",
"vue-tsc": "0.40.13",
"vue-typegen": "0.2.0"

@@ -63,3 +58,9 @@ },

"lottie"
]
],
"scripts": {
"dev": "vue-cli-service serve dev/serve.ts",
"build": "vite build && tsc -d --emitDeclarationOnly && vue-typegen gen -s ./src -o ./dist",
"lint": "eslint \"{packages,playground}/**/*.{ts,tsx,vue,js,jsx,html}\"",
"prettier": "npx prettier --write ."
}
}

@@ -124,7 +124,7 @@ # Vue 3 Lottie

- 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.
- Create a file named **`Vue3Lottie.client.ts`** inside the _plugins_ directory.
- Add the following code to the **`Vue3Lottie.client.ts`** file.
```js
import { Vue3Lottie } from 'vue3-lottie'
```ts
import Vue3Lottie from 'vue3-lottie'

@@ -136,2 +136,16 @@ export default defineNuxtPlugin((nuxtApp) => {

This should register as a global component that you can call anywhere in your app under the <Vue3Lottie> tag.
I would recommend using a `<client-only>` parent tag to ensure that the animation only loads in on the client side.
```vue
<client-only>
<Vue3Lottie
animationLink="https://assets10.lottiefiles.com/packages/lf20_soCRuE.json"
:height="200"
:width="200"
/>
</client-only>
```
- Import the css file required by the component into your **`app.vue`** file.

@@ -138,0 +152,0 @@

Sorry, the diff of this file is too big to display

Sorry, the diff of this file is too big to display

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc