{"id":22726,"library":"vite-plugin-lottie","title":"vite-plugin-lottie","description":"Vite plugin that enables import of Lottie JSON animation files as parsed animation data. Current version 1.0.1 (released 2023). Bundles Lottie files into the application by transforming imports with the `?lottie` query suffix. Designed exclusively for Vite, requires Lottie-web as runtime dependency. Provides TypeScript type declarations for the query suffix. Differentiates from other Lottie loaders by being a minimal, zero-config Vite plugin without additional bundler configuration.","status":"active","version":"1.0.1","language":"javascript","source_language":"en","source_url":"https://github.com/xieyhn/vite-plugin-lottie","tags":["javascript","vite","lottie","plugin","vite-plugin","typescript"],"install":[{"cmd":"npm install vite-plugin-lottie","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-lottie","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-lottie","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency required for plugin to function","package":"vite","optional":false},{"reason":"runtime dependency for Lottie player; must be installed separately","package":"lottie-web","optional":true}],"imports":[{"note":"Named export, not default.","wrong":"import lottie from 'vite-plugin-lottie'","symbol":"lottie","correct":"import { lottie } from 'vite-plugin-lottie'"},{"note":"Must append ?lottie query to trigger the plugin.","wrong":"import animationData from './animation.json'","symbol":"animationData","correct":"import animationData from './animation.json?lottie'"},{"note":"Triple-slash directive for TypeScript type augmentation; not a runtime import.","wrong":"import 'vite-plugin-lottie/client'","symbol":"vite-plugin-lottie/client","correct":"/// <reference types=\"vite-plugin-lottie/client\" />"}],"quickstart":{"code":"// vite.config.ts\nimport { defineConfig } from 'vite'\nimport { lottie } from 'vite-plugin-lottie'\n\nexport default defineConfig({\n  plugins: [lottie()],\n})\n\n// App.vue\n<script setup lang=\"ts\">\nimport Lottie from 'lottie-web'\nimport animationData from './animation.json?lottie'\nimport { onMounted } from 'vue'\n\nonMounted(() => {\n  Lottie.loadAnimation({\n    container: document.getElementById('lottie-container'),\n    renderer: 'svg',\n    loop: true,\n    autoplay: true,\n    animationData: animationData\n  })\n})\n</script>\n\n<template>\n  <div id=\"lottie-container\" style=\"width: 200px; height: 200px;\"></div>\n</template>","lang":"typescript","description":"Setup Vite plugin in config and use ?lottie import in Vue component to load animation."},"warnings":[{"fix":"Use import animationData from './animation.json?lottie'","message":"You must append ?lottie to the import path, otherwise Vite will try to parse JSON as JavaScript and fail.","severity":"gotcha","affected_versions":">0.0.0"},{"fix":"Ensure all Lottie file imports end with ?lottie","message":"The plugin only transforms imports with ?lottie query; regular JSON imports are unaffected.","severity":"gotcha","affected_versions":">0.0.0"},{"fix":"Install lottie-web as a regular dependency: npm install lottie-web","message":"Plugin does not bundle lottie-web itself; you must install lottie-web separately.","severity":"deprecated","affected_versions":">0.0.0"},{"fix":"Add /// <reference types=\"vite-plugin-lottie/client\" /> in a .d.ts file or tsconfig include.","message":"TypeScript users must add triple-slash reference to enable type checking for ?lottie imports.","severity":"gotcha","affected_versions":">0.0.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Add /// <reference types=\"vite-plugin-lottie/client\" /> in a .d.ts file or in your tsconfig's include.","cause":"TypeScript does not know about the ?lottie query suffix without type augmentation.","error":"Cannot find module './animation.json?lottie' or its corresponding type declarations."},{"fix":"Change import to './animation.json?lottie'.","cause":"Importing a .json file without the ?lottie query, causing Vite to treat it as plain JSON.","error":"Failed to load import './animation.json' from 'src/App.vue'. Unexpected token '}' in JSON at position..."},{"fix":"Install lottie-web: npm install lottie-web","cause":"Missing lottie-web runtime dependency; the plugin does not include Lottie player.","error":"Lottie is not defined"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}