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