Lottie Plugin for unplugin.
Name | Status |
---|---|
Vite | |
Rollup | |
Webpack | |
Nuxt | |
Vue CLI | |
esbuild |
This project assumes that all of your Lottie files are in the same directory.
.
├── images
│ ├── img0.png
│ ├── img1.png
│ ├── ...
│ └── img5.png
└── data.json
// 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
})
npm i -d unplugin-lottie
Vite
// vite.config.ts
import UnpluginLottie from 'unplugin-lottie/vite'
export default defineConfig({
plugins: [
UnpluginLottie({
/* options */
}),
],
})
Example: playground/
Rollup
// rollup.config.js
import UnpluginLottie from 'unplugin-lottie/rollup'
export default {
plugins: [
UnpluginLottie({
/* options */
}),
],
}
Webpack
// webpack.config.js
module.exports = {
/* ... */
plugins: [
require('unplugin-lottie/webpack')({
/* options */
}),
],
}
Nuxt
// nuxt.config.js
export default defineNuxtConfig({
modules: [
[
'unplugin-lottie/nuxt',
{
/* options */
},
],
],
})
This module works for both Nuxt 2 and Nuxt Vite
Vue CLI
// vue.config.js
module.exports = {
configureWebpack: {
plugins: [
require('unplugin-lottie/webpack')({
/* options */
}),
],
},
}
esbuild
// esbuild.config.js
import { build } from 'esbuild'
import UnpluginLottie from 'unplugin-lottie/esbuild'
build({
plugins: [UnpluginLottie()],
})