unplugin-lottie

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

// 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()],
})