unplugin-lottie
v1.0.4
Published
[![NPM version](https://img.shields.io/npm/v/unplugin-lottie?color=a1b858&label=)](https://www.npmjs.com/package/unplugin-lottie)
Downloads
5
Maintainers
Readme
unplugin-lottie
Lottie Plugin for unplugin.
Bundler Support
| Name | Status | | ------- | -------------------------------------------------------------- | | Vite | | | Rollup | | | Webpack | | | Nuxt | | | Vue CLI | | | esbuild | |
Note
This project assumes that all of your Lottie files are in the same directory.
.
├── images
│ ├── img0.png
│ ├── img1.png
│ ├── ...
│ └── img5.png
└── data.json
Usage
// yourProjectFile.ts
import lottieFile from 'assets/your-lottie-file/data.json?lottie'
import lottie from 'lottie-web'
lottie.loadAnimation({
container: element, // the dom element that will contain the animation
renderer: 'svg',
loop: true,
autoplay: true,
animationData: lottieFile, // the animation json object
})
Install
npm i -d unplugin-lottie
// vite.config.ts
import UnpluginLottie from 'unplugin-lottie/vite'
export default defineConfig({
plugins: [
UnpluginLottie({
/* options */
}),
],
})
Example: playground/
// rollup.config.js
import UnpluginLottie from 'unplugin-lottie/rollup'
export default {
plugins: [
UnpluginLottie({
/* options */
}),
],
}
// webpack.config.js
module.exports = {
/* ... */
plugins: [
require('unplugin-lottie/webpack')({
/* options */
}),
],
}
// nuxt.config.js
export default defineNuxtConfig({
modules: [
[
'unplugin-lottie/nuxt',
{
/* options */
},
],
],
})
This module works for both Nuxt 2 and Nuxt Vite
// vue.config.js
module.exports = {
configureWebpack: {
plugins: [
require('unplugin-lottie/webpack')({
/* options */
}),
],
},
}
// esbuild.config.js
import { build } from 'esbuild'
import UnpluginLottie from 'unplugin-lottie/esbuild'
build({
plugins: [UnpluginLottie()],
})