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