[{"data":1,"prerenderedAt":285},["ShallowReactive",2],{"\u002Fblog\u002Fbuild-with-ben-24-overview":3,"\u002Fblog\u002Fbuild-with-ben-24-overview-neighbours":255},{"id":4,"title":5,"body":6,"date":241,"description":242,"extension":243,"meta":244,"navigation":245,"path":246,"seo":247,"sitemap":248,"stem":249,"tags":250,"updatedAt":253,"__hash__":254},"blog\u002Fblog\u002Fbuild-with-ben-24-overview.md","Build with Ben (#25) - Trello Clone with Nuxt 3 (Beta) (Part 2) Overview",{"type":7,"value":8,"toc":232},"minimark",[9,14,19,31,35,38,130,134,154,158,161,217,221,224],[10,11],"youtube",{"id":12,"title":13},"dAGhttffPB8","Build with Ben (#24): Trello MVP with Nuxt 3 Beta (Part 2)",[15,16,18],"h2",{"id":17},"introduction","👋 Introduction",[20,21,22,23,30],"p",{},"This week's Build with Ben is a continuation of the ",[24,25,29],"a",{"href":26,"rel":27},"https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=jG9AamyzRuw",[28],"nofollow","Build with Ben (#20): Trello Clone with Nuxt 3 (Beta) (Part 1)",", where we pick up and continue building a Trello clone!",[15,32,34],{"id":33},"outline","📋 Outline",[20,36,37],{},"For this session, here's what you can expect to learn about with the respective timestamps in the video:",[39,40,41,50,58,66,74,82,90,98,106,114,122],"ul",{},[42,43,44,49],"li",{},[24,45,48],{"href":46,"rel":47},"https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=dAGhttffPB8&t=0s",[28],"00:00:00"," - Introduction",[42,51,52,57],{},[24,53,56],{"href":54,"rel":55},"https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=dAGhttffPB8&t=63s",[28],"00:01:03"," - Background on the App",[42,59,60,65],{},[24,61,64],{"href":62,"rel":63},"https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=dAGhttffPB8&t=283s",[28],"00:04:43"," - What is tig?",[42,67,68,73],{},[24,69,72],{"href":70,"rel":71},"https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=dAGhttffPB8&t=522s",[28],"00:08:42"," - Cleaning Up the UI a Bit",[42,75,76,81],{},[24,77,80],{"href":78,"rel":79},"https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=dAGhttffPB8&t=1320s",[28],"00:22:00"," - Adding ability to move cards between columns",[42,83,84,89],{},[24,85,88],{"href":86,"rel":87},"https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=dAGhttffPB8&t=2390s",[28],"00:39:50"," - When does it make sense to use a global CSS file?",[42,91,92,97],{},[24,93,96],{"href":94,"rel":95},"https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=dAGhttffPB8&t=2610s",[28],"00:43:30"," - Continuing Work on BaseCard Component",[42,99,100,105],{},[24,101,104],{"href":102,"rel":103},"https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=dAGhttffPB8&t=2707s",[28],"00:45:07"," - Add ability to migrate cards from column to column",[42,107,108,113],{},[24,109,112],{"href":110,"rel":111},"https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=dAGhttffPB8&t=3503s",[28],"00:58:23"," - Exploring Drag and Drop Functionality with Vue Draggable",[42,115,116,121],{},[24,117,120],{"href":118,"rel":119},"https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=dAGhttffPB8&t=3818s",[28],"01:03:38"," - Hacking Together a MVP Drag and Drop",[42,123,124,129],{},[24,125,128],{"href":126,"rel":127},"https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=dAGhttffPB8&t=4838s",[28],"01:20:38"," - Final Thoughts",[15,131,133],{"id":132},"highlights","⭐ Highlights",[135,136,137,145],"ol",{},[42,138,139,144],{},[24,140,143],{"href":141,"rel":142},"https:\u002F\u002Fjonas.github.io\u002Ftig\u002F",[28],"Tig"," is one of my favorite tools for enhancing the git CLI experience. Highly recommended!",[42,146,147,148,153],{},"Vue Draggable ended up being a wash as far as being able to get up and running quickly, but we were able to utilize ",[24,149,152],{"href":150,"rel":151},"https:\u002F\u002Fvueuse.org\u002Fcore\u002FuseDraggable\u002F",[28],"VueUse's useDraggable"," to make a very rudimentary prototype. Keyword: rudimentary. 😅",[15,155,157],{"id":156},"resources","📚 Resources",[20,159,160],{},"Here are all the resources mentioned in the video:",[39,162,163,170,177,184,191,197,204,210],{},[42,164,165],{},[24,166,169],{"href":167,"rel":168},"https:\u002F\u002Fgithub.com\u002Fbencodezen\u002Fnuxt-3-trello-mvp",[28],"GitHub Repo",[42,171,172],{},[24,173,176],{"href":174,"rel":175},"https:\u002F\u002Fv3.nuxtjs.org\u002F",[28],"Nuxt 3",[42,178,179],{},[24,180,183],{"href":181,"rel":182},"https:\u002F\u002Ftrello.com\u002F",[28],"Trello",[42,185,186],{},[24,187,190],{"href":188,"rel":189},"https:\u002F\u002Fgithub.com\u002FSortableJS\u002FVue.Draggable",[28],"Vue Draggable",[42,192,193],{},[24,194,196],{"href":150,"rel":195},[28],"VueUse (useDraggable)",[42,198,199],{},[24,200,203],{"href":201,"rel":202},"https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=2yMlzQsH6F8",[28],"Build with Ben (#23): VueUse + Vue 3",[42,205,206],{},[24,207,209],{"href":141,"rel":208},[28],"Tig CLI Tool",[42,211,212],{},[24,213,216],{"href":214,"rel":215},"https:\u002F\u002Fwww.learnwithjason.dev\u002Fbuild-a-no-framework-javascript-drag-n-drop",[28],"Learn with Jason - Build Your Own Drag and Drop",[15,218,220],{"id":219},"final-thoughts","🤔 Final Thoughts",[20,222,223],{},"For my one major takeaway from this experience, when things don't work, bring it down another level to find a path forward. The reason this is critical is because this means you'll make progress, which often yields opportunities for growth and learning. So while my drag and drop is 99.999% far from production ready, it was still a lot of fun!",[20,225,226,227,231],{},"And if you'd like to attend live for Build with Ben, be sure to check out the schedule here at ",[24,228,230],{"href":229},"\u002Fschedule","bencodezen.io\u002Fschedule",". Thanks for reading!",{"title":233,"searchDepth":234,"depth":234,"links":235},"",2,[236,237,238,239,240],{"id":17,"depth":234,"text":18},{"id":33,"depth":234,"text":34},{"id":132,"depth":234,"text":133},{"id":156,"depth":234,"text":157},{"id":219,"depth":234,"text":220},"2022-01-17T10:00:00-05:00","It's time to continue our journey of building a Trello clone with Nuxt 3 beta!","md",{},true,"\u002Fblog\u002Fbuild-with-ben-24-overview",{"title":5,"description":242},{"loc":246,"lastmod":241},"blog\u002Fbuild-with-ben-24-overview",[251,252],"videos","vue",null,"ymh0WiolalsWbkYtAw0V6iVyCsYFqJyKoZtRukyLi10",{"newer":256,"older":262,"related":268},{"title":257,"path":258,"tags":259,"date":261},"The Battle of Personas","\u002Fblog\u002Fthe-battle-of-personas",[260],"mindset","2022-01-28T16:00:00-05:00",{"title":263,"path":264,"tags":265,"date":267},"YAGNI For Now","\u002Fblog\u002Fyagni-for-now",[266],"development","2022-01-14T17:54:02-05:00",[269,274,280],{"title":270,"path":271,"tags":272,"date":273},"Build with Ben (#23) - VueUse + Vue 3 Overview","\u002Fblog\u002Fbuild-with-ben-23-overview",[251,252],"2022-01-11T11:00:00-05:00",{"title":275,"path":276,"tags":277,"date":279},"VueConfUS 2026 Recap","\u002Fblog\u002Fvueconfus-2026-recap",[278,252],"events","2026-06-24T02:48:45-04:00",{"title":281,"path":282,"tags":283,"date":284},"Stop forgetting to trigger workflows in Vue","\u002Fblog\u002Fstop-forgetting-to-trigger-workflows-in-vue",[252,266],"2025-12-02T17:06:20-05:00",1794323137303]