Skip to content

FairyScript/unplugin-lottie

Repository files navigation

unplugin-lottie

NPM version

Lottie Plugin for unplugin.

Bundler Support

Name Status
Vite Vite
Rollup Rollup
Webpack Webpack
Nuxt Nuxt
Vue CLI Vue CLI
esbuild 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
// 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()],
})