[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"navigation":3,"url-settings":86,"blog-\u002Fblog\u002Fthe-modern-guide-to-vue-components":671,"blog-author-\u002Fblog\u002Fthe-modern-guide-to-vue-components":1141,"i-material-symbols:arrow-back-rounded":1160},{"id":4,"extension":5,"footer":6,"header":73,"meta":83,"stem":84,"__hash__":85},"navigation\u002Fdata\u002Fshared\u002Fnavigation.yml","yml",{"brand":7,"columns":13,"legal":63},{"name":8,"tagline":9,"downloadCta":10},"Pieces","The memory layer for modern work.",{"label":11,"href":12},"All downloads","\u002Fdownloads",[14,26,39,51],{"title":15,"links":16},"Product",[17,20,23],{"label":18,"href":19},"Pieces Desktop","\u002F",{"label":21,"href":22},"Pieces Enterprise","\u002Fenterprise",{"label":24,"href":25},"Pieces MCP","\u002Fmcp",{"title":27,"links":28},"Resources",[29,33,36],{"label":30,"href":31,"external":32},"Documentation","url:docs.home",true,{"label":34,"href":35},"Blog","\u002Fblog",{"label":37,"href":38,"external":32},"GitHub","url:github.org",{"title":40,"links":41},"Community",[42,45,48],{"label":43,"href":44,"external":32},"Discord","url:social.discord",{"label":46,"href":47,"external":32},"X \u002F Twitter","url:social.x",{"label":49,"href":50,"external":32},"LinkedIn","url:social.linkedin",{"title":52,"links":53},"Company",[54,57,60],{"label":55,"href":56},"About","\u002Fabout",{"label":58,"href":59},"Updates","\u002Fupdates",{"label":61,"href":62},"Contact","\u002Fcontact",[64,67,70],{"label":65,"href":66},"Privacy Policy","\u002Flegal\u002Fprivacy",{"label":68,"href":69},"Refund Policy","\u002Flegal\u002Frefund",{"label":71,"href":72},"Terms of Service","\u002Flegal\u002Fterms",{"links":74,"signIn":75,"contact":78,"cta":80},[],{"label":76,"href":77},"Manage account","url:portal.home",{"label":79,"href":62},"Get in touch",{"label":81,"href":82},"Download","url:routes.downloads",{},"data\u002Fshared\u002Fnavigation","XlSALC7vYCXHcmcXnjJViwIZKsqnQWF4bn4o9RrcSBE",{"id":87,"extension":5,"links":88,"meta":668,"stem":669,"__hash__":670},"urlSettings\u002Fdata\u002Fshared\u002Furls.yml",[89,93,97,101,105,109,113,117,121,125,129,133,137,141,145,149,153,157,161,165,169,173,177,181,185,189,192,196,200,204,208,212,216,220,224,228,232,236,240,244,248,252,256,260,264,268,272,276,280,284,288,292,296,300,303,307,311,314,318,322,326,330,334,338,342,346,350,354,358,362,366,370,374,378,382,386,390,394,398,402,406,410,414,418,422,426,430,434,438,442,446,450,454,458,461,465,469,473,477,481,485,488,491,494,497,501,505,508,512,516,520,524,528,532,536,540,544,548,552,556,559,563,567,571,575,579,582,585,588,592,595,599,603,607,611,614,618,622,625,628,631,635,639,643,646,649,652,656,660,664],{"key":90,"label":91,"href":92},"downloads.desktop","Desktop download page","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fdownload",{"key":94,"label":95,"href":96},"downloads.macOS.dmgArm64","macOS DMG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fdmg-arm64\u002Fdownload",{"key":98,"label":99,"href":100},"downloads.macOS.dmgIntel","macOS DMG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fdmg\u002Fdownload",{"key":102,"label":103,"href":104},"downloads.macOS.pkg","macOS PKG","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg\u002Fdownload",{"key":106,"label":107,"href":108},"downloads.macOS.universal","Desktop macOS Universal","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fmacos-universal\u002Fdownload",{"key":110,"label":111,"href":112},"downloads.macOS.pkgArm64","Desktop macOS PKG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pfd-arm64\u002Fdownload",{"key":114,"label":115,"href":116},"downloads.macOS.pkgIntel","Desktop macOS PKG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pfd\u002Fdownload",{"key":118,"label":119,"href":120},"downloads.windows.appinstaller","Windows App Installer","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fappinstaller\u002Fpieces_for_x.appinstaller",{"key":122,"label":123,"href":124},"downloads.windows.exe","Windows EXE","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fwindows-exe\u002Fdownload",{"key":126,"label":127,"href":128},"downloads.windows.msix","Windows MSIX","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fwindows-msix\u002Fdownload",{"key":130,"label":131,"href":132},"downloads.windows.suiteManager","Windows Suite Manager","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_suite_windows\u002Fappinstaller\u002Fdownload",{"key":134,"label":135,"href":136},"downloads.linux.flatpakRepo","Linux Flatpak repository","https:\u002F\u002Fbuilds.pieces.app\u002Fpieces-flatpak-repo\u002Fpieces-flatpak.flatpakrepo",{"key":138,"label":139,"href":140},"downloads.linux.snapDesktop","Linux Snap Desktop","https:\u002F\u002Fsnapcraft.io\u002Fpieces-for-developers",{"key":142,"label":143,"href":144},"downloads.linux.snapPiecesOS","Linux Snap PiecesOS","https:\u002F\u002Fsnapcraft.io\u002Fpieces-os",{"key":146,"label":147,"href":148},"downloads.linux.snap","Desktop Linux Snap package","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fsnap\u002Fdownload",{"key":150,"label":151,"href":152},"downloads.piecesOS.macOS.dmgArm64","PiecesOS macOS DMG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fdmg-arm64\u002Fdownload",{"key":154,"label":155,"href":156},"downloads.piecesOS.macOS.dmgIntel","PiecesOS macOS DMG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fdmg\u002Fdownload",{"key":158,"label":159,"href":160},"downloads.piecesOS.macOS.universal","PiecesOS macOS Universal","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fmacos-universal\u002Fdownload",{"key":162,"label":163,"href":164},"downloads.piecesOS.macOS.pkgArm64","PiecesOS macOS PKG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pos-launch-only-arm64\u002Fdownload",{"key":166,"label":167,"href":168},"downloads.piecesOS.macOS.pkgIntel","PiecesOS macOS PKG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pos-launch-only\u002Fdownload",{"key":170,"label":171,"href":172},"downloads.piecesOS.windows.appinstaller","PiecesOS Windows App Installer","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fappinstaller\u002Fos_server.appinstaller",{"key":174,"label":175,"href":176},"downloads.piecesOS.windows.exe","PiecesOS Windows EXE","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fwindows-exe\u002Fdownload",{"key":178,"label":179,"href":180},"downloads.piecesOS.windows.msix","PiecesOS Windows MSIX","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fwindows-msix\u002Fdownload",{"key":182,"label":183,"href":184},"downloads.piecesOS.linux.snap","PiecesOS Linux Snap package","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fsnap\u002Fdownload",{"key":186,"label":187,"href":188},"downloads.combined.macOS.appleSilicon","Combined macOS installer Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-arm64\u002Fdownload",{"key":190,"label":191,"href":104},"downloads.combined.macOS.intel","Combined macOS installer Intel",{"key":193,"label":194,"href":195},"downloads.guides.macOS","macOS installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Fmacos-installation-guide",{"key":197,"label":198,"href":199},"downloads.guides.windows","Windows installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Fwindows-installation-guide",{"key":201,"label":202,"href":203},"downloads.guides.linux","Linux installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Flinux-installation-guide",{"key":205,"label":206,"href":207},"downloads.guides.linuxFlatpak","Linux Flatpak installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Flinux-installation-guide\u002Fflatpak",{"key":209,"label":210,"href":211},"downloads.guides.linuxSnap","Linux Snap installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Flinux-installation-guide\u002Fsnap",{"key":213,"label":214,"href":215},"downloads.guides.piecesOS","PiecesOS manual installation","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os\u002Fmanual-installation",{"key":217,"label":218,"href":219},"extensions.chrome","Chrome extension","https:\u002F\u002Fchrome.google.com\u002Fwebstore\u002Fdetail\u002Fpieces-save-code-snippets\u002Figbgibhbfonhmjlechmeefimncpekepm",{"key":221,"label":222,"href":223},"extensions.firefox","Firefox add-on","https:\u002F\u002Faddons.mozilla.org\u002Fen-US\u002Ffirefox\u002Faddon\u002Fpieces-save-code-from-the-web\u002F",{"key":225,"label":226,"href":227},"extensions.edge","Edge add-on","https:\u002F\u002Fmicrosoftedge.microsoft.com\u002Faddons\u002Fdetail\u002Fpieces-save-code-snippet\u002Fhglfimcdgonaeeobjckfdabcldfidmim",{"key":229,"label":230,"href":231},"extensions.vscode","VS Code extension","https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=MeshIntelligentTechnologiesInc.pieces-vscode",{"key":233,"label":234,"href":235},"extensions.visualStudio","Visual Studio extension","https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=MeshIntelligentTechnologiesInc.PiecesVisualStudio",{"key":237,"label":238,"href":239},"extensions.jetbrains","JetBrains plugin","https:\u002F\u002Fplugins.jetbrains.com\u002Fplugin\u002F17328-pieces--save-search-share--reuse-code-snippets",{"key":241,"label":242,"href":243},"extensions.obsidian","Obsidian plugin","https:\u002F\u002Fobsidian.md\u002Fplugins?id=pieces-for-developers",{"key":245,"label":246,"href":247},"extensions.sublime","Sublime package","https:\u002F\u002Fpackagecontrol.io\u002Fpackages\u002FPieces",{"key":249,"label":250,"href":251},"extensions.neovim","Neovim plugin","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fplugin_neo_vim",{"key":253,"label":254,"href":255},"extensions.jupyterlab","JupyterLab plugin","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fjupyterlab-pieces",{"key":257,"label":258,"href":259},"extensions.cli","Pieces CLI","https:\u002F\u002Fpypi.org\u002Fproject\u002Fpieces-cli\u002F",{"key":261,"label":262,"href":263},"docs.home","Documentation home","https:\u002F\u002Fdocs.pieces.app",{"key":265,"label":266,"href":267},"docs.getStarted","Get started docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces",{"key":269,"label":270,"href":271},"docs.api","API docs","https:\u002F\u002Fdocs.pieces.app\u002Fapi",{"key":273,"label":274,"href":275},"docs.desktop.overview","Desktop overview","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop",{"key":277,"label":278,"href":279},"docs.desktop.onboarding","Desktop onboarding","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fonboarding",{"key":281,"label":282,"href":283},"docs.desktop.timeline","Desktop timeline docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Ftimeline",{"key":285,"label":286,"href":287},"docs.desktop.summaries","Desktop summaries docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fsingle-click-summaries",{"key":289,"label":290,"href":291},"docs.desktop.search","Desktop conversational search docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fconversational-search",{"key":293,"label":294,"href":295},"docs.desktop.drive","Desktop drive docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fdrive",{"key":297,"label":298,"href":299},"docs.desktop.account","Desktop account settings docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fconfiguration\u002Faccount",{"key":301,"label":302,"href":92},"docs.desktop.download","Desktop download docs",{"key":304,"label":305,"href":306},"docs.piecesOS.overview","PiecesOS overview docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies",{"key":308,"label":309,"href":310},"docs.piecesOS.details","PiecesOS details docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os",{"key":312,"label":313,"href":215},"docs.piecesOS.install","PiecesOS install docs",{"key":315,"label":316,"href":317},"docs.piecesOS.quickMenu","PiecesOS quick menu docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os\u002Fquick-menu",{"key":319,"label":320,"href":321},"docs.piecesOS.storage","On-device storage docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fon-device-storage",{"key":323,"label":324,"href":325},"docs.piecesOS.troubleshooting","PiecesOS troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os\u002Ftroubleshooting",{"key":327,"label":328,"href":329},"docs.mcp.overview","MCP overview docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp",{"key":331,"label":332,"href":333},"docs.mcp.cursor","MCP Cursor docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fcursor",{"key":335,"label":336,"href":337},"docs.mcp.vscode","MCP VS Code docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fvs-code",{"key":339,"label":340,"href":341},"docs.mcp.claudeDesktop","MCP Claude Desktop docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fclaude-desktop",{"key":343,"label":344,"href":345},"docs.mcp.claudeCode","MCP Claude Code docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fclaude-code",{"key":347,"label":348,"href":349},"docs.mcp.claudeCowork","MCP Claude Cowork docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fclaude-cowork",{"key":351,"label":352,"href":353},"docs.mcp.githubCopilot","MCP GitHub Copilot docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fgithub-copilot",{"key":355,"label":356,"href":357},"docs.mcp.goose","MCP Goose docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fgoose",{"key":359,"label":360,"href":361},"docs.mcp.windsurf","MCP Windsurf docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fwindsurf",{"key":363,"label":364,"href":365},"docs.mcp.zed","MCP Zed docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fzed",{"key":367,"label":368,"href":369},"docs.mcp.jetbrains","MCP JetBrains docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fjetbrains-ides",{"key":371,"label":372,"href":373},"docs.mcp.continueDev","MCP Continue docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fcontinue-dev",{"key":375,"label":376,"href":377},"docs.mcp.cline","MCP Cline docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fcline",{"key":379,"label":380,"href":381},"docs.mcp.raycast","MCP Raycast docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fraycast",{"key":383,"label":384,"href":385},"docs.mcp.rovoDevCli","MCP Rovo Dev CLI docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Frovo-dev-cli",{"key":387,"label":388,"href":389},"docs.mcp.openaiCodexCli","MCP OpenAI Codex CLI docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fopenai-codex-cli",{"key":391,"label":392,"href":393},"docs.mcp.googleGeminiCli","MCP Google Gemini CLI docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fgoogle-gemini-cli",{"key":395,"label":396,"href":397},"docs.mcp.amazonQ","MCP Amazon Q docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Famazon-q-developer",{"key":399,"label":400,"href":401},"docs.mcp.chatgptDev","MCP ChatGPT Developer Mode docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fchatgpt-developer-mode",{"key":403,"label":404,"href":405},"docs.mcp.openclaw","MCP OpenClaw docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fopenclaw",{"key":407,"label":408,"href":409},"docs.mcp.mcpRemote","MCP Remote docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fmcp-remote",{"key":411,"label":412,"href":413},"docs.mcp.ngrok","MCP ngrok docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fngrok-setup",{"key":415,"label":416,"href":417},"docs.troubleshooting.macOS","macOS troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Ftroubleshooting\u002Fmacos",{"key":419,"label":420,"href":421},"docs.troubleshooting.windows","Windows troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Ftroubleshooting\u002Fwindows",{"key":423,"label":424,"href":425},"docs.troubleshooting.linux","Linux troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Ftroubleshooting\u002Flinux",{"key":427,"label":428,"href":429},"docs.privacy","Privacy and security docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fprivacy-security-your-data",{"key":431,"label":432,"href":433},"docs.support","Support docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fsupport",{"key":435,"label":436,"href":437},"portal.home","Pieces portal","https:\u002F\u002Fportal.pieces.app",{"key":439,"label":440,"href":441},"site.home","Website home","https:\u002F\u002Fpieces.app",{"key":443,"label":444,"href":445},"site.about","About page","https:\u002F\u002Fpieces.app\u002Fabout",{"key":447,"label":448,"href":449},"site.features","Features page","https:\u002F\u002Fpieces.app\u002Ffeatures",{"key":451,"label":452,"href":453},"site.plugins","Plugins page","https:\u002F\u002Fpieces.app\u002Fplugins",{"key":455,"label":456,"href":457},"site.contact","Contact page","https:\u002F\u002Fpieces.app\u002Fcontact",{"key":459,"label":58,"href":460},"site.updates","https:\u002F\u002Fpieces.app\u002Fupdates",{"key":462,"label":463,"href":464},"site.news","News","https:\u002F\u002Fpieces.app\u002Fnews",{"key":466,"label":467,"href":468},"site.events","Community events","https:\u002F\u002Fpieces.app\u002Fcommunity\u002Fevents",{"key":470,"label":471,"href":472},"site.userStories","User stories","https:\u002F\u002Fpieces.app\u002Fuser-stories",{"key":474,"label":475,"href":476},"site.academy","Academy","https:\u002F\u002Fpieces.app\u002Flearn\u002Facademy",{"key":478,"label":479,"href":480},"site.support","Website support","https:\u002F\u002Fpieces.app\u002Fsupport",{"key":482,"label":483,"href":484},"site.standup","Standup","https:\u002F\u002Fpieces.app\u002Fstandup",{"key":486,"label":34,"href":487},"site.blog","https:\u002F\u002Fcode.pieces.app\u002Fblog",{"key":489,"label":43,"href":490},"social.discord","https:\u002F\u002Fdiscord.gg\u002Fgetpieces",{"key":492,"label":46,"href":493},"social.x","https:\u002F\u002Fx.com\u002Fgetpieces",{"key":495,"label":496,"href":493},"social.twitter","Twitter",{"key":498,"label":499,"href":500},"social.instagram","Instagram","https:\u002F\u002Fwww.instagram.com\u002Fgetpieces\u002F",{"key":502,"label":503,"href":504},"social.tiktok","TikTok","https:\u002F\u002Fwww.tiktok.com\u002F@getpieces",{"key":506,"label":49,"href":507},"social.linkedin","https:\u002F\u002Fwww.linkedin.com\u002Fcompany\u002Fgetpieces\u002F",{"key":509,"label":510,"href":511},"social.youtube","YouTube","https:\u002F\u002Fyoutube.com\u002F@getpieces",{"key":513,"label":514,"href":515},"github.org","GitHub organization","https:\u002F\u002Fgithub.com\u002Fpieces-app",{"key":517,"label":518,"href":519},"github.support","GitHub support","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fsupport",{"key":521,"label":522,"href":523},"github.issues","GitHub issues","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fsupport\u002Fissues",{"key":525,"label":526,"href":527},"github.discussions","GitHub discussions","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fsupport\u002Fdiscussions",{"key":529,"label":530,"href":531},"github.documentation","GitHub documentation","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fdocumentation",{"key":533,"label":534,"href":535},"github.opensource","GitHub open source","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fopensource",{"key":537,"label":538,"href":539},"github.sdks.python","Python SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-python",{"key":541,"label":542,"href":543},"github.sdks.typescript","TypeScript SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-typescript",{"key":545,"label":546,"href":547},"github.sdks.dart","Dart SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-dart",{"key":549,"label":550,"href":551},"github.sdks.kotlin","Kotlin SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-kotlin",{"key":553,"label":554,"href":555},"github.plugins.obsidian","Obsidian plugin repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fobsidian-pieces",{"key":557,"label":558,"href":255},"github.plugins.jupyterlab","JupyterLab plugin repository",{"key":560,"label":561,"href":562},"github.plugins.sublime","Sublime plugin repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fplugin_sublime",{"key":564,"label":565,"href":566},"github.plugins.neovim","Neovim plugin repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fplugin_neovim",{"key":568,"label":569,"href":570},"github.cliAgent","CLI agent repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fcli-agent",{"key":572,"label":573,"href":574},"github.mcpDart","MCP Dart repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fmcp_dart",{"key":576,"label":577,"href":578},"github.awesomePieces","Awesome Pieces repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fawesome-pieces",{"key":580,"label":581,"href":66},"legal.privacyPolicy","Privacy policy",{"key":583,"label":584,"href":69},"legal.refundPolicy","Refund policy",{"key":586,"label":587,"href":72},"legal.terms","Terms",{"key":589,"label":590,"href":591},"legal.security","Legal security","https:\u002F\u002Fpieces.app\u002Flegal\u002Fsecurity",{"key":593,"label":594,"href":511},"videos.youtubeChannel","YouTube channel",{"key":596,"label":597,"href":598},"videos.gettingStartedDesktop","Getting started desktop video","https:\u002F\u002Fyoutu.be\u002FdUr1lRM_TYk",{"key":600,"label":601,"href":602},"videos.snippetDiscoveryxR","Snippet discovery video","https:\u002F\u002Fyoutu.be\u002FG6vb1USw-30",{"key":604,"label":605,"href":606},"sales.bookACall","Book a sales call","https:\u002F\u002Fcalendar.app.google\u002FWVUDtUfNy5Vst3sH7",{"key":608,"label":609,"href":610},"sales.enterprise","Enterprise form","https:\u002F\u002Fgetpieces.typeform.com\u002Fto\u002FaVQFTvpE",{"key":612,"label":613,"href":527},"sales.feedback","Feedback discussions",{"key":615,"label":616,"href":617},"sales.earlyAccess","Early access form","https:\u002F\u002Fgetpieces.typeform.com\u002Fearlyaccess",{"key":619,"label":620,"href":621},"sales.supportEmail","Support email","mailto:support@pieces.app",{"key":623,"label":624,"href":19},"routes.home","Home route",{"key":626,"label":627,"href":56},"routes.about","About route",{"key":629,"label":630,"href":12},"routes.downloads","Downloads route",{"key":632,"label":633,"href":634},"routes.thanks","Post-install thanks route","\u002Finstall\u002Fthanks",{"key":636,"label":637,"href":638},"routes.pricing","Pricing route","\u002Fpricing",{"key":640,"label":641,"href":642},"cta.freeTrial","Start free trial CTA (Pieces Pro) — used by \u002Fcampaigns\u002F* landing pages","https:\u002F\u002Fcampaigns.pieces.app\u002F",{"key":644,"label":645,"href":22},"routes.enterprise","Enterprise route",{"key":647,"label":648,"href":62},"routes.contact","Contact route",{"key":650,"label":651,"href":59},"routes.updates","Updates route",{"key":653,"label":654,"href":655},"routes.migrationError","Migration error route","\u002Fmigration\u002Ferror",{"key":657,"label":658,"href":659},"routes.authenticated","Post-login authenticated route","\u002Fauth\u002Fsigned-in",{"key":661,"label":662,"href":663},"routes.signed-out","Signed out route","\u002Fauth\u002Fsigned-out",{"key":665,"label":666,"href":667},"routes.authentication-error","Authentication error route","\u002Fauth\u002Ferror",{},"data\u002Fshared\u002Furls","2AvfSWI6bZACH5Kr1ZS3txMLjteRjCjbDR_ul1uRZ9Q",{"id":672,"title":673,"author":674,"authorPhoto":675,"authorPhotoAlt":676,"authorSlug":677,"body":678,"buttonText":676,"buttonUrl":676,"category":1127,"date":1128,"description":1129,"draft":1130,"editorsPick":1130,"extension":1131,"featured":1130,"image":1132,"imageAlt":1133,"meta":1134,"navigation":32,"ogImage":676,"ogImageAlt":676,"path":1135,"seo":1136,"stem":1137,"tags":1138,"__hash__":1140},"blog\u002Fblog\u002Fthe-modern-guide-to-vue-components.md","The Modern Guide to Vue Components","Chris Roland","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fhow-to-understand-and-use-the-cia-triad-model-in-cybersecurity\u002Fauthor.png",null,"chris-roland",{"type":679,"value":680,"toc":1107},"minimark",[681,685,701,706,714,717,720,730,737,740,744,759,762,767,770,773,776,782,805,810,816,820,823,844,847,850,856,859,871,874,882,885,899,906,910,933],[682,683,684],"p",{},"This detailed guide will explore everything Vue devs – and all developers in general – need to know about components, including in-depth examples of class components, dynamic components, single file components, functional components, and table components.",[682,686,687,691,692],{},[688,689,690],"em",{},"To fully follow this article, the reader should have a fair understanding of the"," ",[693,694,698],"a",{"href":695,"rel":696},"https:\u002F\u002Fvuejs.org\u002Fguide\u002Fintroduction.html",[697],"nofollow",[688,699,700],{},"Vue framework.",[702,703,705],"h2",{"id":704},"introduction","Introduction",[682,707,708,709,713],{},"The ",[710,711,712],"code",{},".vue"," extension is commonly added to Vue components. They are unique elements made with JavaScript objects, a syntax like HTML, and occasionally, a style block to style the component. Data from other components, referred to as props, can be imported and used by other components.",[682,715,716],{},"Examples provided in this post require Vue3.",[682,718,719],{},"A typical example of a Vue component:",[721,722,727],"pre",{"className":723,"code":725,"language":726},[724],"language-text","\u003C!--HTML like template-->\u003Ctemplate>\u003Ch1>Welcome!\u003C\u002Fh1>\u003C\u002Ftemplate>\u003C!--JS Object-->\u003Cscript>export default {name: 'Greet'};\u003C\u002Fscript>\u003C!--style-->\u003Cstyle>h1{color: blue;}\u003C\u002Fstyle>\n","text",[710,728,725],{"__ignoreMap":729},"",[682,731,732,733,736],{},"Vue creates a compiler that processes the content in the ",[710,734,735],{},"\u003Ctemplate>"," tag and returns a render function, which in turn sends back a virtual DOM node, i.e Vue's DOM. This DOM chooses the UI that will be updated and rendered in the DOM of your browser.",[682,738,739],{},"You'll discover the various sorts of Vue components, how they function, and use cases for each one in this article.",[702,741,743],{"id":742},"class-component","Class Component",[682,745,746,747,750,751,754,755,758],{},"Using a built-in library called ",[710,748,749],{},"vue-class-component",", Vue enables you to design a component with syntax similar to that of a class. A lot of developers use ",[710,752,753],{},"vue-property-decorator",", which has special features called decorators. Decorators are a type of declaration attachable to a class, parameter, accessor property, or method, often in the form ",[710,756,757],{},"@expression",". Class-like syntax encourages OOP (object-oriented programming) concepts like inheritance, which lets you use the extends keyword to inherit particular values, methods or properties from another object or class.",[682,760,761],{},"When you have a complex component like a modal or form, class components are a suitable choice. Your code will become more readable if you use class components to segregate its various methods and properties.",[763,764,766],"h3",{"id":765},"how-it-functions","How It Functions",[682,768,769],{},"You’ll need to install Vue class component in order to use it:",[682,771,772],{},"$ npm install --save vue-class-component",[682,774,775],{},"Below is a standard sample code snippet for Vue class components.:",[721,777,780],{"className":778,"code":779,"language":726},[724],"\u003Ctemplate>\u003Cdiv>\u003Ch1> {{ msg }} \u003C\u002Fh1>\u003Cbutton @click=\"clearMessage\">Greeting\u003C\u002Fbutton>\u003C\u002Fdiv>\u003C\u002Ftemplate>\u003Cscript>import { Component, Vue } from 'vue-class-component';\u002F\u002FDefine component using the class-like syntax@Componentexport default class Greet extends Vue {\u002F\u002Fcomponent propertymsg = 'Welcome'\u002F\u002Fcomponent methodsclearMessage() {this.msg = ''}sayWelcome() {this.msg = 'Welcome'}}\u003C\u002Fscript>\n",[710,781,779],{"__ignoreMap":729},[682,783,784,785,788,789,792,793,796,797,800,801,804],{},"The HTML-like syntax that corresponds to the DOM is specified by the ",[710,786,787],{},"template"," tag. By using the methods and properties instantiated in the ",[710,790,791],{},"script"," tag, its data can be controlled and set. Your class is turned into a Vue component by the ",[710,794,795],{},"@Component"," decorator, while the next line defines the name of your component: ",[710,798,799],{},"Greet",". In order for other components to utilize the Vue properties and methods that this component inherits (e.g. the ",[710,802,803],{},"mounted()"," method), it exports them so that other components can also make use of them.",[682,806,708,807,809],{},[710,808,799],{}," component is then imported and used:",[721,811,814],{"className":812,"code":813,"language":726},[724],"import Greet from '.\u002FGreet.vue'\u003CApp>\u003CGreet \u002F>\u003C\u002FApp>\n",[710,815,813],{"__ignoreMap":729},[702,817,819],{"id":818},"single-file-component","Single-file Component",[682,821,822],{},"A single-file component — simply referred to as SFC—is made up of 3 blocks:",[824,825,826,832,838],"ul",{},[827,828,829,831],"li",{},[710,830,735],{},": Basically the HTML-like foundation of the UI.",[827,833,834,837],{},[710,835,836],{},"\u003Cstyle>",": Where all the styling in the UI is done.",[827,839,840,843],{},[710,841,842],{},"\u003Cscript>",": Used to process the dynamic functionality and logic of the application.",[682,845,846],{},"They are in charge of its structure, style and logic.",[682,848,849],{},"A typical SFC is demonstrated below:",[721,851,854],{"className":852,"code":853,"language":726},[724],"\u003Ctemplate>\u003Cp class=\"greetings\">{{ greet }}\u003C\u002Fp>\u003C\u002Ftemplate>\u003Cscript>export default {data() {return {greet: 'Welcome!'}}}\u003C\u002Fscript>\u003Cstyle scoped>\u003C!--the `scoped` attribute applies this style to only this component-->.greetings {color: white;font-family: Arial;}\u003C\u002Fstyle>\n",[710,855,853],{"__ignoreMap":729},[682,857,858],{},"A few merits of using SFC’s are:",[824,860,861,864],{},[827,862,863],{},"It’s created using familiar HTML, CSS, and JavaScript syntax, and it contains all concerns (structure, style, and logic) of an element in one component.",[827,865,866,867,870],{},"It takes a scope attribute like ",[710,868,869],{},"\u003Cstyle scoped>"," in its styling tag to designate styles to a specific component.",[682,872,873],{},"Some use cases for SFCs are:",[824,875,876,879],{},[827,877,878],{},"Creating applications with a single page.",[827,880,881],{},"Making static pages.",[702,883,766],{"id":884},"how-it-functions-1",[682,886,708,887,889,890,892,893,895,896,898],{},[710,888,735],{}," block lets you attach the rendered DOM to your designated Vue instance's data (commonly in the ",[710,891,842],{}," block), which then gets added into the virtual DOM. The ",[710,894,836],{}," block is added into the browser as an actual ",[710,897,836],{}," tag during development to simplify hot updates.",[682,900,901,902,905],{},"The SFC is normally pre-compiled by a Vue library called ",[710,903,904],{},"@vue\u002Fcompiler-sfc"," into JavaScript and CSS.",[702,907,909],{"id":908},"dynamic-component","Dynamic Component",[682,911,912,913,916,917,920,921,924,925,928,929,932],{},"During run time, you can swap between components, thanks to dynamic components. You could use a dynamic component to render a component based on specific conditions rather than employing unique components separately. The dynamic component can serve as a replacement for conditional directives like ",[710,914,915],{},"v-else",", ",[710,918,919],{},"v-else-if"," and ",[710,922,923],{},"v-if"," with a ",[710,926,927],{},"v-bind:is"," directive, which is also written as ",[710,930,931],{},":is",", e.g.:",[934,935,937,940,943,954,957,960,967,970,973,979,982,988,992,1001,1004,1010,1013,1016,1022,1025,1028,1042,1046,1058,1061,1067,1070,1073,1088,1091,1097,1101,1104],"component",{":is":936},"comp",[682,938,939],{},"Code that uses dynamic components is substantially more reusable. It can also increase speed since it decreases the number of times your page loads by rendering components dynamically instead of routing to the individual components.",[682,941,942],{},"A few sample use cases for dynamic components are as follows:",[824,944,945,948,951],{},[827,946,947],{},"Navigating between tabbed components without routing to a new page.",[827,949,950],{},"Displaying different content on the page based on a user's login status.",[827,952,953],{},"Rendering different types of pop-ups dynamically in one component element.",[763,955,766],{"id":956},"how-it-functions-2",[682,958,959],{},"A dynamic component accepts a component by inserting its name as the parameter, or in some situations, as the component's options object. First, you’ll have to import the components that are to be used dynamically:",[682,961,962,963,966],{},"import Write from '.\u002FWrite.vue'",[964,965],"br",{},"\nimport Preview from '.\u002FPreview.vue'",[682,968,969],{},"Next, make a variable to represent the present component, which will be rendered by default, and then dynamically later on, depending on the user’s actions.",[682,971,972],{},"This variable can be generated as shown below:",[721,974,977],{"className":975,"code":976,"language":726},[724],"export default {components: {Write,Preview}data(){return {content: \"Write\" \u002F\u002Fdefault component to be rendered}}}\n",[710,978,976],{"__ignoreMap":729},[682,980,981],{},"Lastly, the components can be added to our template:",[721,983,986],{"className":984,"code":985,"language":726},[724],"\u003Ctemplate>\u003Cbutton @click='content = \"Write\"'> Write content here... \u003C\u002Fbutton>\u003C!--set content to `Write` component-->\u003Cbutton @click='content = \"Preview\"'> Preview content \u003C\u002Fbutton>\u003C!--set content to `Preview` component-->\u003CBlogPost :is='content'\u002F>\u003C!--dynamic component which will render based on what button is clicked-->\u003C\u002Ftemplate>\n",[710,987,985],{"__ignoreMap":729},[702,989,991],{"id":990},"table-component","Table Component",[682,993,994,995,1000],{},"As the name suggests, table components are components that let you render data in a tabular format. To render table components in Vue, the majority of developers utilize tools like ",[693,996,999],{"href":997,"rel":998},"https:\u002F\u002Fwww.w3schools.com\u002Fbootstrap\u002Fbootstrap_get_started.asp",[697],"Bootstrap",".",[682,1002,1003],{},"Here is an example of a basic code snippet of a table component:",[721,1005,1008],{"className":1006,"code":1007,"language":726},[724],"\u003Ctemplate>\u003Cdiv>\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth v-for=\"(header, index)in headers\" :key=\"index\">\u003C!--loop through headers and render 'First Name', 'Last Name'-->{{ header }}\u003C\u002Fth>\u003C\u002Ftr>\u003C\u002Fthead>\u003Ctbody>\u003C!--accept dataObject prop frm parent component with sample data like:dataObject=[{ firstName: \"Chris\", lastName: \"Roland\" },{ firstName: \"Andrea\", lastName: \"Landry\" },{ firstName: \"Somto\", lastName: \"Rose\" },]-->\u003Ctr v-for=\"(data, index) in dataObject\" :key=\"index + 'x'\">\u003Ctd>{{ data.firstName }}\u003C\u002Ftd>\u003Ctd>{{ data.lastName }}\u003C\u002Ftd>\u003C\u002Ftr>\u003C\u002Ftbody>\u003C\u002Ftable>\u003C\u002Fdiv>\u003C\u002Ftemplate>\u003Cscript>export default {name: \"Table\",props: {dataObject: Array,},computed: {headers() {const prop = ['First Name', 'Last Name']return prop;},},};\u003C\u002Fscript>\u003C!--Add \"scoped\" attribute to limit CSS to this component only-->\u003Cstyle scoped>table{border-collapse: collapse;}tr, th {background: gray;}tr:nth-child(odd) {background: #fff;}\u003C\u002Fstyle>\u003C\u002Fscript>\n",[710,1009,1007],{"__ignoreMap":729},[682,1011,1012],{},"Table components are helpful because they enable you to organize comparable or statistical facts in a comprehensible format.",[682,1014,1015],{},"How table components are used is demonstrated below:",[721,1017,1020],{"className":1018,"code":1019,"language":726},[724],"\u003Ctable-component:data=\"[{ firstName: 'Wesley', birthday: '04\u002F10\u002F1940', score: 72 },{ firstName: 'Ann', birthday: '18\u002F06\u002F1942', score: 70 },{ firstName: 'Georgia', birthday: '25\u002F02\u002F1943', score: 22 },{ firstName: 'Ralph', birthday: '07\u002F07\u002F1940', score: 2 },]\"sort-by=\"score\"sort-order=\"asc\">\u003Ctable-column show=\"firstName\" label=\"First name\">\u003C\u002Ftable-column>\u003Ctable-column show=\"score\" label=\"Score\" data-type=\"numeric\">\u003C\u002Ftable-column>\u003Ctable-column show=\"birthday\" label=\"Birthday\" :filterable=\"false\" data-type=\"date:DD\u002FMM\u002FYYYY\">\u003C\u002Ftable-column>\u003C\u002Ftable-component>\n",[710,1021,1019],{"__ignoreMap":729},[682,1023,1024],{},"This will produce a table that can be sorted and filtered. Above the table, a filter field will be visible. When filtering, if your data contains any HTML, it will be removed during the filter process. Clicking on the column headers will let you sort the table. By default, it will keep track of the filter and sorting that was used for 15 minutes.",[763,1026,766],{"id":1027},"how-it-functions-3",[682,1029,1030,1031,1034,1035,920,1038,1041],{},"Table components normally consist of a table body and a header. The header is indicated by the ",[710,1032,1033],{},"\u003Cthead>"," tag. The body contains the table rows and columns, which are indicated using the ",[710,1036,1037],{},"\u003Ctr>",[710,1039,1040],{},"\u003Ctd>"," tags. The table component can take in props and computed data in order to manipulate the data that it renders. It works well with state or can work the same way functional components do, and it basically renders nonreactive data in a tabular format.",[702,1043,1045],{"id":1044},"functional-component","Functional Component",[682,1047,708,1048,1051,1052,1057],{},[710,1049,1050],{},"this"," keyword cannot be used with these components because functional components in Vue are simply components that are stateless, have no lifecycle methods, and no instances. Because they can’t sustain their own state, they are not reactive. They take in props and render a UI-based function on the received props, but they can't know when the data has changed. It's relevant to note that they’re not the same with a ",[693,1053,1056],{"href":1054,"rel":1055},"https:\u002F\u002Fvuejs.org\u002Fguide\u002Fextras\u002Frender-function.html",[697],"render"," function, but are capable of containing render functions in them.",[682,1059,1060],{},"An example of a functional component template is show below:",[721,1062,1065],{"className":1063,"code":1064,"language":726},[724],"\u003Ctemplate functionals>\u003C!--note the functional keyword-->\u003Ch1> {{props.sample}}\u003C\u002Fh1>\u003C!--accepts a prop called \"sample\"-->\u003C\u002Ftemplate>\u003Cscript>export default {props: {sample: String}}\u003C\u002Fscript>\n",[710,1066,1064],{"__ignoreMap":729},[682,1068,1069],{},"In comparison to dynamic components, functional components are easier to write and debug since they have less complexity and are faster because they have no state and reactivity.",[682,1071,1072],{},"Some use cases for functional components are as follows:",[824,1074,1075,1078,1081],{},[827,1076,1077],{},"To return multiple root nodes.",[827,1079,1080],{},"For solely presentational UIs that do not require state or reactivity.",[827,1082,1083,1084,1087],{},"For looping by using the ",[710,1085,1086],{},"v-for"," directive and rendering list items.",[763,1089,766],{"id":1090},"how-it-functions-4",[682,1092,1093,1094,1096],{},"The functional component works similarly to the single-file component, except that in this case, it is stateless and has no instance, and also includes a functional keyword in its ",[710,1095,735],{}," tag, which informs Vue that it is a functional component.",[702,1098,1100],{"id":1099},"conclusion","Conclusion",[682,1102,1103],{},"In this article, we intricately discussed Vue components and how they work. We then broke down the listed components and explained them with in-depth examples and code demonstrations.",[682,1105,1106],{},"After reading this article, developers should have an appropriate and broader understanding of the Vue components, and have little to no difficulty utilizing them.",{"title":729,"searchDepth":1108,"depth":1108,"links":1109},2,[1110,1111,1115,1116,1117,1120,1123,1126],{"id":704,"depth":1108,"text":705},{"id":742,"depth":1108,"text":743,"children":1112},[1113],{"id":765,"depth":1114,"text":766},3,{"id":818,"depth":1108,"text":819},{"id":884,"depth":1108,"text":766},{"id":908,"depth":1108,"text":909,"children":1118},[1119],{"id":956,"depth":1114,"text":766},{"id":990,"depth":1108,"text":991,"children":1121},[1122],{"id":1027,"depth":1114,"text":766},{"id":1044,"depth":1108,"text":1045,"children":1124},[1125],{"id":1090,"depth":1114,"text":766},{"id":1099,"depth":1108,"text":1100},"Software Development","2022-11-10T00:00:00.000Z","This detailed guide will explore everything Vue devs – and all developers in general – need to know about Vue components.",false,"md","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fthe-modern-guide-to-vue-components\u002Fhero.jpeg","decorative cover image showing the inside of a desktop computer",{},"\u002Fblog\u002Fthe-modern-guide-to-vue-components",{"title":673,"description":1129},"blog\u002Fthe-modern-guide-to-vue-components",[1139],"vue","xZNJcciA0Ybf-aZPx72bNhZV2CoprV9JYyyTUN9UXKI",{"id":1142,"title":674,"body":1143,"description":1153,"draft":1130,"extension":1131,"meta":1154,"navigation":32,"path":1155,"photo":1156,"photoAlt":676,"seo":1157,"stem":1158,"__hash__":1159},"authors\u002Fauthors\u002Fchris-roland.md",{"type":679,"value":1144,"toc":1151},[1145],[682,1146,1147,1148,1150],{},"Chris is a dedicated Software Developer, Technical Writer, and Open Source evangelist whi is fascinated with the Tech Development world and am dedicated to learning more about software engineering and computer science. Proficient with Shell Navigation, HTML5, CSS3, Bootstrap, Tailwind, JS, TS, NextJS, and React.",[964,1149],{},"\nAs a developer who is driven, curious, and committed to creating high-quality code he is constantly seeking new challenges and opportunities to learn new technologies.",{"title":729,"searchDepth":1108,"depth":1108,"links":1152},[],"Chris is a dedicated Software Developer, Technical Writer, and Open Source evangelist whi is fascinated with the Tech Development world and am dedicated to learning more about software engineering and computer science. Proficient with Shell Navigation, HTML5, CSS3, Bootstrap, Tailwind, JS, TS, NextJS, and React.\nAs a developer who is driven, curious, and committed to creating high-quality code he is constantly seeking new challenges and opportunities to learn new technologies.",{},"\u002Fauthors\u002Fchris-roland","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fauthors\u002Fchris-roland.png",{"title":674,"description":1153},"authors\u002Fchris-roland","OPsrv6QmG2c2RZ4bGIyDknPH36Z2M_fkzBxNYyr_RLA",{"left":1161,"top":1161,"width":1162,"height":1162,"rotate":1161,"vFlip":1130,"hFlip":1130,"body":1163},0,24,"\u003Cpath fill=\"currentColor\" d=\"m7.825 13l4.9 4.9q.3.3.288.7t-.313.7q-.3.275-.7.288t-.7-.288l-6.6-6.6q-.15-.15-.213-.325T4.426 12t.063-.375t.212-.325l6.6-6.6q.275-.275.688-.275t.712.275q.3.3.3.713t-.3.712L7.825 11H19q.425 0 .713.288T20 12t-.288.713T19 13z\"\u002F>"]