[{"data":1,"prerenderedAt":2860},["ShallowReactive",2],{"blog-posts-en":3},[4,541,1886],{"id":5,"title":6,"author":7,"body":8,"date":528,"description":529,"draft":530,"extension":531,"image":532,"meta":533,"navigation":211,"path":534,"seo":535,"stem":536,"tags":537,"updatedAt":532,"__hash__":540},"blog/en/blog/getting-started-with-nuxt-content.md","Getting Started with Nuxt Content","Ali Arghyani",{"type":9,"value":10,"toc":516},"minimark",[11,15,19,24,27,62,66,69,95,102,162,166,173,230,234,241,377,381,387,436,440,445,448,475,479,482,502,506,509,512],[12,13,6],"h1",{"id":14},"getting-started-with-nuxt-content",[16,17,18],"p",{},"Nuxt Content is a powerful file-based CMS that allows you to write content in Markdown, YAML, CSV, or JSON and query it with a MongoDB-like API. In this tutorial, we'll explore how to set up and use Nuxt Content v3 in your Nuxt 4 application.",[20,21,23],"h2",{"id":22},"why-nuxt-content","Why Nuxt Content?",[16,25,26],{},"Nuxt Content offers several advantages for content-driven applications:",[28,29,30,38,44,50,56],"ul",{},[31,32,33,37],"li",{},[34,35,36],"strong",{},"File-based",": Write content in Markdown files with Git version control",[31,39,40,43],{},[34,41,42],{},"Type-safe",": Full TypeScript support with auto-generated types",[31,45,46,49],{},[34,47,48],{},"Powerful queries",": MongoDB-like API for filtering and sorting",[31,51,52,55],{},[34,53,54],{},"Syntax highlighting",": Built-in code highlighting with Shiki",[31,57,58,61],{},[34,59,60],{},"MDC syntax",": Embed Vue components directly in Markdown",[20,63,65],{"id":64},"installation","Installation",[16,67,68],{},"Installing Nuxt Content is straightforward:",[70,71,76],"pre",{"className":72,"code":73,"language":74,"meta":75,"style":75},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","pnpm add @nuxt/content\n","bash","",[77,78,79],"code",{"__ignoreMap":75},[80,81,84,88,92],"span",{"class":82,"line":83},"line",1,[80,85,87],{"class":86},"sBMFI","pnpm",[80,89,91],{"class":90},"sfazB"," add",[80,93,94],{"class":90}," @nuxt/content\n",[16,96,97,98,101],{},"Then add it to your ",[77,99,100],{},"nuxt.config.ts",":",[70,103,107],{"className":104,"code":105,"language":106,"meta":75,"style":75},"language-typescript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","export default defineNuxtConfig({\n  modules: ['@nuxt/content']\n})\n","typescript",[77,108,109,130,153],{"__ignoreMap":75},[80,110,111,115,118,122,126],{"class":82,"line":83},[80,112,114],{"class":113},"s7zQu","export",[80,116,117],{"class":113}," default",[80,119,121],{"class":120},"s2Zo4"," defineNuxtConfig",[80,123,125],{"class":124},"sTEyZ","(",[80,127,129],{"class":128},"sMK4o","{\n",[80,131,133,137,139,142,145,148,150],{"class":82,"line":132},2,[80,134,136],{"class":135},"swJcz","  modules",[80,138,101],{"class":128},[80,140,141],{"class":124}," [",[80,143,144],{"class":128},"'",[80,146,147],{"class":90},"@nuxt/content",[80,149,144],{"class":128},[80,151,152],{"class":124},"]\n",[80,154,156,159],{"class":82,"line":155},3,[80,157,158],{"class":128},"}",[80,160,161],{"class":124},")\n",[20,163,165],{"id":164},"creating-content","Creating Content",[16,167,168,169,172],{},"Create a ",[77,170,171],{},"content/"," directory in your project root and start writing Markdown files:",[70,174,178],{"className":175,"code":176,"language":177,"meta":75,"style":75},"language-markdown shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","---\ntitle: \"My First Post\"\ndescription: \"This is my first blog post\"\ndate: \"2024-11-09\"\n---\n\n# Hello World\n\nThis is my first post using Nuxt Content!\n","markdown",[77,179,180,185,190,195,201,206,213,219,224],{"__ignoreMap":75},[80,181,182],{"class":82,"line":83},[80,183,184],{},"---\n",[80,186,187],{"class":82,"line":132},[80,188,189],{},"title: \"My First Post\"\n",[80,191,192],{"class":82,"line":155},[80,193,194],{},"description: \"This is my first blog post\"\n",[80,196,198],{"class":82,"line":197},4,[80,199,200],{},"date: \"2024-11-09\"\n",[80,202,204],{"class":82,"line":203},5,[80,205,184],{},[80,207,209],{"class":82,"line":208},6,[80,210,212],{"emptyLinePlaceholder":211},true,"\n",[80,214,216],{"class":82,"line":215},7,[80,217,218],{},"# Hello World\n",[80,220,222],{"class":82,"line":221},8,[80,223,212],{"emptyLinePlaceholder":211},[80,225,227],{"class":82,"line":226},9,[80,228,229],{},"This is my first post using Nuxt Content!\n",[20,231,233],{"id":232},"querying-content","Querying Content",[16,235,236,237,240],{},"Use the ",[77,238,239],{},"queryContent()"," composable to fetch your content:",[70,242,246],{"className":243,"code":244,"language":245,"meta":75,"style":75},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup>\nconst { data: posts } = await useAsyncData('posts', () =>\n  queryContent('blog')\n    .sort({ date: -1 })\n    .find()\n)\n\u003C/script>\n","vue",[77,247,248,263,308,324,354,364,368],{"__ignoreMap":75},[80,249,250,253,256,260],{"class":82,"line":83},[80,251,252],{"class":128},"\u003C",[80,254,255],{"class":135},"script",[80,257,259],{"class":258},"spNyl"," setup",[80,261,262],{"class":128},">\n",[80,264,265,268,271,274,276,279,281,284,287,290,292,294,297,299,302,305],{"class":82,"line":132},[80,266,267],{"class":258},"const",[80,269,270],{"class":128}," {",[80,272,273],{"class":135}," data",[80,275,101],{"class":128},[80,277,278],{"class":124}," posts ",[80,280,158],{"class":128},[80,282,283],{"class":128}," =",[80,285,286],{"class":113}," await",[80,288,289],{"class":120}," useAsyncData",[80,291,125],{"class":124},[80,293,144],{"class":128},[80,295,296],{"class":90},"posts",[80,298,144],{"class":128},[80,300,301],{"class":128},",",[80,303,304],{"class":128}," ()",[80,306,307],{"class":258}," =>\n",[80,309,310,313,315,317,320,322],{"class":82,"line":155},[80,311,312],{"class":120},"  queryContent",[80,314,125],{"class":124},[80,316,144],{"class":128},[80,318,319],{"class":90},"blog",[80,321,144],{"class":128},[80,323,161],{"class":124},[80,325,326,329,332,334,337,340,342,345,349,352],{"class":82,"line":197},[80,327,328],{"class":128},"    .",[80,330,331],{"class":120},"sort",[80,333,125],{"class":124},[80,335,336],{"class":128},"{",[80,338,339],{"class":135}," date",[80,341,101],{"class":128},[80,343,344],{"class":128}," -",[80,346,348],{"class":347},"sbssI","1",[80,350,351],{"class":128}," }",[80,353,161],{"class":124},[80,355,356,358,361],{"class":82,"line":203},[80,357,328],{"class":128},[80,359,360],{"class":120},"find",[80,362,363],{"class":124},"()\n",[80,365,366],{"class":82,"line":208},[80,367,161],{"class":124},[80,369,370,373,375],{"class":82,"line":215},[80,371,372],{"class":128},"\u003C/",[80,374,255],{"class":135},[80,376,262],{"class":128},[20,378,380],{"id":379},"rendering-content","Rendering Content",[16,382,236,383,386],{},[77,384,385],{},"ContentRenderer"," component to render your Markdown:",[70,388,390],{"className":243,"code":389,"language":245,"meta":75,"style":75},"\u003Ctemplate>\n  \u003CContentRenderer :value=\"post\" />\n\u003C/template>\n",[77,391,392,401,428],{"__ignoreMap":75},[80,393,394,396,399],{"class":82,"line":83},[80,395,252],{"class":128},[80,397,398],{"class":135},"template",[80,400,262],{"class":128},[80,402,403,406,408,411,414,417,420,423,425],{"class":82,"line":132},[80,404,405],{"class":128},"  \u003C",[80,407,385],{"class":135},[80,409,410],{"class":128}," :",[80,412,413],{"class":258},"value",[80,415,416],{"class":128},"=",[80,418,419],{"class":128},"\"",[80,421,422],{"class":124},"post",[80,424,419],{"class":128},[80,426,427],{"class":128}," />\n",[80,429,430,432,434],{"class":82,"line":155},[80,431,372],{"class":128},[80,433,398],{"class":135},[80,435,262],{"class":128},[20,437,439],{"id":438},"advanced-features","Advanced Features",[441,442,444],"h3",{"id":443},"code-highlighting","Code Highlighting",[16,446,447],{},"Nuxt Content uses Shiki for beautiful syntax highlighting:",[70,449,453],{"className":450,"code":451,"language":452,"meta":75,"style":75},"language-javascript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","// This code will be highlighted automatically\nconst greeting = (name) => {\n  console.log(`Hello, ${name}!`)\n}\n","javascript",[77,454,455,460,465,470],{"__ignoreMap":75},[80,456,457],{"class":82,"line":83},[80,458,459],{},"// This code will be highlighted automatically\n",[80,461,462],{"class":82,"line":132},[80,463,464],{},"const greeting = (name) => {\n",[80,466,467],{"class":82,"line":155},[80,468,469],{},"  console.log(`Hello, ${name}!`)\n",[80,471,472],{"class":82,"line":197},[80,473,474],{},"}\n",[441,476,478],{"id":477},"mdc-components","MDC Components",[16,480,481],{},"You can use Vue components in your Markdown:",[70,483,485],{"className":175,"code":484,"language":177,"meta":75,"style":75},"::alert{type=\"info\"}\nThis is an informational alert!\n::\n",[77,486,487,492,497],{"__ignoreMap":75},[80,488,489],{"class":82,"line":83},[80,490,491],{},"::alert{type=\"info\"}\n",[80,493,494],{"class":82,"line":132},[80,495,496],{},"This is an informational alert!\n",[80,498,499],{"class":82,"line":155},[80,500,501],{},"::\n",[20,503,505],{"id":504},"conclusion","Conclusion",[16,507,508],{},"Nuxt Content provides a powerful and flexible way to manage content in your Nuxt applications. With its file-based approach, powerful querying capabilities, and seamless Vue integration, it's perfect for blogs, documentation sites, and content-heavy applications.",[16,510,511],{},"Happy coding! 🚀",[513,514,515],"style",{},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":75,"searchDepth":132,"depth":132,"links":517},[518,519,520,521,522,523,527],{"id":22,"depth":132,"text":23},{"id":64,"depth":132,"text":65},{"id":164,"depth":132,"text":165},{"id":232,"depth":132,"text":233},{"id":379,"depth":132,"text":380},{"id":438,"depth":132,"text":439,"children":524},[525,526],{"id":443,"depth":155,"text":444},{"id":477,"depth":155,"text":478},{"id":504,"depth":132,"text":505},"2024-11-09","Learn how to build a powerful blog with Nuxt Content v3, featuring markdown support, syntax highlighting, and Vue component integration.",false,"md",null,{},"/en/blog/getting-started-with-nuxt-content",{"title":6,"description":529},"en/blog/getting-started-with-nuxt-content",[538,245,106,539],"nuxt","tutorial","t1FqCR9xDNlWDyZF_j-fOtTaDRWOnOs3EmMLmWiD4WY",{"id":542,"title":543,"author":7,"body":544,"date":1875,"description":1876,"draft":530,"extension":531,"image":532,"meta":1877,"navigation":211,"path":1878,"seo":1879,"stem":1880,"tags":1881,"updatedAt":532,"__hash__":1885},"blog/en/blog/nuxt-ui-components.md","Building Beautiful UIs with Nuxt UI",{"type":9,"value":545,"toc":1861},[546,549,552,556,559,591,599,603,606,620,625,665,669,673,676,834,838,841,988,992,995,1406,1410,1416,1517,1524,1527,1530,1693,1696,1699,1804,1811,1815,1850,1852,1855,1858],[12,547,543],{"id":548},"building-beautiful-uis-with-nuxt-ui",[16,550,551],{},"Nuxt UI is a comprehensive UI library built on top of Tailwind CSS and Headless UI, providing a collection of fully styled and customizable components for Nuxt 3 applications.",[20,553,555],{"id":554},"why-nuxt-ui","Why Nuxt UI?",[16,557,558],{},"Nuxt UI stands out for several reasons:",[28,560,561,567,573,579,585],{},[31,562,563,566],{},[34,564,565],{},"Fully Typed",": Complete TypeScript support with IntelliSense",[31,568,569,572],{},[34,570,571],{},"Accessible",": Built with accessibility in mind using Headless UI",[31,574,575,578],{},[34,576,577],{},"Customizable",": Easy theming with Tailwind CSS",[31,580,581,584],{},[34,582,583],{},"Dark Mode",": Built-in dark mode support",[31,586,587,590],{},[34,588,589],{},"Icons",": Integrated with Iconify for thousands of icons",[592,593,596],"blog-callout",{"title":594,"type":595},"Pro Tip","info",[16,597,598],{},"Nuxt UI components are designed to work seamlessly with Nuxt's auto-import feature, so you can use them without explicit imports!",[20,600,602],{"id":601},"getting-started","Getting Started",[16,604,605],{},"Install Nuxt UI in your project:",[70,607,609],{"className":72,"code":608,"language":74,"meta":75,"style":75},"pnpm add @nuxt/ui\n",[77,610,611],{"__ignoreMap":75},[80,612,613,615,617],{"class":82,"line":83},[80,614,87],{"class":86},[80,616,91],{"class":90},[80,618,619],{"class":90}," @nuxt/ui\n",[16,621,622,623,101],{},"Add it to your ",[77,624,100],{},[70,626,628],{"className":104,"code":627,"language":106,"meta":75,"style":75},"export default defineNuxtConfig({\n  modules: ['@nuxt/ui']\n})\n",[77,629,630,642,659],{"__ignoreMap":75},[80,631,632,634,636,638,640],{"class":82,"line":83},[80,633,114],{"class":113},[80,635,117],{"class":113},[80,637,121],{"class":120},[80,639,125],{"class":124},[80,641,129],{"class":128},[80,643,644,646,648,650,652,655,657],{"class":82,"line":132},[80,645,136],{"class":135},[80,647,101],{"class":128},[80,649,141],{"class":124},[80,651,144],{"class":128},[80,653,654],{"class":90},"@nuxt/ui",[80,656,144],{"class":128},[80,658,152],{"class":124},[80,660,661,663],{"class":82,"line":155},[80,662,158],{"class":128},[80,664,161],{"class":124},[20,666,668],{"id":667},"essential-components","Essential Components",[441,670,672],{"id":671},"buttons","Buttons",[16,674,675],{},"Buttons are the foundation of any UI. Nuxt UI provides flexible button components:",[70,677,679],{"className":243,"code":678,"language":245,"meta":75,"style":75},"\u003Ctemplate>\n  \u003Cdiv class=\"flex gap-2\">\n    \u003CUButton>Default\u003C/UButton>\n    \u003CUButton color=\"primary\">Primary\u003C/UButton>\n    \u003CUButton variant=\"outline\">Outline\u003C/UButton>\n    \u003CUButton icon=\"i-heroicons-rocket-launch\">With Icon\u003C/UButton>\n  \u003C/div>\n\u003C/template>\n",[77,680,681,689,710,730,759,788,817,826],{"__ignoreMap":75},[80,682,683,685,687],{"class":82,"line":83},[80,684,252],{"class":128},[80,686,398],{"class":135},[80,688,262],{"class":128},[80,690,691,693,696,699,701,703,706,708],{"class":82,"line":132},[80,692,405],{"class":128},[80,694,695],{"class":135},"div",[80,697,698],{"class":258}," class",[80,700,416],{"class":128},[80,702,419],{"class":128},[80,704,705],{"class":90},"flex gap-2",[80,707,419],{"class":128},[80,709,262],{"class":128},[80,711,712,715,718,721,724,726,728],{"class":82,"line":155},[80,713,714],{"class":128},"    \u003C",[80,716,717],{"class":135},"UButton",[80,719,720],{"class":128},">",[80,722,723],{"class":124},"Default",[80,725,372],{"class":128},[80,727,717],{"class":135},[80,729,262],{"class":128},[80,731,732,734,736,739,741,743,746,748,750,753,755,757],{"class":82,"line":197},[80,733,714],{"class":128},[80,735,717],{"class":135},[80,737,738],{"class":258}," color",[80,740,416],{"class":128},[80,742,419],{"class":128},[80,744,745],{"class":90},"primary",[80,747,419],{"class":128},[80,749,720],{"class":128},[80,751,752],{"class":124},"Primary",[80,754,372],{"class":128},[80,756,717],{"class":135},[80,758,262],{"class":128},[80,760,761,763,765,768,770,772,775,777,779,782,784,786],{"class":82,"line":203},[80,762,714],{"class":128},[80,764,717],{"class":135},[80,766,767],{"class":258}," variant",[80,769,416],{"class":128},[80,771,419],{"class":128},[80,773,774],{"class":90},"outline",[80,776,419],{"class":128},[80,778,720],{"class":128},[80,780,781],{"class":124},"Outline",[80,783,372],{"class":128},[80,785,717],{"class":135},[80,787,262],{"class":128},[80,789,790,792,794,797,799,801,804,806,808,811,813,815],{"class":82,"line":208},[80,791,714],{"class":128},[80,793,717],{"class":135},[80,795,796],{"class":258}," icon",[80,798,416],{"class":128},[80,800,419],{"class":128},[80,802,803],{"class":90},"i-heroicons-rocket-launch",[80,805,419],{"class":128},[80,807,720],{"class":128},[80,809,810],{"class":124},"With Icon",[80,812,372],{"class":128},[80,814,717],{"class":135},[80,816,262],{"class":128},[80,818,819,822,824],{"class":82,"line":215},[80,820,821],{"class":128},"  \u003C/",[80,823,695],{"class":135},[80,825,262],{"class":128},[80,827,828,830,832],{"class":82,"line":221},[80,829,372],{"class":128},[80,831,398],{"class":135},[80,833,262],{"class":128},[441,835,837],{"id":836},"cards","Cards",[16,839,840],{},"Cards are perfect for displaying content:",[70,842,844],{"className":243,"code":843,"language":245,"meta":75,"style":75},"\u003Ctemplate>\n  \u003CUCard>\n    \u003Ctemplate #header>\n      \u003Ch3>Card Title\u003C/h3>\n    \u003C/template>\n    \n    \u003Cp>Card content goes here\u003C/p>\n    \n    \u003Ctemplate #footer>\n      \u003CUButton>Action\u003C/UButton>\n    \u003C/template>\n  \u003C/UCard>\n\u003C/template>\n",[77,845,846,854,863,877,895,904,909,926,930,943,961,970,979],{"__ignoreMap":75},[80,847,848,850,852],{"class":82,"line":83},[80,849,252],{"class":128},[80,851,398],{"class":135},[80,853,262],{"class":128},[80,855,856,858,861],{"class":82,"line":132},[80,857,405],{"class":128},[80,859,860],{"class":135},"UCard",[80,862,262],{"class":128},[80,864,865,867,869,872,875],{"class":82,"line":155},[80,866,714],{"class":128},[80,868,398],{"class":135},[80,870,871],{"class":128}," #",[80,873,874],{"class":258},"header",[80,876,262],{"class":128},[80,878,879,882,884,886,889,891,893],{"class":82,"line":197},[80,880,881],{"class":128},"      \u003C",[80,883,441],{"class":135},[80,885,720],{"class":128},[80,887,888],{"class":124},"Card Title",[80,890,372],{"class":128},[80,892,441],{"class":135},[80,894,262],{"class":128},[80,896,897,900,902],{"class":82,"line":203},[80,898,899],{"class":128},"    \u003C/",[80,901,398],{"class":135},[80,903,262],{"class":128},[80,905,906],{"class":82,"line":208},[80,907,908],{"class":124},"    \n",[80,910,911,913,915,917,920,922,924],{"class":82,"line":215},[80,912,714],{"class":128},[80,914,16],{"class":135},[80,916,720],{"class":128},[80,918,919],{"class":124},"Card content goes here",[80,921,372],{"class":128},[80,923,16],{"class":135},[80,925,262],{"class":128},[80,927,928],{"class":82,"line":221},[80,929,908],{"class":124},[80,931,932,934,936,938,941],{"class":82,"line":226},[80,933,714],{"class":128},[80,935,398],{"class":135},[80,937,871],{"class":128},[80,939,940],{"class":258},"footer",[80,942,262],{"class":128},[80,944,946,948,950,952,955,957,959],{"class":82,"line":945},10,[80,947,881],{"class":128},[80,949,717],{"class":135},[80,951,720],{"class":128},[80,953,954],{"class":124},"Action",[80,956,372],{"class":128},[80,958,717],{"class":135},[80,960,262],{"class":128},[80,962,964,966,968],{"class":82,"line":963},11,[80,965,899],{"class":128},[80,967,398],{"class":135},[80,969,262],{"class":128},[80,971,973,975,977],{"class":82,"line":972},12,[80,974,821],{"class":128},[80,976,860],{"class":135},[80,978,262],{"class":128},[80,980,982,984,986],{"class":82,"line":981},13,[80,983,372],{"class":128},[80,985,398],{"class":135},[80,987,262],{"class":128},[441,989,991],{"id":990},"forms","Forms",[16,993,994],{},"Build forms quickly with validation:",[70,996,998],{"className":243,"code":997,"language":245,"meta":75,"style":75},"\u003Cscript setup>\nconst state = reactive({\n  email: '',\n  password: ''\n})\n\nconst schema = z.object({\n  email: z.string().email(),\n  password: z.string().min(8)\n})\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CUForm :schema=\"schema\" :state=\"state\" @submit=\"onSubmit\">\n    \u003CUFormGroup label=\"Email\" name=\"email\">\n      \u003CUInput v-model=\"state.email\" />\n    \u003C/UFormGroup>\n    \n    \u003CUFormGroup label=\"Password\" name=\"password\">\n      \u003CUInput v-model=\"state.password\" type=\"password\" />\n    \u003C/UFormGroup>\n    \n    \u003CUButton type=\"submit\">Submit\u003C/UButton>\n  \u003C/UForm>\n\u003C/template>\n",[77,999,1000,1010,1026,1039,1049,1055,1059,1081,1106,1132,1138,1146,1150,1158,1209,1242,1267,1276,1281,1312,1346,1355,1360,1388,1397],{"__ignoreMap":75},[80,1001,1002,1004,1006,1008],{"class":82,"line":83},[80,1003,252],{"class":128},[80,1005,255],{"class":135},[80,1007,259],{"class":258},[80,1009,262],{"class":128},[80,1011,1012,1014,1017,1019,1022,1024],{"class":82,"line":132},[80,1013,267],{"class":258},[80,1015,1016],{"class":124}," state ",[80,1018,416],{"class":128},[80,1020,1021],{"class":120}," reactive",[80,1023,125],{"class":124},[80,1025,129],{"class":128},[80,1027,1028,1031,1033,1036],{"class":82,"line":155},[80,1029,1030],{"class":135},"  email",[80,1032,101],{"class":128},[80,1034,1035],{"class":128}," ''",[80,1037,1038],{"class":128},",\n",[80,1040,1041,1044,1046],{"class":82,"line":197},[80,1042,1043],{"class":135},"  password",[80,1045,101],{"class":128},[80,1047,1048],{"class":128}," ''\n",[80,1050,1051,1053],{"class":82,"line":203},[80,1052,158],{"class":128},[80,1054,161],{"class":124},[80,1056,1057],{"class":82,"line":208},[80,1058,212],{"emptyLinePlaceholder":211},[80,1060,1061,1063,1066,1068,1071,1074,1077,1079],{"class":82,"line":215},[80,1062,267],{"class":258},[80,1064,1065],{"class":124}," schema ",[80,1067,416],{"class":128},[80,1069,1070],{"class":124}," z",[80,1072,1073],{"class":128},".",[80,1075,1076],{"class":120},"object",[80,1078,125],{"class":124},[80,1080,129],{"class":128},[80,1082,1083,1085,1087,1089,1091,1094,1097,1099,1102,1104],{"class":82,"line":221},[80,1084,1030],{"class":135},[80,1086,101],{"class":128},[80,1088,1070],{"class":124},[80,1090,1073],{"class":128},[80,1092,1093],{"class":120},"string",[80,1095,1096],{"class":124},"()",[80,1098,1073],{"class":128},[80,1100,1101],{"class":120},"email",[80,1103,1096],{"class":124},[80,1105,1038],{"class":128},[80,1107,1108,1110,1112,1114,1116,1118,1120,1122,1125,1127,1130],{"class":82,"line":226},[80,1109,1043],{"class":135},[80,1111,101],{"class":128},[80,1113,1070],{"class":124},[80,1115,1073],{"class":128},[80,1117,1093],{"class":120},[80,1119,1096],{"class":124},[80,1121,1073],{"class":128},[80,1123,1124],{"class":120},"min",[80,1126,125],{"class":124},[80,1128,1129],{"class":347},"8",[80,1131,161],{"class":124},[80,1133,1134,1136],{"class":82,"line":945},[80,1135,158],{"class":128},[80,1137,161],{"class":124},[80,1139,1140,1142,1144],{"class":82,"line":963},[80,1141,372],{"class":128},[80,1143,255],{"class":135},[80,1145,262],{"class":128},[80,1147,1148],{"class":82,"line":972},[80,1149,212],{"emptyLinePlaceholder":211},[80,1151,1152,1154,1156],{"class":82,"line":981},[80,1153,252],{"class":128},[80,1155,398],{"class":135},[80,1157,262],{"class":128},[80,1159,1161,1163,1166,1168,1171,1173,1175,1177,1179,1181,1184,1186,1188,1190,1192,1195,1198,1200,1202,1205,1207],{"class":82,"line":1160},14,[80,1162,405],{"class":128},[80,1164,1165],{"class":135},"UForm",[80,1167,410],{"class":128},[80,1169,1170],{"class":258},"schema",[80,1172,416],{"class":128},[80,1174,419],{"class":128},[80,1176,1170],{"class":124},[80,1178,419],{"class":128},[80,1180,410],{"class":128},[80,1182,1183],{"class":258},"state",[80,1185,416],{"class":128},[80,1187,419],{"class":128},[80,1189,1183],{"class":124},[80,1191,419],{"class":128},[80,1193,1194],{"class":128}," @",[80,1196,1197],{"class":258},"submit",[80,1199,416],{"class":128},[80,1201,419],{"class":128},[80,1203,1204],{"class":124},"onSubmit",[80,1206,419],{"class":128},[80,1208,262],{"class":128},[80,1210,1212,1214,1217,1220,1222,1224,1227,1229,1232,1234,1236,1238,1240],{"class":82,"line":1211},15,[80,1213,714],{"class":128},[80,1215,1216],{"class":135},"UFormGroup",[80,1218,1219],{"class":258}," label",[80,1221,416],{"class":128},[80,1223,419],{"class":128},[80,1225,1226],{"class":90},"Email",[80,1228,419],{"class":128},[80,1230,1231],{"class":258}," name",[80,1233,416],{"class":128},[80,1235,419],{"class":128},[80,1237,1101],{"class":90},[80,1239,419],{"class":128},[80,1241,262],{"class":128},[80,1243,1245,1247,1250,1253,1255,1257,1259,1261,1263,1265],{"class":82,"line":1244},16,[80,1246,881],{"class":128},[80,1248,1249],{"class":135},"UInput",[80,1251,1252],{"class":258}," v-model",[80,1254,416],{"class":128},[80,1256,419],{"class":128},[80,1258,1183],{"class":124},[80,1260,1073],{"class":128},[80,1262,1101],{"class":124},[80,1264,419],{"class":128},[80,1266,427],{"class":128},[80,1268,1270,1272,1274],{"class":82,"line":1269},17,[80,1271,899],{"class":128},[80,1273,1216],{"class":135},[80,1275,262],{"class":128},[80,1277,1279],{"class":82,"line":1278},18,[80,1280,908],{"class":124},[80,1282,1284,1286,1288,1290,1292,1294,1297,1299,1301,1303,1305,1308,1310],{"class":82,"line":1283},19,[80,1285,714],{"class":128},[80,1287,1216],{"class":135},[80,1289,1219],{"class":258},[80,1291,416],{"class":128},[80,1293,419],{"class":128},[80,1295,1296],{"class":90},"Password",[80,1298,419],{"class":128},[80,1300,1231],{"class":258},[80,1302,416],{"class":128},[80,1304,419],{"class":128},[80,1306,1307],{"class":90},"password",[80,1309,419],{"class":128},[80,1311,262],{"class":128},[80,1313,1315,1317,1319,1321,1323,1325,1327,1329,1331,1333,1336,1338,1340,1342,1344],{"class":82,"line":1314},20,[80,1316,881],{"class":128},[80,1318,1249],{"class":135},[80,1320,1252],{"class":258},[80,1322,416],{"class":128},[80,1324,419],{"class":128},[80,1326,1183],{"class":124},[80,1328,1073],{"class":128},[80,1330,1307],{"class":124},[80,1332,419],{"class":128},[80,1334,1335],{"class":258}," type",[80,1337,416],{"class":128},[80,1339,419],{"class":128},[80,1341,1307],{"class":90},[80,1343,419],{"class":128},[80,1345,427],{"class":128},[80,1347,1349,1351,1353],{"class":82,"line":1348},21,[80,1350,899],{"class":128},[80,1352,1216],{"class":135},[80,1354,262],{"class":128},[80,1356,1358],{"class":82,"line":1357},22,[80,1359,908],{"class":124},[80,1361,1363,1365,1367,1369,1371,1373,1375,1377,1379,1382,1384,1386],{"class":82,"line":1362},23,[80,1364,714],{"class":128},[80,1366,717],{"class":135},[80,1368,1335],{"class":258},[80,1370,416],{"class":128},[80,1372,419],{"class":128},[80,1374,1197],{"class":90},[80,1376,419],{"class":128},[80,1378,720],{"class":128},[80,1380,1381],{"class":124},"Submit",[80,1383,372],{"class":128},[80,1385,717],{"class":135},[80,1387,262],{"class":128},[80,1389,1391,1393,1395],{"class":82,"line":1390},24,[80,1392,821],{"class":128},[80,1394,1165],{"class":135},[80,1396,262],{"class":128},[80,1398,1400,1402,1404],{"class":82,"line":1399},25,[80,1401,372],{"class":128},[80,1403,398],{"class":135},[80,1405,262],{"class":128},[20,1407,1409],{"id":1408},"theming","Theming",[16,1411,1412,1413,101],{},"Customize your app's appearance with the ",[77,1414,1415],{},"app.config.ts",[70,1417,1419],{"className":104,"code":1418,"language":106,"meta":75,"style":75},"export default defineAppConfig({\n  ui: {\n    primary: 'indigo',\n    gray: 'slate',\n    button: {\n      rounded: 'rounded-full'\n    }\n  }\n})\n",[77,1420,1421,1434,1444,1461,1477,1486,1501,1506,1511],{"__ignoreMap":75},[80,1422,1423,1425,1427,1430,1432],{"class":82,"line":83},[80,1424,114],{"class":113},[80,1426,117],{"class":113},[80,1428,1429],{"class":120}," defineAppConfig",[80,1431,125],{"class":124},[80,1433,129],{"class":128},[80,1435,1436,1439,1441],{"class":82,"line":132},[80,1437,1438],{"class":135},"  ui",[80,1440,101],{"class":128},[80,1442,1443],{"class":128}," {\n",[80,1445,1446,1449,1451,1454,1457,1459],{"class":82,"line":155},[80,1447,1448],{"class":135},"    primary",[80,1450,101],{"class":128},[80,1452,1453],{"class":128}," '",[80,1455,1456],{"class":90},"indigo",[80,1458,144],{"class":128},[80,1460,1038],{"class":128},[80,1462,1463,1466,1468,1470,1473,1475],{"class":82,"line":197},[80,1464,1465],{"class":135},"    gray",[80,1467,101],{"class":128},[80,1469,1453],{"class":128},[80,1471,1472],{"class":90},"slate",[80,1474,144],{"class":128},[80,1476,1038],{"class":128},[80,1478,1479,1482,1484],{"class":82,"line":203},[80,1480,1481],{"class":135},"    button",[80,1483,101],{"class":128},[80,1485,1443],{"class":128},[80,1487,1488,1491,1493,1495,1498],{"class":82,"line":208},[80,1489,1490],{"class":135},"      rounded",[80,1492,101],{"class":128},[80,1494,1453],{"class":128},[80,1496,1497],{"class":90},"rounded-full",[80,1499,1500],{"class":128},"'\n",[80,1502,1503],{"class":82,"line":215},[80,1504,1505],{"class":128},"    }\n",[80,1507,1508],{"class":82,"line":221},[80,1509,1510],{"class":128},"  }\n",[80,1512,1513,1515],{"class":82,"line":226},[80,1514,158],{"class":128},[80,1516,161],{"class":124},[1518,1519,1521],"alert",{"type":1520},"success",[16,1522,1523],{},"All Nuxt UI components respect your theme configuration automatically!",[20,1525,583],{"id":1526},"dark-mode",[16,1528,1529],{},"Dark mode is built-in and works out of the box:",[70,1531,1533],{"className":243,"code":1532,"language":245,"meta":75,"style":75},"\u003Ctemplate>\n  \u003CUButton @click=\"toggleDarkMode\">\n    Toggle Dark Mode\n  \u003C/UButton>\n\u003C/template>\n\n\u003Cscript setup>\nconst colorMode = useColorMode()\n\nconst toggleDarkMode = () => {\n  colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'\n}\n\u003C/script>\n",[77,1534,1535,1543,1565,1570,1578,1586,1590,1600,1614,1618,1634,1681,1685],{"__ignoreMap":75},[80,1536,1537,1539,1541],{"class":82,"line":83},[80,1538,252],{"class":128},[80,1540,398],{"class":135},[80,1542,262],{"class":128},[80,1544,1545,1547,1549,1551,1554,1556,1558,1561,1563],{"class":82,"line":132},[80,1546,405],{"class":128},[80,1548,717],{"class":135},[80,1550,1194],{"class":128},[80,1552,1553],{"class":258},"click",[80,1555,416],{"class":128},[80,1557,419],{"class":128},[80,1559,1560],{"class":124},"toggleDarkMode",[80,1562,419],{"class":128},[80,1564,262],{"class":128},[80,1566,1567],{"class":82,"line":155},[80,1568,1569],{"class":124},"    Toggle Dark Mode\n",[80,1571,1572,1574,1576],{"class":82,"line":197},[80,1573,821],{"class":128},[80,1575,717],{"class":135},[80,1577,262],{"class":128},[80,1579,1580,1582,1584],{"class":82,"line":203},[80,1581,372],{"class":128},[80,1583,398],{"class":135},[80,1585,262],{"class":128},[80,1587,1588],{"class":82,"line":208},[80,1589,212],{"emptyLinePlaceholder":211},[80,1591,1592,1594,1596,1598],{"class":82,"line":215},[80,1593,252],{"class":128},[80,1595,255],{"class":135},[80,1597,259],{"class":258},[80,1599,262],{"class":128},[80,1601,1602,1604,1607,1609,1612],{"class":82,"line":221},[80,1603,267],{"class":258},[80,1605,1606],{"class":124}," colorMode ",[80,1608,416],{"class":128},[80,1610,1611],{"class":120}," useColorMode",[80,1613,363],{"class":124},[80,1615,1616],{"class":82,"line":226},[80,1617,212],{"emptyLinePlaceholder":211},[80,1619,1620,1622,1625,1627,1629,1632],{"class":82,"line":945},[80,1621,267],{"class":258},[80,1623,1624],{"class":124}," toggleDarkMode ",[80,1626,416],{"class":128},[80,1628,304],{"class":128},[80,1630,1631],{"class":258}," =>",[80,1633,1443],{"class":128},[80,1635,1636,1639,1641,1644,1646,1649,1651,1653,1656,1658,1661,1663,1666,1668,1671,1673,1675,1677,1679],{"class":82,"line":963},[80,1637,1638],{"class":124},"  colorMode",[80,1640,1073],{"class":128},[80,1642,1643],{"class":124},"preference",[80,1645,283],{"class":128},[80,1647,1648],{"class":124}," colorMode",[80,1650,1073],{"class":128},[80,1652,413],{"class":124},[80,1654,1655],{"class":128}," ===",[80,1657,1453],{"class":128},[80,1659,1660],{"class":90},"dark",[80,1662,144],{"class":128},[80,1664,1665],{"class":128}," ?",[80,1667,1453],{"class":128},[80,1669,1670],{"class":90},"light",[80,1672,144],{"class":128},[80,1674,410],{"class":128},[80,1676,1453],{"class":128},[80,1678,1660],{"class":90},[80,1680,1500],{"class":128},[80,1682,1683],{"class":82,"line":972},[80,1684,474],{"class":128},[80,1686,1687,1689,1691],{"class":82,"line":981},[80,1688,372],{"class":128},[80,1690,255],{"class":135},[80,1692,262],{"class":128},[20,1694,589],{"id":1695},"icons",[16,1697,1698],{},"Access thousands of icons from Iconify:",[70,1700,1702],{"className":243,"code":1701,"language":245,"meta":75,"style":75},"\u003Ctemplate>\n  \u003Cdiv class=\"flex gap-2\">\n    \u003CUIcon name=\"i-heroicons-home\" />\n    \u003CUIcon name=\"i-heroicons-user\" />\n    \u003CUIcon name=\"i-heroicons-cog\" />\n  \u003C/div>\n\u003C/template>\n",[77,1703,1704,1712,1730,1750,1769,1788,1796],{"__ignoreMap":75},[80,1705,1706,1708,1710],{"class":82,"line":83},[80,1707,252],{"class":128},[80,1709,398],{"class":135},[80,1711,262],{"class":128},[80,1713,1714,1716,1718,1720,1722,1724,1726,1728],{"class":82,"line":132},[80,1715,405],{"class":128},[80,1717,695],{"class":135},[80,1719,698],{"class":258},[80,1721,416],{"class":128},[80,1723,419],{"class":128},[80,1725,705],{"class":90},[80,1727,419],{"class":128},[80,1729,262],{"class":128},[80,1731,1732,1734,1737,1739,1741,1743,1746,1748],{"class":82,"line":155},[80,1733,714],{"class":128},[80,1735,1736],{"class":135},"UIcon",[80,1738,1231],{"class":258},[80,1740,416],{"class":128},[80,1742,419],{"class":128},[80,1744,1745],{"class":90},"i-heroicons-home",[80,1747,419],{"class":128},[80,1749,427],{"class":128},[80,1751,1752,1754,1756,1758,1760,1762,1765,1767],{"class":82,"line":197},[80,1753,714],{"class":128},[80,1755,1736],{"class":135},[80,1757,1231],{"class":258},[80,1759,416],{"class":128},[80,1761,419],{"class":128},[80,1763,1764],{"class":90},"i-heroicons-user",[80,1766,419],{"class":128},[80,1768,427],{"class":128},[80,1770,1771,1773,1775,1777,1779,1781,1784,1786],{"class":82,"line":203},[80,1772,714],{"class":128},[80,1774,1736],{"class":135},[80,1776,1231],{"class":258},[80,1778,416],{"class":128},[80,1780,419],{"class":128},[80,1782,1783],{"class":90},"i-heroicons-cog",[80,1785,419],{"class":128},[80,1787,427],{"class":128},[80,1789,1790,1792,1794],{"class":82,"line":208},[80,1791,821],{"class":128},[80,1793,695],{"class":135},[80,1795,262],{"class":128},[80,1797,1798,1800,1802],{"class":82,"line":215},[80,1799,372],{"class":128},[80,1801,398],{"class":135},[80,1803,262],{"class":128},[592,1805,1808],{"title":1806,"type":1807},"Performance Note","warning",[16,1809,1810],{},"Icons are automatically optimized and only the ones you use are included in your bundle!",[20,1812,1814],{"id":1813},"best-practices","Best Practices",[1816,1817,1818,1824,1830,1838,1844],"ol",{},[31,1819,1820,1823],{},[34,1821,1822],{},"Use Composition API",": Leverage Vue 3's Composition API for better code organization",[31,1825,1826,1829],{},[34,1827,1828],{},"Type Everything",": Take advantage of TypeScript for better DX",[31,1831,1832,1835,1836],{},[34,1833,1834],{},"Customize Wisely",": Override only what you need in ",[77,1837,1415],{},[31,1839,1840,1843],{},[34,1841,1842],{},"Accessibility First",": Always test with keyboard navigation and screen readers",[31,1845,1846,1849],{},[34,1847,1848],{},"Performance",": Use lazy loading for heavy components",[20,1851,505],{"id":504},[16,1853,1854],{},"Nuxt UI provides a solid foundation for building modern web applications. With its comprehensive component library, excellent TypeScript support, and seamless Nuxt integration, you can focus on building features rather than styling components.",[16,1856,1857],{},"Start building beautiful UIs today! 🎨",[513,1859,1860],{},"html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":75,"searchDepth":132,"depth":132,"links":1862},[1863,1864,1865,1870,1871,1872,1873,1874],{"id":554,"depth":132,"text":555},{"id":601,"depth":132,"text":602},{"id":667,"depth":132,"text":668,"children":1866},[1867,1868,1869],{"id":671,"depth":155,"text":672},{"id":836,"depth":155,"text":837},{"id":990,"depth":155,"text":991},{"id":1408,"depth":132,"text":1409},{"id":1526,"depth":132,"text":583},{"id":1695,"depth":132,"text":589},{"id":1813,"depth":132,"text":1814},{"id":504,"depth":132,"text":505},"2024-11-08","Explore Nuxt UI components and learn how to create stunning, accessible user interfaces with minimal effort.",{},"/en/blog/nuxt-ui-components",{"title":543,"description":1876},"en/blog/nuxt-ui-components",[538,1882,1883,1884],"ui","design","components","kPWuU_prTh2aJjfFweS6TUL7BJF4b9lUbn_z_cVmoWg",{"id":1887,"title":1888,"author":7,"body":1889,"date":1875,"description":2852,"draft":530,"extension":531,"image":532,"meta":2853,"navigation":211,"path":2854,"seo":2855,"stem":2856,"tags":2857,"updatedAt":532,"__hash__":2859},"blog/en/blog/typescript-best-practices.md","TypeScript Best Practices for Vue 3",{"type":9,"value":1890,"toc":2842},[1891,1894,1897,1901,1904,2012,2016,2019,2201,2205,2208,2336,2340,2343,2473,2477,2480,2627,2631,2634,2744,2748,2751,2831,2833,2836,2839],[12,1892,1888],{"id":1893},"typescript-best-practices-for-vue-3",[16,1895,1896],{},"TypeScript has become an essential tool for building robust Vue 3 applications. In this guide, we'll explore best practices for leveraging TypeScript's type system with Vue 3's Composition API.",[20,1898,1900],{"id":1899},"type-safe-props","Type-Safe Props",[16,1902,1903],{},"Define props with proper TypeScript interfaces:",[70,1905,1907],{"className":243,"code":1906,"language":245,"meta":75,"style":75},"\u003Cscript setup lang=\"ts\">\ninterface Props {\n  title: string\n  count?: number\n  items: string[]\n}\n\nconst props = defineProps\u003CProps>()\n\u003C/script>\n",[77,1908,1909,1931,1941,1951,1962,1975,1979,1983,2004],{"__ignoreMap":75},[80,1910,1911,1913,1915,1917,1920,1922,1924,1927,1929],{"class":82,"line":83},[80,1912,252],{"class":128},[80,1914,255],{"class":135},[80,1916,259],{"class":258},[80,1918,1919],{"class":258}," lang",[80,1921,416],{"class":128},[80,1923,419],{"class":128},[80,1925,1926],{"class":90},"ts",[80,1928,419],{"class":128},[80,1930,262],{"class":128},[80,1932,1933,1936,1939],{"class":82,"line":132},[80,1934,1935],{"class":258},"interface",[80,1937,1938],{"class":86}," Props",[80,1940,1443],{"class":128},[80,1942,1943,1946,1948],{"class":82,"line":155},[80,1944,1945],{"class":135},"  title",[80,1947,101],{"class":128},[80,1949,1950],{"class":86}," string\n",[80,1952,1953,1956,1959],{"class":82,"line":197},[80,1954,1955],{"class":135},"  count",[80,1957,1958],{"class":128},"?:",[80,1960,1961],{"class":86}," number\n",[80,1963,1964,1967,1969,1972],{"class":82,"line":203},[80,1965,1966],{"class":135},"  items",[80,1968,101],{"class":128},[80,1970,1971],{"class":86}," string",[80,1973,1974],{"class":124},"[]\n",[80,1976,1977],{"class":82,"line":208},[80,1978,474],{"class":128},[80,1980,1981],{"class":82,"line":215},[80,1982,212],{"emptyLinePlaceholder":211},[80,1984,1985,1987,1990,1992,1995,1997,2000,2002],{"class":82,"line":221},[80,1986,267],{"class":258},[80,1988,1989],{"class":124}," props ",[80,1991,416],{"class":128},[80,1993,1994],{"class":120}," defineProps",[80,1996,252],{"class":128},[80,1998,1999],{"class":86},"Props",[80,2001,720],{"class":128},[80,2003,363],{"class":124},[80,2005,2006,2008,2010],{"class":82,"line":226},[80,2007,372],{"class":128},[80,2009,255],{"class":135},[80,2011,262],{"class":128},[20,2013,2015],{"id":2014},"typed-composables","Typed Composables",[16,2017,2018],{},"Create reusable composables with full type safety:",[70,2020,2022],{"className":104,"code":2021,"language":106,"meta":75,"style":75},"export function useCounter(initialValue = 0) {\n  const count = ref\u003Cnumber>(initialValue)\n  \n  const increment = (): void => {\n    count.value++\n  }\n  \n  const decrement = (): void => {\n    count.value--\n  }\n  \n  return {\n    count: readonly(count),\n    increment,\n    decrement\n  }\n}\n",[77,2023,2024,2050,2076,2081,2100,2112,2116,2120,2137,2148,2152,2156,2163,2181,2188,2193,2197],{"__ignoreMap":75},[80,2025,2026,2028,2031,2034,2036,2040,2042,2045,2048],{"class":82,"line":83},[80,2027,114],{"class":113},[80,2029,2030],{"class":258}," function",[80,2032,2033],{"class":120}," useCounter",[80,2035,125],{"class":128},[80,2037,2039],{"class":2038},"sHdIc","initialValue",[80,2041,283],{"class":128},[80,2043,2044],{"class":347}," 0",[80,2046,2047],{"class":128},")",[80,2049,1443],{"class":128},[80,2051,2052,2055,2058,2060,2063,2065,2068,2070,2072,2074],{"class":82,"line":132},[80,2053,2054],{"class":258},"  const",[80,2056,2057],{"class":124}," count",[80,2059,283],{"class":128},[80,2061,2062],{"class":120}," ref",[80,2064,252],{"class":128},[80,2066,2067],{"class":86},"number",[80,2069,720],{"class":128},[80,2071,125],{"class":135},[80,2073,2039],{"class":124},[80,2075,161],{"class":135},[80,2077,2078],{"class":82,"line":155},[80,2079,2080],{"class":135},"  \n",[80,2082,2083,2085,2088,2090,2093,2096,2098],{"class":82,"line":197},[80,2084,2054],{"class":258},[80,2086,2087],{"class":124}," increment",[80,2089,283],{"class":128},[80,2091,2092],{"class":128}," ():",[80,2094,2095],{"class":86}," void",[80,2097,1631],{"class":258},[80,2099,1443],{"class":128},[80,2101,2102,2105,2107,2109],{"class":82,"line":203},[80,2103,2104],{"class":124},"    count",[80,2106,1073],{"class":128},[80,2108,413],{"class":124},[80,2110,2111],{"class":128},"++\n",[80,2113,2114],{"class":82,"line":208},[80,2115,1510],{"class":128},[80,2117,2118],{"class":82,"line":215},[80,2119,2080],{"class":135},[80,2121,2122,2124,2127,2129,2131,2133,2135],{"class":82,"line":221},[80,2123,2054],{"class":258},[80,2125,2126],{"class":124}," decrement",[80,2128,283],{"class":128},[80,2130,2092],{"class":128},[80,2132,2095],{"class":86},[80,2134,1631],{"class":258},[80,2136,1443],{"class":128},[80,2138,2139,2141,2143,2145],{"class":82,"line":226},[80,2140,2104],{"class":124},[80,2142,1073],{"class":128},[80,2144,413],{"class":124},[80,2146,2147],{"class":128},"--\n",[80,2149,2150],{"class":82,"line":945},[80,2151,1510],{"class":128},[80,2153,2154],{"class":82,"line":963},[80,2155,2080],{"class":135},[80,2157,2158,2161],{"class":82,"line":972},[80,2159,2160],{"class":113},"  return",[80,2162,1443],{"class":128},[80,2164,2165,2167,2169,2172,2174,2177,2179],{"class":82,"line":981},[80,2166,2104],{"class":135},[80,2168,101],{"class":128},[80,2170,2171],{"class":120}," readonly",[80,2173,125],{"class":135},[80,2175,2176],{"class":124},"count",[80,2178,2047],{"class":135},[80,2180,1038],{"class":128},[80,2182,2183,2186],{"class":82,"line":1160},[80,2184,2185],{"class":124},"    increment",[80,2187,1038],{"class":128},[80,2189,2190],{"class":82,"line":1211},[80,2191,2192],{"class":124},"    decrement\n",[80,2194,2195],{"class":82,"line":1244},[80,2196,1510],{"class":128},[80,2198,2199],{"class":82,"line":1269},[80,2200,474],{"class":128},[20,2202,2204],{"id":2203},"generic-components","Generic Components",[16,2206,2207],{},"Build flexible components with generics:",[70,2209,2211],{"className":243,"code":2210,"language":245,"meta":75,"style":75},"\u003Cscript setup lang=\"ts\" generic=\"T extends { id: string }\">\ninterface Props {\n  items: T[]\n  onSelect: (item: T) => void\n}\n\nconst props = defineProps\u003CProps>()\n\u003C/script>\n",[77,2212,2213,2259,2267,2278,2302,2306,2310,2328],{"__ignoreMap":75},[80,2214,2215,2217,2219,2221,2223,2225,2227,2229,2231,2234,2236,2238,2241,2244,2246,2249,2251,2253,2255,2257],{"class":82,"line":83},[80,2216,252],{"class":128},[80,2218,255],{"class":135},[80,2220,259],{"class":258},[80,2222,1919],{"class":258},[80,2224,416],{"class":128},[80,2226,419],{"class":128},[80,2228,1926],{"class":90},[80,2230,419],{"class":128},[80,2232,2233],{"class":258}," generic",[80,2235,416],{"class":128},[80,2237,419],{"class":128},[80,2239,2240],{"class":86},"T",[80,2242,2243],{"class":258}," extends",[80,2245,270],{"class":128},[80,2247,2248],{"class":135}," id",[80,2250,101],{"class":128},[80,2252,1971],{"class":86},[80,2254,351],{"class":128},[80,2256,419],{"class":128},[80,2258,262],{"class":128},[80,2260,2261,2263,2265],{"class":82,"line":132},[80,2262,1935],{"class":258},[80,2264,1938],{"class":86},[80,2266,1443],{"class":128},[80,2268,2269,2271,2273,2276],{"class":82,"line":155},[80,2270,1966],{"class":135},[80,2272,101],{"class":128},[80,2274,2275],{"class":86}," T",[80,2277,1974],{"class":124},[80,2279,2280,2283,2285,2288,2291,2293,2295,2297,2299],{"class":82,"line":197},[80,2281,2282],{"class":135},"  onSelect",[80,2284,101],{"class":128},[80,2286,2287],{"class":128}," (",[80,2289,2290],{"class":2038},"item",[80,2292,101],{"class":128},[80,2294,2275],{"class":86},[80,2296,2047],{"class":128},[80,2298,1631],{"class":258},[80,2300,2301],{"class":86}," void\n",[80,2303,2304],{"class":82,"line":203},[80,2305,474],{"class":128},[80,2307,2308],{"class":82,"line":208},[80,2309,212],{"emptyLinePlaceholder":211},[80,2311,2312,2314,2316,2318,2320,2322,2324,2326],{"class":82,"line":215},[80,2313,267],{"class":258},[80,2315,1989],{"class":124},[80,2317,416],{"class":128},[80,2319,1994],{"class":120},[80,2321,252],{"class":128},[80,2323,1999],{"class":86},[80,2325,720],{"class":128},[80,2327,363],{"class":124},[80,2329,2330,2332,2334],{"class":82,"line":221},[80,2331,372],{"class":128},[80,2333,255],{"class":135},[80,2335,262],{"class":128},[20,2337,2339],{"id":2338},"type-safe-event-emits","Type-Safe Event Emits",[16,2341,2342],{},"Define emits with proper typing:",[70,2344,2346],{"className":243,"code":2345,"language":245,"meta":75,"style":75},"\u003Cscript setup lang=\"ts\">\ninterface Emits {\n  (e: 'update', value: string): void\n  (e: 'delete', id: number): void\n}\n\nconst emit = defineEmits\u003CEmits>()\n\u003C/script>\n",[77,2347,2348,2368,2377,2408,2436,2440,2444,2465],{"__ignoreMap":75},[80,2349,2350,2352,2354,2356,2358,2360,2362,2364,2366],{"class":82,"line":83},[80,2351,252],{"class":128},[80,2353,255],{"class":135},[80,2355,259],{"class":258},[80,2357,1919],{"class":258},[80,2359,416],{"class":128},[80,2361,419],{"class":128},[80,2363,1926],{"class":90},[80,2365,419],{"class":128},[80,2367,262],{"class":128},[80,2369,2370,2372,2375],{"class":82,"line":132},[80,2371,1935],{"class":258},[80,2373,2374],{"class":86}," Emits",[80,2376,1443],{"class":128},[80,2378,2379,2382,2385,2387,2389,2392,2394,2396,2399,2401,2403,2406],{"class":82,"line":155},[80,2380,2381],{"class":128},"  (",[80,2383,2384],{"class":2038},"e",[80,2386,101],{"class":128},[80,2388,1453],{"class":128},[80,2390,2391],{"class":90},"update",[80,2393,144],{"class":128},[80,2395,301],{"class":128},[80,2397,2398],{"class":2038}," value",[80,2400,101],{"class":128},[80,2402,1971],{"class":86},[80,2404,2405],{"class":128},"):",[80,2407,2301],{"class":86},[80,2409,2410,2412,2414,2416,2418,2421,2423,2425,2427,2429,2432,2434],{"class":82,"line":197},[80,2411,2381],{"class":128},[80,2413,2384],{"class":2038},[80,2415,101],{"class":128},[80,2417,1453],{"class":128},[80,2419,2420],{"class":90},"delete",[80,2422,144],{"class":128},[80,2424,301],{"class":128},[80,2426,2248],{"class":2038},[80,2428,101],{"class":128},[80,2430,2431],{"class":86}," number",[80,2433,2405],{"class":128},[80,2435,2301],{"class":86},[80,2437,2438],{"class":82,"line":203},[80,2439,474],{"class":128},[80,2441,2442],{"class":82,"line":208},[80,2443,212],{"emptyLinePlaceholder":211},[80,2445,2446,2448,2451,2453,2456,2458,2461,2463],{"class":82,"line":215},[80,2447,267],{"class":258},[80,2449,2450],{"class":124}," emit ",[80,2452,416],{"class":128},[80,2454,2455],{"class":120}," defineEmits",[80,2457,252],{"class":128},[80,2459,2460],{"class":86},"Emits",[80,2462,720],{"class":128},[80,2464,363],{"class":124},[80,2466,2467,2469,2471],{"class":82,"line":221},[80,2468,372],{"class":128},[80,2470,255],{"class":135},[80,2472,262],{"class":128},[20,2474,2476],{"id":2475},"utility-types","Utility Types",[16,2478,2479],{},"Leverage TypeScript utility types:",[70,2481,2483],{"className":104,"code":2482,"language":106,"meta":75,"style":75},"// Pick specific properties\ntype UserPreview = Pick\u003CUser, 'id' | 'name' | 'email'>\n\n// Make all properties optional\ntype PartialUser = Partial\u003CUser>\n\n// Make all properties required\ntype RequiredUser = Required\u003CUser>\n\n// Exclude properties\ntype UserWithoutPassword = Omit\u003CUser, 'password'>\n",[77,2484,2485,2491,2538,2542,2547,2565,2569,2574,2592,2596,2601],{"__ignoreMap":75},[80,2486,2487],{"class":82,"line":83},[80,2488,2490],{"class":2489},"sHwdD","// Pick specific properties\n",[80,2492,2493,2496,2499,2501,2504,2506,2509,2511,2513,2516,2518,2521,2523,2526,2528,2530,2532,2534,2536],{"class":82,"line":132},[80,2494,2495],{"class":258},"type",[80,2497,2498],{"class":86}," UserPreview",[80,2500,283],{"class":128},[80,2502,2503],{"class":86}," Pick",[80,2505,252],{"class":128},[80,2507,2508],{"class":86},"User",[80,2510,301],{"class":128},[80,2512,1453],{"class":128},[80,2514,2515],{"class":90},"id",[80,2517,144],{"class":128},[80,2519,2520],{"class":128}," |",[80,2522,1453],{"class":128},[80,2524,2525],{"class":90},"name",[80,2527,144],{"class":128},[80,2529,2520],{"class":128},[80,2531,1453],{"class":128},[80,2533,1101],{"class":90},[80,2535,144],{"class":128},[80,2537,262],{"class":128},[80,2539,2540],{"class":82,"line":155},[80,2541,212],{"emptyLinePlaceholder":211},[80,2543,2544],{"class":82,"line":197},[80,2545,2546],{"class":2489},"// Make all properties optional\n",[80,2548,2549,2551,2554,2556,2559,2561,2563],{"class":82,"line":203},[80,2550,2495],{"class":258},[80,2552,2553],{"class":86}," PartialUser",[80,2555,283],{"class":128},[80,2557,2558],{"class":86}," Partial",[80,2560,252],{"class":128},[80,2562,2508],{"class":86},[80,2564,262],{"class":128},[80,2566,2567],{"class":82,"line":208},[80,2568,212],{"emptyLinePlaceholder":211},[80,2570,2571],{"class":82,"line":215},[80,2572,2573],{"class":2489},"// Make all properties required\n",[80,2575,2576,2578,2581,2583,2586,2588,2590],{"class":82,"line":221},[80,2577,2495],{"class":258},[80,2579,2580],{"class":86}," RequiredUser",[80,2582,283],{"class":128},[80,2584,2585],{"class":86}," Required",[80,2587,252],{"class":128},[80,2589,2508],{"class":86},[80,2591,262],{"class":128},[80,2593,2594],{"class":82,"line":226},[80,2595,212],{"emptyLinePlaceholder":211},[80,2597,2598],{"class":82,"line":945},[80,2599,2600],{"class":2489},"// Exclude properties\n",[80,2602,2603,2605,2608,2610,2613,2615,2617,2619,2621,2623,2625],{"class":82,"line":963},[80,2604,2495],{"class":258},[80,2606,2607],{"class":86}," UserWithoutPassword",[80,2609,283],{"class":128},[80,2611,2612],{"class":86}," Omit",[80,2614,252],{"class":128},[80,2616,2508],{"class":86},[80,2618,301],{"class":128},[80,2620,1453],{"class":128},[80,2622,1307],{"class":90},[80,2624,144],{"class":128},[80,2626,262],{"class":128},[20,2628,2630],{"id":2629},"type-guards","Type Guards",[16,2632,2633],{},"Implement type guards for runtime type checking:",[70,2635,2637],{"className":104,"code":2636,"language":106,"meta":75,"style":75},"function isUser(value: unknown): value is User {\n  return (\n    typeof value === 'object' &&\n    value !== null &&\n    'id' in value &&\n    'name' in value\n  )\n}\n",[77,2638,2639,2668,2675,2693,2706,2722,2735,2740],{"__ignoreMap":75},[80,2640,2641,2644,2647,2649,2651,2653,2656,2658,2660,2663,2666],{"class":82,"line":83},[80,2642,2643],{"class":258},"function",[80,2645,2646],{"class":120}," isUser",[80,2648,125],{"class":128},[80,2650,413],{"class":2038},[80,2652,101],{"class":128},[80,2654,2655],{"class":86}," unknown",[80,2657,2405],{"class":128},[80,2659,2398],{"class":2038},[80,2661,2662],{"class":128}," is",[80,2664,2665],{"class":86}," User",[80,2667,1443],{"class":128},[80,2669,2670,2672],{"class":82,"line":132},[80,2671,2160],{"class":113},[80,2673,2674],{"class":135}," (\n",[80,2676,2677,2680,2682,2684,2686,2688,2690],{"class":82,"line":155},[80,2678,2679],{"class":128},"    typeof",[80,2681,2398],{"class":124},[80,2683,1655],{"class":128},[80,2685,1453],{"class":128},[80,2687,1076],{"class":90},[80,2689,144],{"class":128},[80,2691,2692],{"class":128}," &&\n",[80,2694,2695,2698,2701,2704],{"class":82,"line":197},[80,2696,2697],{"class":124},"    value",[80,2699,2700],{"class":128}," !==",[80,2702,2703],{"class":128}," null",[80,2705,2692],{"class":128},[80,2707,2708,2711,2713,2715,2718,2720],{"class":82,"line":203},[80,2709,2710],{"class":128},"    '",[80,2712,2515],{"class":90},[80,2714,144],{"class":128},[80,2716,2717],{"class":128}," in",[80,2719,2398],{"class":124},[80,2721,2692],{"class":128},[80,2723,2724,2726,2728,2730,2732],{"class":82,"line":208},[80,2725,2710],{"class":128},[80,2727,2525],{"class":90},[80,2729,144],{"class":128},[80,2731,2717],{"class":128},[80,2733,2734],{"class":2038}," value\n",[80,2736,2737],{"class":82,"line":215},[80,2738,2739],{"class":135},"  )\n",[80,2741,2742],{"class":82,"line":221},[80,2743,474],{"class":128},[20,2745,2747],{"id":2746},"async-data-typing","Async Data Typing",[16,2749,2750],{},"Type your async data properly:",[70,2752,2754],{"className":104,"code":2753,"language":106,"meta":75,"style":75},"const { data, pending, error } = await useAsyncData\u003CUser[]>(\n  'users',\n  () => $fetch('/api/users')\n)\n",[77,2755,2756,2794,2806,2827],{"__ignoreMap":75},[80,2757,2758,2760,2762,2764,2766,2769,2771,2774,2776,2778,2780,2782,2784,2786,2789,2791],{"class":82,"line":83},[80,2759,267],{"class":258},[80,2761,270],{"class":128},[80,2763,273],{"class":124},[80,2765,301],{"class":128},[80,2767,2768],{"class":124}," pending",[80,2770,301],{"class":128},[80,2772,2773],{"class":124}," error ",[80,2775,158],{"class":128},[80,2777,283],{"class":128},[80,2779,286],{"class":113},[80,2781,289],{"class":120},[80,2783,252],{"class":128},[80,2785,2508],{"class":86},[80,2787,2788],{"class":124},"[]",[80,2790,720],{"class":128},[80,2792,2793],{"class":124},"(\n",[80,2795,2796,2799,2802,2804],{"class":82,"line":132},[80,2797,2798],{"class":128},"  '",[80,2800,2801],{"class":90},"users",[80,2803,144],{"class":128},[80,2805,1038],{"class":128},[80,2807,2808,2811,2813,2816,2818,2820,2823,2825],{"class":82,"line":155},[80,2809,2810],{"class":128},"  ()",[80,2812,1631],{"class":258},[80,2814,2815],{"class":120}," $fetch",[80,2817,125],{"class":124},[80,2819,144],{"class":128},[80,2821,2822],{"class":90},"/api/users",[80,2824,144],{"class":128},[80,2826,161],{"class":124},[80,2828,2829],{"class":82,"line":197},[80,2830,161],{"class":124},[20,2832,505],{"id":504},[16,2834,2835],{},"TypeScript enhances Vue 3 development by providing type safety, better IDE support, and improved code maintainability. By following these best practices, you'll build more robust and maintainable applications.",[16,2837,2838],{},"Remember: TypeScript is a tool to help you, not hinder you. Start simple and gradually add more type safety as needed.",[513,2840,2841],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}",{"title":75,"searchDepth":132,"depth":132,"links":2843},[2844,2845,2846,2847,2848,2849,2850,2851],{"id":1899,"depth":132,"text":1900},{"id":2014,"depth":132,"text":2015},{"id":2203,"depth":132,"text":2204},{"id":2338,"depth":132,"text":2339},{"id":2475,"depth":132,"text":2476},{"id":2629,"depth":132,"text":2630},{"id":2746,"depth":132,"text":2747},{"id":504,"depth":132,"text":505},"Discover essential TypeScript patterns and best practices for building type-safe Vue 3 applications with Composition API.",{},"/en/blog/typescript-best-practices",{"title":1888,"description":2852},"en/blog/typescript-best-practices",[106,245,1813,2858],"composition-api","NxG4PL0YCn5-b_36dGDQYzqNfgEpUDesE76XuhzAg28",1765896285165]