[{"data":1,"prerenderedAt":33},["ShallowReactive",2],{"3787120":3},{"type_of":4,"id":5,"title":6,"description":7,"readable_publish_date":8,"slug":9,"path":10,"url":11,"comments_count":12,"public_reactions_count":13,"collection_id":14,"published_timestamp":15,"language":16,"subforem_id":13,"positive_reactions_count":13,"cover_image":14,"social_image":17,"canonical_url":11,"created_at":15,"edited_at":14,"crossposted_at":14,"published_at":15,"last_comment_at":15,"reading_time_minutes":18,"tag_list":19,"tags":20,"body_html":25,"body_markdown":26,"user":27},"article",3787120,"How to Add Lottie Animations to Vue.js (2025 Guide)","Complete guide to using Lottie animations in Vue 3 with @lottiefiles/dotlottie-vue and lottie-web. Includes free animation sources and editor tools.","May 31","how-to-add-lottie-animations-to-vuejs-2025-guide-1g6c","/fazalshah/how-to-add-lottie-animations-to-vuejs-2025-guide-1g6c","https://dev.to/fazalshah/how-to-add-lottie-animations-to-vuejs-2025-guide-1g6c",0,1,null,"2026-05-31T04:47:02Z","en","https://media2.dev.to/dynamic/image/width=1200,height=627,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffm78hyv50w89cpojqs4y.png",3,"vue, javascript, animation, frontend",[21,22,23,24],"vue","javascript","animation","frontend","\u003Cp>Lottie animations are the best way to add crisp, lightweight animations to your Vue app. This guide covers the two main approaches in Vue 3.\u003C/p>\n\n\u003Ch2>\n  \u003Ca name=\"option-1-lottiefilesdotlottievue-recommended\" href=\"#option-1-lottiefilesdotlottievue-recommended\">\n  \u003C/a>\n  Option 1: @lottiefiles/dotlottie-vue (Recommended)\n\u003C/h2>\n\n\u003Cp>The DotLottie package is the modern approach — smaller runtime (~100KB vs ~500KB), supports the newer compressed .lottie format, and has a clean Vue 3 API.\u003Cbr>\n\u003C/p>\n\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight shell\">\u003Ccode>npm \u003Cspan class=\"nb\">install\u003C/span> @lottiefiles/dotlottie-vue\n\u003C/code>\u003C/pre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\">\u003Ctitle>Enter fullscreen mode\u003C/title>\n    \u003Cpath d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\">\u003C/path>\n\u003C/svg>\n\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\">\u003Ctitle>Exit fullscreen mode\u003C/title>\n    \u003Cpath d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\">\u003C/path>\n\u003C/svg>\n\n\u003C/div>\n\u003C/div>\n\u003C/div>\n\n\n\n\n\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight vue\">\u003Ccode>\u003Cspan class=\"nt\"><\u003C/span>\u003Cspan class=\"k\">template\u003C/span>\u003Cspan class=\"nt\">>\u003C/span>\n  \u003Cspan class=\"nt\"><DotLottieVue\u003C/span>\n    \u003Cspan class=\"na\">src=\u003C/span>\u003Cspan class=\"s\">\"/animations/loader.lottie\"\u003C/span>\n    \u003Cspan class=\"na\">:loop=\u003C/span>\u003Cspan class=\"s\">\"true\"\u003C/span>\n    \u003Cspan class=\"na\">:autoplay=\u003C/span>\u003Cspan class=\"s\">\"true\"\u003C/span>\n    \u003Cspan class=\"na\">style=\u003C/span>\u003Cspan class=\"s\">\"width: 200px; height: 200px\"\u003C/span>\n  \u003Cspan class=\"nt\">/>\u003C/span>\n\u003Cspan class=\"nt\"></\u003C/span>\u003Cspan class=\"k\">template\u003C/span>\u003Cspan class=\"nt\">>\u003C/span>\n\n\u003Cspan class=\"nt\"><\u003C/span>\u003Cspan class=\"k\">script\u003C/span> \u003Cspan class=\"na\">setup\u003C/span>\u003Cspan class=\"nt\">>\u003C/span>\n\u003Cspan class=\"k\">import\u003C/span> \u003Cspan class=\"p\">{\u003C/span> \u003Cspan class=\"nx\">DotLottieVue\u003C/span> \u003Cspan class=\"p\">}\u003C/span> \u003Cspan class=\"k\">from\u003C/span> \u003Cspan class=\"dl\">'\u003C/span>\u003Cspan class=\"s1\">@lottiefiles/dotlottie-vue\u003C/span>\u003Cspan class=\"dl\">'\u003C/span>\n\u003Cspan class=\"nt\"></\u003C/span>\u003Cspan class=\"k\">script\u003C/span>\u003Cspan class=\"nt\">>\u003C/span>\n\u003C/code>\u003C/pre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\">\u003Ctitle>Enter fullscreen mode\u003C/title>\n    \u003Cpath d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\">\u003C/path>\n\u003C/svg>\n\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\">\u003Ctitle>Exit fullscreen mode\u003C/title>\n    \u003Cpath d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\">\u003C/path>\n\u003C/svg>\n\n\u003C/div>\n\u003C/div>\n\u003C/div>\n\n\n\n\u003Cp>For JSON files (not .lottie), use the same \u003Ccode>src\u003C/code> prop pointing to your .json file.\u003C/p>\n\n\u003Ch3>\n  \u003Ca name=\"controlling-playback-programmatically\" href=\"#controlling-playback-programmatically\">\n  \u003C/a>\n  Controlling Playback Programmatically\n\u003C/h3>\n\n\n\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight vue\">\u003Ccode>\u003Cspan class=\"nt\"><\u003C/span>\u003Cspan class=\"k\">template\u003C/span>\u003Cspan class=\"nt\">>\u003C/span>\n  \u003Cspan class=\"nt\"><DotLottieVue\u003C/span>\n    \u003Cspan class=\"na\">ref=\u003C/span>\u003Cspan class=\"s\">\"lottieRef\"\u003C/span>\n    \u003Cspan class=\"na\">src=\u003C/span>\u003Cspan class=\"s\">\"/animations/check.lottie\"\u003C/span>\n    \u003Cspan class=\"na\">:loop=\u003C/span>\u003Cspan class=\"s\">\"false\"\u003C/span>\n    \u003Cspan class=\"na\">:autoplay=\u003C/span>\u003Cspan class=\"s\">\"false\"\u003C/span>\n  \u003Cspan class=\"nt\">/>\u003C/span>\n  \u003Cspan class=\"nt\"><button\u003C/span> \u003Cspan class=\"err\">@\u003C/span>\u003Cspan class=\"na\">click=\u003C/span>\u003Cspan class=\"s\">\"play\"\u003C/span>\u003Cspan class=\"nt\">>\u003C/span>Play\u003Cspan class=\"nt\"></button>\u003C/span>\n  \u003Cspan class=\"nt\"><button\u003C/span> \u003Cspan class=\"err\">@\u003C/span>\u003Cspan class=\"na\">click=\u003C/span>\u003Cspan class=\"s\">\"pause\"\u003C/span>\u003Cspan class=\"nt\">>\u003C/span>Pause\u003Cspan class=\"nt\"></button>\u003C/span>\n\u003Cspan class=\"nt\"></\u003C/span>\u003Cspan class=\"k\">template\u003C/span>\u003Cspan class=\"nt\">>\u003C/span>\n\n\u003Cspan class=\"nt\"><\u003C/span>\u003Cspan class=\"k\">script\u003C/span> \u003Cspan class=\"na\">setup\u003C/span>\u003Cspan class=\"nt\">>\u003C/span>\n\u003Cspan class=\"k\">import\u003C/span> \u003Cspan class=\"p\">{\u003C/span> \u003Cspan class=\"nx\">ref\u003C/span> \u003Cspan class=\"p\">}\u003C/span> \u003Cspan class=\"k\">from\u003C/span> \u003Cspan class=\"dl\">'\u003C/span>\u003Cspan class=\"s1\">vue\u003C/span>\u003Cspan class=\"dl\">'\u003C/span>\n\u003Cspan class=\"k\">import\u003C/span> \u003Cspan class=\"p\">{\u003C/span> \u003Cspan class=\"nx\">DotLottieVue\u003C/span> \u003Cspan class=\"p\">}\u003C/span> \u003Cspan class=\"k\">from\u003C/span> \u003Cspan class=\"dl\">'\u003C/span>\u003Cspan class=\"s1\">@lottiefiles/dotlottie-vue\u003C/span>\u003Cspan class=\"dl\">'\u003C/span>\n\n\u003Cspan class=\"kd\">const\u003C/span> \u003Cspan class=\"nx\">lottieRef\u003C/span> \u003Cspan class=\"o\">=\u003C/span> \u003Cspan class=\"nf\">ref\u003C/span>\u003Cspan class=\"p\">(\u003C/span>\u003Cspan class=\"kc\">null\u003C/span>\u003Cspan class=\"p\">)\u003C/span>\n\n\u003Cspan class=\"kd\">function\u003C/span> \u003Cspan class=\"nf\">play\u003C/span>\u003Cspan class=\"p\">()\u003C/span> \u003Cspan class=\"p\">{\u003C/span>\n  \u003Cspan class=\"nx\">lottieRef\u003C/span>\u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nx\">value\u003C/span>\u003Cspan class=\"p\">?.\u003C/span>\u003Cspan class=\"nf\">play\u003C/span>\u003Cspan class=\"p\">()\u003C/span>\n\u003Cspan class=\"p\">}\u003C/span>\n\u003Cspan class=\"kd\">function\u003C/span> \u003Cspan class=\"nf\">pause\u003C/span>\u003Cspan class=\"p\">()\u003C/span> \u003Cspan class=\"p\">{\u003C/span>\n  \u003Cspan class=\"nx\">lottieRef\u003C/span>\u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nx\">value\u003C/span>\u003Cspan class=\"p\">?.\u003C/span>\u003Cspan class=\"nf\">pause\u003C/span>\u003Cspan class=\"p\">()\u003C/span>\n\u003Cspan class=\"p\">}\u003C/span>\n\u003Cspan class=\"nt\"></\u003C/span>\u003Cspan class=\"k\">script\u003C/span>\u003Cspan class=\"nt\">>\u003C/span>\n\u003C/code>\u003C/pre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\">\u003Ctitle>Enter fullscreen mode\u003C/title>\n    \u003Cpath d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\">\u003C/path>\n\u003C/svg>\n\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\">\u003Ctitle>Exit fullscreen mode\u003C/title>\n    \u003Cpath d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\">\u003C/path>\n\u003C/svg>\n\n\u003C/div>\n\u003C/div>\n\u003C/div>\n\n\n\n\n\u003Chr>\n\n\u003Ch2>\n  \u003Ca name=\"option-2-lottieweb-full-control\" href=\"#option-2-lottieweb-full-control\">\n  \u003C/a>\n  Option 2: lottie-web (Full Control)\n\u003C/h2>\n\n\u003Cp>For more granular control over frames, segments, and events:\u003Cbr>\n\u003C/p>\n\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight shell\">\u003Ccode>npm \u003Cspan class=\"nb\">install \u003C/span>lottie-web\n\u003C/code>\u003C/pre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\">\u003Ctitle>Enter fullscreen mode\u003C/title>\n    \u003Cpath d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\">\u003C/path>\n\u003C/svg>\n\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\">\u003Ctitle>Exit fullscreen mode\u003C/title>\n    \u003Cpath d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\">\u003C/path>\n\u003C/svg>\n\n\u003C/div>\n\u003C/div>\n\u003C/div>\n\n\n\n\n\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight vue\">\u003Ccode>\u003Cspan class=\"nt\"><\u003C/span>\u003Cspan class=\"k\">template\u003C/span>\u003Cspan class=\"nt\">>\u003C/span>\n  \u003Cspan class=\"nt\"><div\u003C/span> \u003Cspan class=\"na\">ref=\u003C/span>\u003Cspan class=\"s\">\"container\"\u003C/span> \u003Cspan class=\"na\">style=\u003C/span>\u003Cspan class=\"s\">\"width: 200px; height: 200px\"\u003C/span> \u003Cspan class=\"nt\">/>\u003C/span>\n\u003Cspan class=\"nt\"></\u003C/span>\u003Cspan class=\"k\">template\u003C/span>\u003Cspan class=\"nt\">>\u003C/span>\n\n\u003Cspan class=\"nt\"><\u003C/span>\u003Cspan class=\"k\">script\u003C/span> \u003Cspan class=\"na\">setup\u003C/span>\u003Cspan class=\"nt\">>\u003C/span>\n\u003Cspan class=\"k\">import\u003C/span> \u003Cspan class=\"p\">{\u003C/span> \u003Cspan class=\"nx\">ref\u003C/span>\u003Cspan class=\"p\">,\u003C/span> \u003Cspan class=\"nx\">onMounted\u003C/span>\u003Cspan class=\"p\">,\u003C/span> \u003Cspan class=\"nx\">onBeforeUnmount\u003C/span> \u003Cspan class=\"p\">}\u003C/span> \u003Cspan class=\"k\">from\u003C/span> \u003Cspan class=\"dl\">'\u003C/span>\u003Cspan class=\"s1\">vue\u003C/span>\u003Cspan class=\"dl\">'\u003C/span>\n\u003Cspan class=\"k\">import\u003C/span> \u003Cspan class=\"nx\">lottie\u003C/span> \u003Cspan class=\"k\">from\u003C/span> \u003Cspan class=\"dl\">'\u003C/span>\u003Cspan class=\"s1\">lottie-web\u003C/span>\u003Cspan class=\"dl\">'\u003C/span>\n\n\u003Cspan class=\"kd\">const\u003C/span> \u003Cspan class=\"nx\">container\u003C/span> \u003Cspan class=\"o\">=\u003C/span> \u003Cspan class=\"nf\">ref\u003C/span>\u003Cspan class=\"p\">(\u003C/span>\u003Cspan class=\"kc\">null\u003C/span>\u003Cspan class=\"p\">)\u003C/span>\n\u003Cspan class=\"kd\">let\u003C/span> \u003Cspan class=\"nx\">anim\u003C/span> \u003Cspan class=\"o\">=\u003C/span> \u003Cspan class=\"kc\">null\u003C/span>\n\n\u003Cspan class=\"nf\">onMounted\u003C/span>\u003Cspan class=\"p\">(()\u003C/span> \u003Cspan class=\"o\">=>\u003C/span> \u003Cspan class=\"p\">{\u003C/span>\n  \u003Cspan class=\"nx\">anim\u003C/span> \u003Cspan class=\"o\">=\u003C/span> \u003Cspan class=\"nx\">lottie\u003C/span>\u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nf\">loadAnimation\u003C/span>\u003Cspan class=\"p\">({\u003C/span>\n    \u003Cspan class=\"na\">container\u003C/span>\u003Cspan class=\"p\">:\u003C/span> \u003Cspan class=\"nx\">container\u003C/span>\u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nx\">value\u003C/span>\u003Cspan class=\"p\">,\u003C/span>\n    \u003Cspan class=\"na\">renderer\u003C/span>\u003Cspan class=\"p\">:\u003C/span> \u003Cspan class=\"dl\">'\u003C/span>\u003Cspan class=\"s1\">svg\u003C/span>\u003Cspan class=\"dl\">'\u003C/span>\u003Cspan class=\"p\">,\u003C/span>\n    \u003Cspan class=\"na\">loop\u003C/span>\u003Cspan class=\"p\">:\u003C/span> \u003Cspan class=\"kc\">true\u003C/span>\u003Cspan class=\"p\">,\u003C/span>\n    \u003Cspan class=\"na\">autoplay\u003C/span>\u003Cspan class=\"p\">:\u003C/span> \u003Cspan class=\"kc\">true\u003C/span>\u003Cspan class=\"p\">,\u003C/span>\n    \u003Cspan class=\"na\">path\u003C/span>\u003Cspan class=\"p\">:\u003C/span> \u003Cspan class=\"dl\">'\u003C/span>\u003Cspan class=\"s1\">/animations/loader.json\u003C/span>\u003Cspan class=\"dl\">'\u003C/span>\u003Cspan class=\"p\">,\u003C/span>\n  \u003Cspan class=\"p\">})\u003C/span>\n\u003Cspan class=\"p\">})\u003C/span>\n\n\u003Cspan class=\"nf\">onBeforeUnmount\u003C/span>\u003Cspan class=\"p\">(()\u003C/span> \u003Cspan class=\"o\">=>\u003C/span> \u003Cspan class=\"p\">{\u003C/span>\n  \u003Cspan class=\"nx\">anim\u003C/span>\u003Cspan class=\"p\">?.\u003C/span>\u003Cspan class=\"nf\">destroy\u003C/span>\u003Cspan class=\"p\">()\u003C/span>\n\u003Cspan class=\"p\">})\u003C/span>\n\u003Cspan class=\"nt\"></\u003C/span>\u003Cspan class=\"k\">script\u003C/span>\u003Cspan class=\"nt\">>\u003C/span>\n\u003C/code>\u003C/pre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\">\u003Ctitle>Enter fullscreen mode\u003C/title>\n    \u003Cpath d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\">\u003C/path>\n\u003C/svg>\n\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\">\u003Ctitle>Exit fullscreen mode\u003C/title>\n    \u003Cpath d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\">\u003C/path>\n\u003C/svg>\n\n\u003C/div>\n\u003C/div>\n\u003C/div>\n\n\n\n\u003Cp>\u003Cstrong>Always destroy the animation in \u003Ccode>onBeforeUnmount\u003C/code>\u003C/strong> to prevent memory leaks.\u003C/p>\n\n\n\u003Chr>\n\n\u003Ch2>\n  \u003Ca name=\"trigger-animation-on-user-interaction\" href=\"#trigger-animation-on-user-interaction\">\n  \u003C/a>\n  Trigger Animation on User Interaction\n\u003C/h2>\n\n\u003Cp>A common pattern: play a success animation when a form submits.\u003Cbr>\n\u003C/p>\n\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight vue\">\u003Ccode>\u003Cspan class=\"nt\"><\u003C/span>\u003Cspan class=\"k\">template\u003C/span>\u003Cspan class=\"nt\">>\u003C/span>\n  \u003Cspan class=\"nt\"><div\u003C/span> \u003Cspan class=\"na\">ref=\u003C/span>\u003Cspan class=\"s\">\"container\"\u003C/span> \u003Cspan class=\"na\">style=\u003C/span>\u003Cspan class=\"s\">\"width: 100px; height: 100px\"\u003C/span> \u003Cspan class=\"nt\">/>\u003C/span>\n  \u003Cspan class=\"nt\"><button\u003C/span> \u003Cspan class=\"err\">@\u003C/span>\u003Cspan class=\"na\">click=\u003C/span>\u003Cspan class=\"s\">\"handleSubmit\"\u003C/span>\u003Cspan class=\"nt\">>\u003C/span>Submit\u003Cspan class=\"nt\"></button>\u003C/span>\n\u003Cspan class=\"nt\"></\u003C/span>\u003Cspan class=\"k\">template\u003C/span>\u003Cspan class=\"nt\">>\u003C/span>\n\n\u003Cspan class=\"nt\"><\u003C/span>\u003Cspan class=\"k\">script\u003C/span> \u003Cspan class=\"na\">setup\u003C/span>\u003Cspan class=\"nt\">>\u003C/span>\n\u003Cspan class=\"k\">import\u003C/span> \u003Cspan class=\"p\">{\u003C/span> \u003Cspan class=\"nx\">ref\u003C/span>\u003Cspan class=\"p\">,\u003C/span> \u003Cspan class=\"nx\">onMounted\u003C/span>\u003Cspan class=\"p\">,\u003C/span> \u003Cspan class=\"nx\">onBeforeUnmount\u003C/span> \u003Cspan class=\"p\">}\u003C/span> \u003Cspan class=\"k\">from\u003C/span> \u003Cspan class=\"dl\">'\u003C/span>\u003Cspan class=\"s1\">vue\u003C/span>\u003Cspan class=\"dl\">'\u003C/span>\n\u003Cspan class=\"k\">import\u003C/span> \u003Cspan class=\"nx\">lottie\u003C/span> \u003Cspan class=\"k\">from\u003C/span> \u003Cspan class=\"dl\">'\u003C/span>\u003Cspan class=\"s1\">lottie-web\u003C/span>\u003Cspan class=\"dl\">'\u003C/span>\n\u003Cspan class=\"k\">import\u003C/span> \u003Cspan class=\"nx\">successData\u003C/span> \u003Cspan class=\"k\">from\u003C/span> \u003Cspan class=\"dl\">'\u003C/span>\u003Cspan class=\"s1\">@/assets/success.json\u003C/span>\u003Cspan class=\"dl\">'\u003C/span>\n\n\u003Cspan class=\"kd\">const\u003C/span> \u003Cspan class=\"nx\">container\u003C/span> \u003Cspan class=\"o\">=\u003C/span> \u003Cspan class=\"nf\">ref\u003C/span>\u003Cspan class=\"p\">(\u003C/span>\u003Cspan class=\"kc\">null\u003C/span>\u003Cspan class=\"p\">)\u003C/span>\n\u003Cspan class=\"kd\">let\u003C/span> \u003Cspan class=\"nx\">anim\u003C/span> \u003Cspan class=\"o\">=\u003C/span> \u003Cspan class=\"kc\">null\u003C/span>\n\n\u003Cspan class=\"nf\">onMounted\u003C/span>\u003Cspan class=\"p\">(()\u003C/span> \u003Cspan class=\"o\">=>\u003C/span> \u003Cspan class=\"p\">{\u003C/span>\n  \u003Cspan class=\"nx\">anim\u003C/span> \u003Cspan class=\"o\">=\u003C/span> \u003Cspan class=\"nx\">lottie\u003C/span>\u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nf\">loadAnimation\u003C/span>\u003Cspan class=\"p\">({\u003C/span>\n    \u003Cspan class=\"na\">container\u003C/span>\u003Cspan class=\"p\">:\u003C/span> \u003Cspan class=\"nx\">container\u003C/span>\u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nx\">value\u003C/span>\u003Cspan class=\"p\">,\u003C/span>\n    \u003Cspan class=\"na\">renderer\u003C/span>\u003Cspan class=\"p\">:\u003C/span> \u003Cspan class=\"dl\">'\u003C/span>\u003Cspan class=\"s1\">svg\u003C/span>\u003Cspan class=\"dl\">'\u003C/span>\u003Cspan class=\"p\">,\u003C/span>\n    \u003Cspan class=\"na\">loop\u003C/span>\u003Cspan class=\"p\">:\u003C/span> \u003Cspan class=\"kc\">false\u003C/span>\u003Cspan class=\"p\">,\u003C/span>\n    \u003Cspan class=\"na\">autoplay\u003C/span>\u003Cspan class=\"p\">:\u003C/span> \u003Cspan class=\"kc\">false\u003C/span>\u003Cspan class=\"p\">,\u003C/span>\n    \u003Cspan class=\"na\">animationData\u003C/span>\u003Cspan class=\"p\">:\u003C/span> \u003Cspan class=\"nx\">successData\u003C/span>\u003Cspan class=\"p\">,\u003C/span>\n  \u003Cspan class=\"p\">})\u003C/span>\n\u003Cspan class=\"p\">})\u003C/span>\n\n\u003Cspan class=\"kd\">function\u003C/span> \u003Cspan class=\"nf\">handleSubmit\u003C/span>\u003Cspan class=\"p\">()\u003C/span> \u003Cspan class=\"p\">{\u003C/span>\n  \u003Cspan class=\"nx\">anim\u003C/span>\u003Cspan class=\"p\">?.\u003C/span>\u003Cspan class=\"nf\">goToAndPlay\u003C/span>\u003Cspan class=\"p\">(\u003C/span>\u003Cspan class=\"mi\">0\u003C/span>\u003Cspan class=\"p\">)\u003C/span>\n\u003Cspan class=\"p\">}\u003C/span>\n\n\u003Cspan class=\"nf\">onBeforeUnmount\u003C/span>\u003Cspan class=\"p\">(()\u003C/span> \u003Cspan class=\"o\">=>\u003C/span> \u003Cspan class=\"nx\">anim\u003C/span>\u003Cspan class=\"p\">?.\u003C/span>\u003Cspan class=\"nf\">destroy\u003C/span>\u003Cspan class=\"p\">())\u003C/span>\n\u003Cspan class=\"nt\"></\u003C/span>\u003Cspan class=\"k\">script\u003C/span>\u003Cspan class=\"nt\">>\u003C/span>\n\u003C/code>\u003C/pre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\">\u003Ctitle>Enter fullscreen mode\u003C/title>\n    \u003Cpath d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\">\u003C/path>\n\u003C/svg>\n\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\">\u003Ctitle>Exit fullscreen mode\u003C/title>\n    \u003Cpath d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\">\u003C/path>\n\u003C/svg>\n\n\u003C/div>\n\u003C/div>\n\u003C/div>\n\n\n\n\n\u003Chr>\n\n\u003Ch2>\n  \u003Ca name=\"global-registration-nuxt-large-apps\" href=\"#global-registration-nuxt-large-apps\">\n  \u003C/a>\n  Global Registration (Nuxt / Large Apps)\n\u003C/h2>\n\n\u003Cp>Register once in a plugin so you don't import on every page:\u003Cbr>\n\u003C/p>\n\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight javascript\">\u003Ccode>\u003Cspan class=\"c1\">// plugins/lottie.js\u003C/span>\n\u003Cspan class=\"k\">import\u003C/span> \u003Cspan class=\"p\">{\u003C/span> \u003Cspan class=\"nx\">DotLottieVue\u003C/span> \u003Cspan class=\"p\">}\u003C/span> \u003Cspan class=\"k\">from\u003C/span> \u003Cspan class=\"dl\">'\u003C/span>\u003Cspan class=\"s1\">@lottiefiles/dotlottie-vue\u003C/span>\u003Cspan class=\"dl\">'\u003C/span>\n\n\u003Cspan class=\"k\">export\u003C/span> \u003Cspan class=\"k\">default\u003C/span> \u003Cspan class=\"nf\">defineNuxtPlugin\u003C/span>\u003Cspan class=\"p\">((\u003C/span>\u003Cspan class=\"nx\">nuxtApp\u003C/span>\u003Cspan class=\"p\">)\u003C/span> \u003Cspan class=\"o\">=>\u003C/span> \u003Cspan class=\"p\">{\u003C/span>\n  \u003Cspan class=\"nx\">nuxtApp\u003C/span>\u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nx\">vueApp\u003C/span>\u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nf\">component\u003C/span>\u003Cspan class=\"p\">(\u003C/span>\u003Cspan class=\"dl\">'\u003C/span>\u003Cspan class=\"s1\">DotLottie\u003C/span>\u003Cspan class=\"dl\">'\u003C/span>\u003Cspan class=\"p\">,\u003C/span> \u003Cspan class=\"nx\">DotLottieVue\u003C/span>\u003Cspan class=\"p\">)\u003C/span>\n\u003Cspan class=\"p\">})\u003C/span>\n\u003C/code>\u003C/pre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\">\u003Ctitle>Enter fullscreen mode\u003C/title>\n    \u003Cpath d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\">\u003C/path>\n\u003C/svg>\n\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\">\u003Ctitle>Exit fullscreen mode\u003C/title>\n    \u003Cpath d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\">\u003C/path>\n\u003C/svg>\n\n\u003C/div>\n\u003C/div>\n\u003C/div>\n\n\n\n\u003Cp>Then use \u003Ccode><DotLottie />\u003C/code> anywhere without importing.\u003C/p>\n\n\n\u003Chr>\n\n\u003Ch2>\n  \u003Ca name=\"performance-tips-for-vue\" href=\"#performance-tips-for-vue\">\n  \u003C/a>\n  Performance Tips for Vue\n\u003C/h2>\n\n\u003Cul>\n\u003Cli>\n\u003Cstrong>Lazy-load animation JSON\u003C/strong> outside your main bundle. Use dynamic imports or fetch in \u003Ccode>onMounted\u003C/code>.\u003C/li>\n\u003Cli>\n\u003Cstrong>Use .lottie format\u003C/strong> instead of JSON — ~80% smaller file size, loads faster.\u003C/li>\n\u003Cli>\n\u003Cstrong>Add \u003Ccode>v-if\u003C/code>\u003C/strong> to mount/unmount the animation based on visibility, rather than hiding with CSS.\u003C/li>\n\u003Cli>\n\u003Cstrong>Set explicit dimensions\u003C/strong> on the container div — avoids layout shifts during load.\u003C/li>\n\u003C/ul>\n\n\n\u003Chr>\n\n\u003Ch2>\n  \u003Ca name=\"free-lottie-animations-for-your-vue-app\" href=\"#free-lottie-animations-for-your-vue-app\">\n  \u003C/a>\n  Free Lottie Animations for Your Vue App\n\u003C/h2>\n\n\u003Cp>You need a Lottie file to get started. Here are the best free sources:\u003C/p>\n\n\u003Cul>\n\u003Cli>\n\u003Cstrong>500+ free animated icons:\u003C/strong> \u003Ca href=\"https://www.iconking.net/all-assets?type=lottie&price=free\" target=\"_blank\" rel=\"noopener noreferrer\">iconking.net/all-assets?type=lottie&price=free\u003C/a> — UI icons, loaders, social icons, illustrations\u003C/li>\n\u003Cli>\n\u003Cstrong>Preview before using:\u003C/strong> \u003Ca href=\"https://www.iconking.net/preview\" target=\"_blank\" rel=\"noopener noreferrer\">iconking.net/preview\u003C/a> — drag-and-drop preview, no signup\u003C/li>\n\u003Cli>\n\u003Cstrong>Customize colors/speed:\u003C/strong> \u003Ca href=\"https://www.iconking.net/editor\" target=\"_blank\" rel=\"noopener noreferrer\">iconking.net/editor\u003C/a> — adapt any Lottie to your brand in-browser\u003C/li>\n\u003Cli>\n\u003Cstrong>LottieFiles community:\u003C/strong> \u003Ca href=\"https://lottiefiles.com\" target=\"_blank\" rel=\"noopener noreferrer\">lottiefiles.com\u003C/a> — large community library\u003C/li>\n\u003C/ul>\n\n\n\u003Chr>\n\n\u003Ch2>\n  \u003Ca name=\"converting-lottie-for-nonapp-contexts\" href=\"#converting-lottie-for-nonapp-contexts\">\n  \u003C/a>\n  Converting Lottie for Non-App Contexts\n\u003C/h2>\n\n\u003Cp>Need the same animation as a GIF for email, or MP4 for social? The free converter at \u003Ca href=\"https://www.iconking.net/tools/lottie-to-gif\" target=\"_blank\" rel=\"noopener noreferrer\">iconking.net/tools/lottie-to-gif\u003C/a> exports to GIF, MP4, WebM, SVG, WebP, APNG, or .lottie — all in the browser.\u003C/p>\n\n","---\ntitle: How to Add Lottie Animations to Vue.js (2025 Guide)\npublished: true\ndescription: Complete guide to using Lottie animations in Vue 3 with @lottiefiles/dotlottie-vue and lottie-web. Includes free animation sources and editor tools.\ntags: vue, javascript, animation, frontend\n---\n\nLottie animations are the best way to add crisp, lightweight animations to your Vue app. This guide covers the two main approaches in Vue 3.\n\n## Option 1: @lottiefiles/dotlottie-vue (Recommended)\n\nThe DotLottie package is the modern approach — smaller runtime (~100KB vs ~500KB), supports the newer compressed .lottie format, and has a clean Vue 3 API.\n\n```bash\nnpm install @lottiefiles/dotlottie-vue\n```\n\n```vue\n\u003Ctemplate>\n  \u003CDotLottieVue\n    src=\"/animations/loader.lottie\"\n    :loop=\"true\"\n    :autoplay=\"true\"\n    style=\"width: 200px; height: 200px\"\n  />\n\u003C/template>\n\n\u003Cscript setup>\nimport { DotLottieVue } from '@lottiefiles/dotlottie-vue'\n\u003C/script>\n```\n\nFor JSON files (not .lottie), use the same `src` prop pointing to your .json file.\n\n### Controlling Playback Programmatically\n\n```vue\n\u003Ctemplate>\n  \u003CDotLottieVue\n    ref=\"lottieRef\"\n    src=\"/animations/check.lottie\"\n    :loop=\"false\"\n    :autoplay=\"false\"\n  />\n  \u003Cbutton @click=\"play\">Play\u003C/button>\n  \u003Cbutton @click=\"pause\">Pause\u003C/button>\n\u003C/template>\n\n\u003Cscript setup>\nimport { ref } from 'vue'\nimport { DotLottieVue } from '@lottiefiles/dotlottie-vue'\n\nconst lottieRef = ref(null)\n\nfunction play() {\n  lottieRef.value?.play()\n}\nfunction pause() {\n  lottieRef.value?.pause()\n}\n\u003C/script>\n```\n\n---\n\n## Option 2: lottie-web (Full Control)\n\nFor more granular control over frames, segments, and events:\n\n```bash\nnpm install lottie-web\n```\n\n```vue\n\u003Ctemplate>\n  \u003Cdiv ref=\"container\" style=\"width: 200px; height: 200px\" />\n\u003C/template>\n\n\u003Cscript setup>\nimport { ref, onMounted, onBeforeUnmount } from 'vue'\nimport lottie from 'lottie-web'\n\nconst container = ref(null)\nlet anim = null\n\nonMounted(() => {\n  anim = lottie.loadAnimation({\n    container: container.value,\n    renderer: 'svg',\n    loop: true,\n    autoplay: true,\n    path: '/animations/loader.json',\n  })\n})\n\nonBeforeUnmount(() => {\n  anim?.destroy()\n})\n\u003C/script>\n```\n\n**Always destroy the animation in `onBeforeUnmount`** to prevent memory leaks.\n\n---\n\n## Trigger Animation on User Interaction\n\nA common pattern: play a success animation when a form submits.\n\n```vue\n\u003Ctemplate>\n  \u003Cdiv ref=\"container\" style=\"width: 100px; height: 100px\" />\n  \u003Cbutton @click=\"handleSubmit\">Submit\u003C/button>\n\u003C/template>\n\n\u003Cscript setup>\nimport { ref, onMounted, onBeforeUnmount } from 'vue'\nimport lottie from 'lottie-web'\nimport successData from '@/assets/success.json'\n\nconst container = ref(null)\nlet anim = null\n\nonMounted(() => {\n  anim = lottie.loadAnimation({\n    container: container.value,\n    renderer: 'svg',\n    loop: false,\n    autoplay: false,\n    animationData: successData,\n  })\n})\n\nfunction handleSubmit() {\n  anim?.goToAndPlay(0)\n}\n\nonBeforeUnmount(() => anim?.destroy())\n\u003C/script>\n```\n\n---\n\n## Global Registration (Nuxt / Large Apps)\n\nRegister once in a plugin so you don't import on every page:\n\n```js\n// plugins/lottie.js\nimport { DotLottieVue } from '@lottiefiles/dotlottie-vue'\n\nexport default defineNuxtPlugin((nuxtApp) => {\n  nuxtApp.vueApp.component('DotLottie', DotLottieVue)\n})\n```\n\nThen use `\u003CDotLottie />` anywhere without importing.\n\n---\n\n## Performance Tips for Vue\n\n- **Lazy-load animation JSON** outside your main bundle. Use dynamic imports or fetch in `onMounted`.\n- **Use .lottie format** instead of JSON — ~80% smaller file size, loads faster.\n- **Add `v-if`** to mount/unmount the animation based on visibility, rather than hiding with CSS.\n- **Set explicit dimensions** on the container div — avoids layout shifts during load.\n\n---\n\n## Free Lottie Animations for Your Vue App\n\nYou need a Lottie file to get started. Here are the best free sources:\n\n- **500+ free animated icons:** [iconking.net/all-assets?type=lottie&price=free](https://www.iconking.net/all-assets?type=lottie&price=free) — UI icons, loaders, social icons, illustrations\n- **Preview before using:** [iconking.net/preview](https://www.iconking.net/preview) — drag-and-drop preview, no signup\n- **Customize colors/speed:** [iconking.net/editor](https://www.iconking.net/editor) — adapt any Lottie to your brand in-browser\n- **LottieFiles community:** [lottiefiles.com](https://lottiefiles.com) — large community library\n\n---\n\n## Converting Lottie for Non-App Contexts\n\nNeed the same animation as a GIF for email, or MP4 for social? The free converter at [iconking.net/tools/lottie-to-gif](https://www.iconking.net/tools/lottie-to-gif) exports to GIF, MP4, WebM, SVG, WebP, APNG, or .lottie — all in the browser.",{"name":28,"username":29,"twitter_username":14,"github_username":14,"user_id":30,"website_url":14,"profile_image":31,"profile_image_90":32},"Fazal Shah","fazalshah",3960654,"https://media2.dev.to/dynamic/image/width=640,height=640,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3960654%2Fca47714f-7710-4ff6-89e9-f38ac38213ff.jpg","https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3960654%2Fca47714f-7710-4ff6-89e9-f38ac38213ff.jpg",1780372426562]