[{"data":1,"prerenderedAt":351},["ShallowReactive",2],{"content-query-p2jvGpC4Jz":3},[4,208],{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":9,"description":10,"image":11,"body":12,"_type":202,"_id":203,"_source":204,"_file":205,"_stem":206,"_extension":207},"\u002Fprojects\u002Fvue3-autocounter","projects",false,"","Vue3 Autocounter","A lightweight and open-source Vue 3 component for smooth, animated counting. Effortlessly display auto-updating numbers with custom durations—perfect for counting up or down in any app!","vue3-autocounter-demo.png",{"type":13,"children":14,"toc":196},"root",[15,30,50,79,108,115,120,126,131,144,150,155,166,171,180,185],{"type":16,"tag":17,"props":18,"children":20},"element","p",{"align":19},"center",[21,24],{"type":22,"value":23},"text","\n  ",{"type":16,"tag":25,"props":26,"children":29},"img",{"src":27,"width":28},"\u002Fimages\u002Fvue3autocounter-logo.png",500,[],{"type":16,"tag":17,"props":31,"children":32},{"align":19},[33,34,42,44],{"type":22,"value":23},{"type":16,"tag":35,"props":36,"children":39},"a",{"href":37,"target":38},"https:\u002F\u002Fvue3autocounter.cristopherps.dev\u002F","_blank",[40],{"type":22,"value":41},"\n    View Demo\n  ",{"type":22,"value":43}," | ",{"type":16,"tag":35,"props":45,"children":47},{"href":46,"target":38},"https:\u002F\u002Fvue3autocounter.cristopherps.dev\u002Fdocs",[48],{"type":22,"value":49}," \n    Full Docs \n  ",{"type":16,"tag":17,"props":51,"children":57},{"align":19,"className":52},[53,54,55,56],"grid","grid-flow-col","place-content-center","gap-2",[58,59,63,65,69,70,74,75],{"type":22,"value":23},{"type":16,"tag":25,"props":60,"children":62},{"src":61},"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FJavaScript-F7DF1E?style=for-the-badge&logo=javascript&logoColor=black",[],{"type":22,"value":64}," \n  ",{"type":16,"tag":25,"props":66,"children":68},{"src":67},"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FTypeScript-007ACC?style=for-the-badge&logo=typescript&logoColor=white",[],{"type":22,"value":23},{"type":16,"tag":25,"props":71,"children":73},{"src":72},"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FVue.js-35495E?style=for-the-badge&logo=vue.js&logoColor=4FC08D",[],{"type":22,"value":23},{"type":16,"tag":25,"props":76,"children":78},{"src":77},"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fnpm-CB3837?style=for-the-badge&logo=npm&logoColor=white",[],{"type":16,"tag":17,"props":80,"children":82},{"align":19,"className":81},[53,54,55,56],[83,84,88,89,93,94,98,99,103,104],{"type":22,"value":23},{"type":16,"tag":25,"props":85,"children":87},{"src":86},"https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdt\u002Fvue3-autocounter?style=for-the-badge",[],{"type":22,"value":23},{"type":16,"tag":25,"props":90,"children":92},{"src":91},"https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002Fvue3-autocounter?style=for-the-badge",[],{"type":22,"value":23},{"type":16,"tag":25,"props":95,"children":97},{"src":96},"https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Flicense\u002Fps-cristopher\u002Fvue3-autocounter?style=for-the-badge",[],{"type":22,"value":23},{"type":16,"tag":25,"props":100,"children":102},{"src":101},"https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Flanguages\u002Ftop\u002Fps-cristopher\u002Fvue3-autocounter?style=for-the-badge",[],{"type":22,"value":23},{"type":16,"tag":25,"props":105,"children":107},{"src":106},"https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fstars\u002Fps-cristopher\u002Fvue3-autocounter?style=for-the-badge",[],{"type":16,"tag":109,"props":110,"children":112},"h2",{"id":111},"description",[113],{"type":22,"value":114},"Description",{"type":16,"tag":17,"props":116,"children":117},{},[118],{"type":22,"value":119},"A lightweight Vue 3 component made with TypeScript, you can use it to create an animation that shows an automatic count for any quantity with a specified duration, it can be used for counting up and down.",{"type":16,"tag":109,"props":121,"children":123},{"id":122},"installation",[124],{"type":22,"value":125},"Installation",{"type":16,"tag":17,"props":127,"children":128},{},[129],{"type":22,"value":130},"You can install it easily with NPM.",{"type":16,"tag":132,"props":133,"children":138},"pre",{"className":134,"code":136,"language":137,"meta":8},[135],"language-sh","npm install vue3-autocounter\n","sh",[139],{"type":16,"tag":140,"props":141,"children":142},"code",{"__ignoreMap":8},[143],{"type":22,"value":136},{"type":16,"tag":109,"props":145,"children":147},{"id":146},"usage",[148],{"type":22,"value":149},"Usage",{"type":16,"tag":17,"props":151,"children":152},{},[153],{"type":22,"value":154},"Add the vue3-autocounter to your main.js for a global import:",{"type":16,"tag":132,"props":156,"children":161},{"className":157,"code":159,"language":160,"meta":8},[158],"language-javascript","import { createApp } from 'vue';\nimport Vue3Autocounter from 'vue3-autocounter';\nimport App from '.\u002FApp.vue';\n\ncreateApp(App)\n.component('vue3-autocounter', Vue3Autocounter)\n.mount('#app'); \n","javascript",[162],{"type":16,"tag":140,"props":163,"children":164},{"__ignoreMap":8},[165],{"type":22,"value":159},{"type":16,"tag":17,"props":167,"children":168},{},[169],{"type":22,"value":170},"If you prefer yo can import it directly in your Single File Component:",{"type":16,"tag":132,"props":172,"children":175},{"className":173,"code":174,"language":160,"meta":8},[158],"import { defineComponent } from 'vue';\nimport Vue3autocounter from 'vue3-autocounter';\n\nexport default defineComponent({\n  name: 'Demo',\n  components: {\n    'vue3-autocounter': Vue3autocounter\n  }\n});   \n",[176],{"type":16,"tag":140,"props":177,"children":178},{"__ignoreMap":8},[179],{"type":22,"value":174},{"type":16,"tag":17,"props":181,"children":182},{},[183],{"type":22,"value":184},"Finally you can use it on your template:",{"type":16,"tag":132,"props":186,"children":191},{"className":187,"code":189,"language":190,"meta":8},[188],"language-html","\u003Ctemplate>\n  \u003Cvue3-autocounter ref='counter' :startAmount='0' :endAmount='2021' :duration='3' prefix='$' suffix='USD' separator=',' decimalSeparator='.' :decimals='2' :autoinit='true' @finished='alert(`Counting finished!`)'\u002F>\n\u003C\u002Ftemplate>\n","html",[192],{"type":16,"tag":140,"props":193,"children":194},{"__ignoreMap":8},[195],{"type":22,"value":189},{"title":8,"searchDepth":197,"depth":197,"links":198},2,[199,200,201],{"id":111,"depth":197,"text":114},{"id":122,"depth":197,"text":125},{"id":146,"depth":197,"text":149},"markdown","content:projects:vue3-autocounter.md","content","projects\u002Fvue3-autocounter.md","projects\u002Fvue3-autocounter","md",{"_path":209,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":210,"description":211,"image":212,"body":213,"_type":202,"_id":348,"_source":204,"_file":349,"_stem":350,"_extension":207},"\u002Fprojects\u002Fvue3-todo-app","Vue3 ToDo App Demo","A simple To-Do application built with Vue.js that allows users to create, manage, and organize their daily tasks. Tasks can be marked as completed, moved back to the to-do list, or removed, providing an easy way to track progress and stay organized","vue3-todo-app-demo.png",{"type":13,"children":214,"toc":343},[215,222,235,255,279,283,287,291,295,303,307,311,319,323,331,335],{"type":16,"tag":17,"props":216,"children":217},{"align":19},[218,219],{"type":22,"value":23},{"type":16,"tag":25,"props":220,"children":221},{"src":27,"width":28},[],{"type":16,"tag":17,"props":223,"children":224},{"align":19},[225,226,230,231],{"type":22,"value":23},{"type":16,"tag":35,"props":227,"children":228},{"href":37,"target":38},[229],{"type":22,"value":41},{"type":22,"value":43},{"type":16,"tag":35,"props":232,"children":233},{"href":46,"target":38},[234],{"type":22,"value":49},{"type":16,"tag":17,"props":236,"children":238},{"align":19,"className":237},[53,54,55,56],[239,240,243,244,247,248,251,252],{"type":22,"value":23},{"type":16,"tag":25,"props":241,"children":242},{"src":61},[],{"type":22,"value":64},{"type":16,"tag":25,"props":245,"children":246},{"src":67},[],{"type":22,"value":23},{"type":16,"tag":25,"props":249,"children":250},{"src":72},[],{"type":22,"value":23},{"type":16,"tag":25,"props":253,"children":254},{"src":77},[],{"type":16,"tag":17,"props":256,"children":258},{"align":19,"className":257},[53,54,55,56],[259,260,263,264,267,268,271,272,275,276],{"type":22,"value":23},{"type":16,"tag":25,"props":261,"children":262},{"src":86},[],{"type":22,"value":23},{"type":16,"tag":25,"props":265,"children":266},{"src":91},[],{"type":22,"value":23},{"type":16,"tag":25,"props":269,"children":270},{"src":96},[],{"type":22,"value":23},{"type":16,"tag":25,"props":273,"children":274},{"src":101},[],{"type":22,"value":23},{"type":16,"tag":25,"props":277,"children":278},{"src":106},[],{"type":16,"tag":109,"props":280,"children":281},{"id":111},[282],{"type":22,"value":114},{"type":16,"tag":17,"props":284,"children":285},{},[286],{"type":22,"value":119},{"type":16,"tag":109,"props":288,"children":289},{"id":122},[290],{"type":22,"value":125},{"type":16,"tag":17,"props":292,"children":293},{},[294],{"type":22,"value":130},{"type":16,"tag":132,"props":296,"children":298},{"className":297,"code":136,"language":137,"meta":8},[135],[299],{"type":16,"tag":140,"props":300,"children":301},{"__ignoreMap":8},[302],{"type":22,"value":136},{"type":16,"tag":109,"props":304,"children":305},{"id":146},[306],{"type":22,"value":149},{"type":16,"tag":17,"props":308,"children":309},{},[310],{"type":22,"value":154},{"type":16,"tag":132,"props":312,"children":314},{"className":313,"code":159,"language":160,"meta":8},[158],[315],{"type":16,"tag":140,"props":316,"children":317},{"__ignoreMap":8},[318],{"type":22,"value":159},{"type":16,"tag":17,"props":320,"children":321},{},[322],{"type":22,"value":170},{"type":16,"tag":132,"props":324,"children":326},{"className":325,"code":174,"language":160,"meta":8},[158],[327],{"type":16,"tag":140,"props":328,"children":329},{"__ignoreMap":8},[330],{"type":22,"value":174},{"type":16,"tag":17,"props":332,"children":333},{},[334],{"type":22,"value":184},{"type":16,"tag":132,"props":336,"children":338},{"className":337,"code":189,"language":190,"meta":8},[188],[339],{"type":16,"tag":140,"props":340,"children":341},{"__ignoreMap":8},[342],{"type":22,"value":189},{"title":8,"searchDepth":197,"depth":197,"links":344},[345,346,347],{"id":111,"depth":197,"text":114},{"id":122,"depth":197,"text":125},{"id":146,"depth":197,"text":149},"content:projects:vue3-todo-app.md","projects\u002Fvue3-todo-app.md","projects\u002Fvue3-todo-app",1792192086887]