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