[{"data":1,"prerenderedAt":2218},["ShallowReactive",2],{"blog-fixing-vue-sfc-templates-for-react":3},{"id":4,"title":5,"author":6,"authorSlug":7,"body":8,"date":2205,"description":2206,"extension":2207,"faq":7,"featured":2208,"image":2209,"meta":2210,"navigation":53,"path":2211,"readTime":7,"seo":2212,"stem":2213,"tags":2214,"__hash__":2217},"blog\u002Fblog\u002Ffixing-vue-sfc-templates-for-react.md","Fixing Vue SFC templates for React developers","Epicmax Team",null,{"type":9,"value":10,"toc":2198},"minimark",[11,15,20,23,26,29,303,306,525,529,540,544,551,570,577,588,679,693,894,904,910,1043,1049,1245,1249,1252,1488,1502,1592,1605,1839,1862,2176,2180,2189,2194],[12,13,14],"p",{},"Moving from React to Vue.js can be tricky. This article shares tips to help you get comfortable with Vue, especially with reusing templates. Learn how to make your Vue.js development smoother with VueUse.",[16,17,19],"h2",{"id":18},"the-pain-with-vue-templates","The pain with Vue templates",[12,21,22],{},"One of the most common bummers with templates comes from the inability to define a template part and reuse it across the template — for example, when some block needs to appear in different places in the markup depending on a condition.",[12,24,25],{},"It doesn't always make sense to extract a part into a separate component of its own. Even with a separate component it's quite common that they need to be passed numerous props, and simply duplicating prop declarations multiple times is too much repetition that grows your template and leaves you open to bugs: when a new prop needs to be added to all of the occurrences it's easy to overlook one (and then debug it for half an hour 🥲).",[12,27,28],{},"Let's consider a case where you need to render some template block in the header or footer depending on whether the view is compact. This is not a problem in React, where you can easily do something like this:",[30,31,36],"pre",{"className":32,"code":33,"language":34,"meta":35,"style":35},"language-jsx shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u002F\u002F Component.jsx\n\nconst block = (\n  \u003Cdiv\n    class=\"block\"\n    onClick={handleClick}\n  >\n    Block that should be reused\n  \u003C\u002Fdiv>\n);\n\nreturn (\n  \u003Cdiv class=\"container\">\n    \u003Cdiv class=\"header\">\n      Header content\n      {!isCompact && block}\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"footer\">\n      Footer content\n      {isCompact && block}\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n);\n","jsx","",[37,38,39,48,55,73,83,101,116,122,128,140,149,154,163,184,205,211,228,238,258,264,278,287,296],"code",{"__ignoreMap":35},[40,41,44],"span",{"class":42,"line":43},"line",1,[40,45,47],{"class":46},"sHwdD","\u002F\u002F Component.jsx\n",[40,49,51],{"class":42,"line":50},2,[40,52,54],{"emptyLinePlaceholder":53},true,"\n",[40,56,58,62,66,70],{"class":42,"line":57},3,[40,59,61],{"class":60},"spNyl","const",[40,63,65],{"class":64},"sTEyZ"," block ",[40,67,69],{"class":68},"sMK4o","=",[40,71,72],{"class":64}," (\n",[40,74,76,79],{"class":42,"line":75},4,[40,77,78],{"class":68},"  \u003C",[40,80,82],{"class":81},"swJcz","div\n",[40,84,86,89,91,94,98],{"class":42,"line":85},5,[40,87,88],{"class":60},"    class",[40,90,69],{"class":68},[40,92,93],{"class":68},"\"",[40,95,97],{"class":96},"sfazB","block",[40,99,100],{"class":68},"\"\n",[40,102,104,107,110,113],{"class":42,"line":103},6,[40,105,106],{"class":60},"    onClick",[40,108,109],{"class":68},"={",[40,111,112],{"class":64},"handleClick",[40,114,115],{"class":68},"}\n",[40,117,119],{"class":42,"line":118},7,[40,120,121],{"class":68},"  >\n",[40,123,125],{"class":42,"line":124},8,[40,126,127],{"class":64},"    Block that should be reused\n",[40,129,131,134,137],{"class":42,"line":130},9,[40,132,133],{"class":68},"  \u003C\u002F",[40,135,136],{"class":81},"div",[40,138,139],{"class":68},">\n",[40,141,143,146],{"class":42,"line":142},10,[40,144,145],{"class":64},")",[40,147,148],{"class":68},";\n",[40,150,152],{"class":42,"line":151},11,[40,153,54],{"emptyLinePlaceholder":53},[40,155,157,161],{"class":42,"line":156},12,[40,158,160],{"class":159},"s7zQu","return",[40,162,72],{"class":64},[40,164,166,168,170,173,175,177,180,182],{"class":42,"line":165},13,[40,167,78],{"class":68},[40,169,136],{"class":81},[40,171,172],{"class":60}," class",[40,174,69],{"class":68},[40,176,93],{"class":68},[40,178,179],{"class":96},"container",[40,181,93],{"class":68},[40,183,139],{"class":68},[40,185,187,190,192,194,196,198,201,203],{"class":42,"line":186},14,[40,188,189],{"class":68},"    \u003C",[40,191,136],{"class":81},[40,193,172],{"class":60},[40,195,69],{"class":68},[40,197,93],{"class":68},[40,199,200],{"class":96},"header",[40,202,93],{"class":68},[40,204,139],{"class":68},[40,206,208],{"class":42,"line":207},15,[40,209,210],{"class":64},"      Header content\n",[40,212,214,217,220,223,226],{"class":42,"line":213},16,[40,215,216],{"class":68},"      {!",[40,218,219],{"class":64},"isCompact ",[40,221,222],{"class":68},"&&",[40,224,225],{"class":64}," block",[40,227,115],{"class":68},[40,229,231,234,236],{"class":42,"line":230},17,[40,232,233],{"class":68},"    \u003C\u002F",[40,235,136],{"class":81},[40,237,139],{"class":68},[40,239,241,243,245,247,249,251,254,256],{"class":42,"line":240},18,[40,242,189],{"class":68},[40,244,136],{"class":81},[40,246,172],{"class":60},[40,248,69],{"class":68},[40,250,93],{"class":68},[40,252,253],{"class":96},"footer",[40,255,93],{"class":68},[40,257,139],{"class":68},[40,259,261],{"class":42,"line":260},19,[40,262,263],{"class":64},"      Footer content\n",[40,265,267,270,272,274,276],{"class":42,"line":266},20,[40,268,269],{"class":68},"      {",[40,271,219],{"class":64},[40,273,222],{"class":68},[40,275,225],{"class":64},[40,277,115],{"class":68},[40,279,281,283,285],{"class":42,"line":280},21,[40,282,233],{"class":68},[40,284,136],{"class":81},[40,286,139],{"class":68},[40,288,290,292,294],{"class":42,"line":289},22,[40,291,133],{"class":68},[40,293,136],{"class":81},[40,295,139],{"class":68},[40,297,299,301],{"class":42,"line":298},23,[40,300,145],{"class":64},[40,302,148],{"class":68},[12,304,305],{},"With Vue, by default you have no other option but to duplicate the block:",[30,307,311],{"className":308,"code":309,"language":310,"meta":35,"style":35},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Ctemplate>\n  \u003Cdiv class=\"container\">\n    \u003Cdiv class=\"header\">\n      Header content\n      \u003Cdiv v-if=\"!isCompact\" class=\"block\" @click=\"handleClick\">\n        Block that should be reused\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"footer\">\n      Footer content\n      \u003Cdiv v-if=\"isCompact\" class=\"block\" @click=\"handleClick\">\n        Block that should be reused\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","vue",[37,312,313,323,341,359,363,405,410,419,427,445,449,488,492,500,508,516],{"__ignoreMap":35},[40,314,315,318,321],{"class":42,"line":43},[40,316,317],{"class":68},"\u003C",[40,319,320],{"class":81},"template",[40,322,139],{"class":68},[40,324,325,327,329,331,333,335,337,339],{"class":42,"line":50},[40,326,78],{"class":68},[40,328,136],{"class":81},[40,330,172],{"class":60},[40,332,69],{"class":68},[40,334,93],{"class":68},[40,336,179],{"class":96},[40,338,93],{"class":68},[40,340,139],{"class":68},[40,342,343,345,347,349,351,353,355,357],{"class":42,"line":57},[40,344,189],{"class":68},[40,346,136],{"class":81},[40,348,172],{"class":60},[40,350,69],{"class":68},[40,352,93],{"class":68},[40,354,200],{"class":96},[40,356,93],{"class":68},[40,358,139],{"class":68},[40,360,361],{"class":42,"line":75},[40,362,210],{"class":64},[40,364,365,368,370,373,375,377,380,382,384,386,388,390,392,395,397,399,401,403],{"class":42,"line":85},[40,366,367],{"class":68},"      \u003C",[40,369,136],{"class":81},[40,371,372],{"class":60}," v-if",[40,374,69],{"class":68},[40,376,93],{"class":68},[40,378,379],{"class":96},"!isCompact",[40,381,93],{"class":68},[40,383,172],{"class":60},[40,385,69],{"class":68},[40,387,93],{"class":68},[40,389,97],{"class":96},[40,391,93],{"class":68},[40,393,394],{"class":60}," @click",[40,396,69],{"class":68},[40,398,93],{"class":68},[40,400,112],{"class":96},[40,402,93],{"class":68},[40,404,139],{"class":68},[40,406,407],{"class":42,"line":103},[40,408,409],{"class":64},"        Block that should be reused\n",[40,411,412,415,417],{"class":42,"line":118},[40,413,414],{"class":68},"      \u003C\u002F",[40,416,136],{"class":81},[40,418,139],{"class":68},[40,420,421,423,425],{"class":42,"line":124},[40,422,233],{"class":68},[40,424,136],{"class":81},[40,426,139],{"class":68},[40,428,429,431,433,435,437,439,441,443],{"class":42,"line":130},[40,430,189],{"class":68},[40,432,136],{"class":81},[40,434,172],{"class":60},[40,436,69],{"class":68},[40,438,93],{"class":68},[40,440,253],{"class":96},[40,442,93],{"class":68},[40,444,139],{"class":68},[40,446,447],{"class":42,"line":142},[40,448,263],{"class":64},[40,450,451,453,455,457,459,461,464,466,468,470,472,474,476,478,480,482,484,486],{"class":42,"line":151},[40,452,367],{"class":68},[40,454,136],{"class":81},[40,456,372],{"class":60},[40,458,69],{"class":68},[40,460,93],{"class":68},[40,462,463],{"class":96},"isCompact",[40,465,93],{"class":68},[40,467,172],{"class":60},[40,469,69],{"class":68},[40,471,93],{"class":68},[40,473,97],{"class":96},[40,475,93],{"class":68},[40,477,394],{"class":60},[40,479,69],{"class":68},[40,481,93],{"class":68},[40,483,112],{"class":96},[40,485,93],{"class":68},[40,487,139],{"class":68},[40,489,490],{"class":42,"line":156},[40,491,409],{"class":64},[40,493,494,496,498],{"class":42,"line":165},[40,495,414],{"class":68},[40,497,136],{"class":81},[40,499,139],{"class":68},[40,501,502,504,506],{"class":42,"line":186},[40,503,233],{"class":68},[40,505,136],{"class":81},[40,507,139],{"class":68},[40,509,510,512,514],{"class":42,"line":207},[40,511,133],{"class":68},[40,513,136],{"class":81},[40,515,139],{"class":68},[40,517,518,521,523],{"class":42,"line":213},[40,519,520],{"class":68},"\u003C\u002F",[40,522,320],{"class":81},[40,524,139],{"class":68},[16,526,528],{"id":527},"what-is-vueuse","What is VueUse",[12,530,531,535,536,539],{},[532,533,534],"strong",{},"VueUse"," is a utility library aimed at solving common use-cases, packed with useful composables and other helpers — similar to ",[532,537,538],{},"react-use"," in the React ecosystem.",[16,541,543],{"id":542},"reusing-parts-of-the-template","Reusing parts of the template",[12,545,546,547,550],{},"VueUse provides a ",[37,548,549],{},"createReusableTemplate"," function that can help to DRY your templates. As it's a separate package and not part of the Vue framework API, it needs to be installed:",[30,552,556],{"className":553,"code":554,"language":555,"meta":35,"style":35},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","npm i @vueuse\u002Fcore\n","bash",[37,557,558],{"__ignoreMap":35},[40,559,560,564,567],{"class":42,"line":43},[40,561,563],{"class":562},"sBMFI","npm",[40,565,566],{"class":96}," i",[40,568,569],{"class":96}," @vueuse\u002Fcore\n",[12,571,572,573,576],{},"Check out the installation guide for instructions for your package manager of choice or meta-framework (if you're using ",[532,574,575],{},"Nuxt",").",[12,578,579,580,583,584,587],{},"To reuse markup you need to first call ",[37,581,582],{},"createReusableTemplate()"," in the ",[37,585,586],{},"\u003Cscript>"," section:",[30,589,591],{"className":308,"code":590,"language":310,"meta":35,"style":35},"\u003Cscript setup lang=\"ts\">\nimport { createReusableTemplate } from '@vueuse\u002Fcore'\nconst [DefineTemplate, ReuseTemplate] = createReusableTemplate()\n\u003C\u002Fscript>\n",[37,592,593,617,643,671],{"__ignoreMap":35},[40,594,595,597,600,603,606,608,610,613,615],{"class":42,"line":43},[40,596,317],{"class":68},[40,598,599],{"class":81},"script",[40,601,602],{"class":60}," setup",[40,604,605],{"class":60}," lang",[40,607,69],{"class":68},[40,609,93],{"class":68},[40,611,612],{"class":96},"ts",[40,614,93],{"class":68},[40,616,139],{"class":68},[40,618,619,622,625,628,631,634,637,640],{"class":42,"line":50},[40,620,621],{"class":159},"import",[40,623,624],{"class":68}," {",[40,626,627],{"class":64}," createReusableTemplate",[40,629,630],{"class":68}," }",[40,632,633],{"class":159}," from",[40,635,636],{"class":68}," '",[40,638,639],{"class":96},"@vueuse\u002Fcore",[40,641,642],{"class":68},"'\n",[40,644,645,647,650,653,656,659,662,665,668],{"class":42,"line":57},[40,646,61],{"class":60},[40,648,649],{"class":68}," [",[40,651,652],{"class":64},"DefineTemplate",[40,654,655],{"class":68},",",[40,657,658],{"class":64}," ReuseTemplate",[40,660,661],{"class":68},"]",[40,663,664],{"class":68}," =",[40,666,627],{"class":667},"s2Zo4",[40,669,670],{"class":64},"()\n",[40,672,673,675,677],{"class":42,"line":75},[40,674,520],{"class":68},[40,676,599],{"class":81},[40,678,139],{"class":68},[12,680,681,682,684,685,688,689,692],{},"It returns two component constructors: ",[37,683,652],{}," to wrap the template part you want to reuse, and ",[37,686,687],{},"ReuseTemplate"," to render the part in place. You can then use them in ",[37,690,691],{},"\u003Ctemplate>"," like so:",[30,694,696],{"className":308,"code":695,"language":310,"meta":35,"style":35},"\u003Ctemplate>\n  \u003CDefineTemplate>\n    \u003Cdiv class=\"block\" @click=\"handleClick\">\n      Block that should be reused\n    \u003C\u002Fdiv>\n  \u003C\u002FDefineTemplate>\n  \u003Cdiv class=\"container\">\n    \u003Cdiv class=\"header\">\n      Header content\n      \u003CReuseTemplate v-if=\"!isCompact\" \u002F>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"footer\">\n      Footer content\n      \u003CReuseTemplate v-if=\"isCompact\" \u002F>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[37,697,698,706,714,742,747,755,763,781,799,803,822,830,848,852,870,878,886],{"__ignoreMap":35},[40,699,700,702,704],{"class":42,"line":43},[40,701,317],{"class":68},[40,703,320],{"class":81},[40,705,139],{"class":68},[40,707,708,710,712],{"class":42,"line":50},[40,709,78],{"class":68},[40,711,652],{"class":81},[40,713,139],{"class":68},[40,715,716,718,720,722,724,726,728,730,732,734,736,738,740],{"class":42,"line":57},[40,717,189],{"class":68},[40,719,136],{"class":81},[40,721,172],{"class":60},[40,723,69],{"class":68},[40,725,93],{"class":68},[40,727,97],{"class":96},[40,729,93],{"class":68},[40,731,394],{"class":60},[40,733,69],{"class":68},[40,735,93],{"class":68},[40,737,112],{"class":96},[40,739,93],{"class":68},[40,741,139],{"class":68},[40,743,744],{"class":42,"line":75},[40,745,746],{"class":64},"      Block that should be reused\n",[40,748,749,751,753],{"class":42,"line":85},[40,750,233],{"class":68},[40,752,136],{"class":81},[40,754,139],{"class":68},[40,756,757,759,761],{"class":42,"line":103},[40,758,133],{"class":68},[40,760,652],{"class":81},[40,762,139],{"class":68},[40,764,765,767,769,771,773,775,777,779],{"class":42,"line":118},[40,766,78],{"class":68},[40,768,136],{"class":81},[40,770,172],{"class":60},[40,772,69],{"class":68},[40,774,93],{"class":68},[40,776,179],{"class":96},[40,778,93],{"class":68},[40,780,139],{"class":68},[40,782,783,785,787,789,791,793,795,797],{"class":42,"line":124},[40,784,189],{"class":68},[40,786,136],{"class":81},[40,788,172],{"class":60},[40,790,69],{"class":68},[40,792,93],{"class":68},[40,794,200],{"class":96},[40,796,93],{"class":68},[40,798,139],{"class":68},[40,800,801],{"class":42,"line":130},[40,802,210],{"class":64},[40,804,805,807,809,811,813,815,817,819],{"class":42,"line":142},[40,806,367],{"class":68},[40,808,687],{"class":81},[40,810,372],{"class":60},[40,812,69],{"class":68},[40,814,93],{"class":68},[40,816,379],{"class":96},[40,818,93],{"class":68},[40,820,821],{"class":68}," \u002F>\n",[40,823,824,826,828],{"class":42,"line":151},[40,825,233],{"class":68},[40,827,136],{"class":81},[40,829,139],{"class":68},[40,831,832,834,836,838,840,842,844,846],{"class":42,"line":156},[40,833,189],{"class":68},[40,835,136],{"class":81},[40,837,172],{"class":60},[40,839,69],{"class":68},[40,841,93],{"class":68},[40,843,253],{"class":96},[40,845,93],{"class":68},[40,847,139],{"class":68},[40,849,850],{"class":42,"line":165},[40,851,263],{"class":64},[40,853,854,856,858,860,862,864,866,868],{"class":42,"line":186},[40,855,367],{"class":68},[40,857,687],{"class":81},[40,859,372],{"class":60},[40,861,69],{"class":68},[40,863,93],{"class":68},[40,865,463],{"class":96},[40,867,93],{"class":68},[40,869,821],{"class":68},[40,871,872,874,876],{"class":42,"line":207},[40,873,233],{"class":68},[40,875,136],{"class":81},[40,877,139],{"class":68},[40,879,880,882,884],{"class":42,"line":213},[40,881,133],{"class":68},[40,883,136],{"class":81},[40,885,139],{"class":68},[40,887,888,890,892],{"class":42,"line":230},[40,889,520],{"class":68},[40,891,320],{"class":81},[40,893,139],{"class":68},[12,895,896,899,900,903],{},[37,897,898],{},"\u003CDefineTemplate>"," must be used before ",[37,901,902],{},"\u003CReuseTemplate>",".",[12,905,906,907,909],{},"You can't, however, use the return of one ",[37,908,582],{}," call to reuse different blocks simultaneously:",[30,911,913],{"className":308,"code":912,"language":310,"meta":35,"style":35},"\u003Ctemplate>\n  \u003CDefineTemplate>\n    \u003Cdiv>Reused block A\u003C\u002Fdiv>\n  \u003C\u002FDefineTemplate>\n  \u003CReuseTemplate \u002F>\n  \u003C!-- registers another template instead -->\n  \u003CDefineTemplate>\n    \u003Cdiv>Reused block B\u003C\u002Fdiv>\n  \u003C\u002FDefineTemplate>\n  \u003C!-- will now render new template -->\n  \u003CReuseTemplate \u002F>\n\u003C\u002Ftemplate>\n\n\u003C!-- Output: -->\n\u003C!-- Reused block A -->\n\u003C!-- Reused block B -->\n",[37,914,915,923,931,949,957,965,970,978,995,1003,1008,1016,1024,1028,1033,1038],{"__ignoreMap":35},[40,916,917,919,921],{"class":42,"line":43},[40,918,317],{"class":68},[40,920,320],{"class":81},[40,922,139],{"class":68},[40,924,925,927,929],{"class":42,"line":50},[40,926,78],{"class":68},[40,928,652],{"class":81},[40,930,139],{"class":68},[40,932,933,935,937,940,943,945,947],{"class":42,"line":57},[40,934,189],{"class":68},[40,936,136],{"class":81},[40,938,939],{"class":68},">",[40,941,942],{"class":64},"Reused block A",[40,944,520],{"class":68},[40,946,136],{"class":81},[40,948,139],{"class":68},[40,950,951,953,955],{"class":42,"line":75},[40,952,133],{"class":68},[40,954,652],{"class":81},[40,956,139],{"class":68},[40,958,959,961,963],{"class":42,"line":85},[40,960,78],{"class":68},[40,962,687],{"class":81},[40,964,821],{"class":68},[40,966,967],{"class":42,"line":103},[40,968,969],{"class":46},"  \u003C!-- registers another template instead -->\n",[40,971,972,974,976],{"class":42,"line":118},[40,973,78],{"class":68},[40,975,652],{"class":81},[40,977,139],{"class":68},[40,979,980,982,984,986,989,991,993],{"class":42,"line":124},[40,981,189],{"class":68},[40,983,136],{"class":81},[40,985,939],{"class":68},[40,987,988],{"class":64},"Reused block B",[40,990,520],{"class":68},[40,992,136],{"class":81},[40,994,139],{"class":68},[40,996,997,999,1001],{"class":42,"line":130},[40,998,133],{"class":68},[40,1000,652],{"class":81},[40,1002,139],{"class":68},[40,1004,1005],{"class":42,"line":142},[40,1006,1007],{"class":46},"  \u003C!-- will now render new template -->\n",[40,1009,1010,1012,1014],{"class":42,"line":151},[40,1011,78],{"class":68},[40,1013,687],{"class":81},[40,1015,821],{"class":68},[40,1017,1018,1020,1022],{"class":42,"line":156},[40,1019,520],{"class":68},[40,1021,320],{"class":81},[40,1023,139],{"class":68},[40,1025,1026],{"class":42,"line":165},[40,1027,54],{"emptyLinePlaceholder":53},[40,1029,1030],{"class":42,"line":186},[40,1031,1032],{"class":46},"\u003C!-- Output: -->\n",[40,1034,1035],{"class":42,"line":207},[40,1036,1037],{"class":46},"\u003C!-- Reused block A -->\n",[40,1039,1040],{"class":42,"line":213},[40,1041,1042],{"class":46},"\u003C!-- Reused block B -->\n",[12,1044,1045,1046,1048],{},"So instead you would need to call ",[37,1047,582],{}," for each individual reused piece you want to use simultaneously in the markup:",[30,1050,1052],{"className":308,"code":1051,"language":310,"meta":35,"style":35},"\u003Cscript setup>\nimport { createReusableTemplate } from '@vueuse\u002Fcore'\n\nconst [DefineBlockA, ReuseBlockA] = createReusableTemplate()\nconst [DefineBlockB, ReuseBlockB] = createReusableTemplate()\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CDefineBlockA>\n    \u003Cdiv>Reused block A\u003C\u002Fdiv>\n  \u003C\u002FDefineBlockA>\n  \u003CDefineBlockB>\n    \u003Cdiv>Reused block B\u003C\u002Fdiv>\n  \u003C\u002FDefineBlockB>\n  \u003C!-- the two can exist simultaneously -->\n  \u003CReuseBlockA \u002F>\n  \u003CReuseBlockB \u002F>\n\u003C\u002Ftemplate>\n",[37,1053,1054,1064,1082,1086,1108,1130,1138,1142,1150,1158,1174,1182,1190,1206,1214,1219,1228,1237],{"__ignoreMap":35},[40,1055,1056,1058,1060,1062],{"class":42,"line":43},[40,1057,317],{"class":68},[40,1059,599],{"class":81},[40,1061,602],{"class":60},[40,1063,139],{"class":68},[40,1065,1066,1068,1070,1072,1074,1076,1078,1080],{"class":42,"line":50},[40,1067,621],{"class":159},[40,1069,624],{"class":68},[40,1071,627],{"class":64},[40,1073,630],{"class":68},[40,1075,633],{"class":159},[40,1077,636],{"class":68},[40,1079,639],{"class":96},[40,1081,642],{"class":68},[40,1083,1084],{"class":42,"line":57},[40,1085,54],{"emptyLinePlaceholder":53},[40,1087,1088,1090,1092,1095,1097,1100,1102,1104,1106],{"class":42,"line":75},[40,1089,61],{"class":60},[40,1091,649],{"class":68},[40,1093,1094],{"class":64},"DefineBlockA",[40,1096,655],{"class":68},[40,1098,1099],{"class":64}," ReuseBlockA",[40,1101,661],{"class":68},[40,1103,664],{"class":68},[40,1105,627],{"class":667},[40,1107,670],{"class":64},[40,1109,1110,1112,1114,1117,1119,1122,1124,1126,1128],{"class":42,"line":85},[40,1111,61],{"class":60},[40,1113,649],{"class":68},[40,1115,1116],{"class":64},"DefineBlockB",[40,1118,655],{"class":68},[40,1120,1121],{"class":64}," ReuseBlockB",[40,1123,661],{"class":68},[40,1125,664],{"class":68},[40,1127,627],{"class":667},[40,1129,670],{"class":64},[40,1131,1132,1134,1136],{"class":42,"line":103},[40,1133,520],{"class":68},[40,1135,599],{"class":81},[40,1137,139],{"class":68},[40,1139,1140],{"class":42,"line":118},[40,1141,54],{"emptyLinePlaceholder":53},[40,1143,1144,1146,1148],{"class":42,"line":124},[40,1145,317],{"class":68},[40,1147,320],{"class":81},[40,1149,139],{"class":68},[40,1151,1152,1154,1156],{"class":42,"line":130},[40,1153,78],{"class":68},[40,1155,1094],{"class":81},[40,1157,139],{"class":68},[40,1159,1160,1162,1164,1166,1168,1170,1172],{"class":42,"line":142},[40,1161,189],{"class":68},[40,1163,136],{"class":81},[40,1165,939],{"class":68},[40,1167,942],{"class":64},[40,1169,520],{"class":68},[40,1171,136],{"class":81},[40,1173,139],{"class":68},[40,1175,1176,1178,1180],{"class":42,"line":151},[40,1177,133],{"class":68},[40,1179,1094],{"class":81},[40,1181,139],{"class":68},[40,1183,1184,1186,1188],{"class":42,"line":156},[40,1185,78],{"class":68},[40,1187,1116],{"class":81},[40,1189,139],{"class":68},[40,1191,1192,1194,1196,1198,1200,1202,1204],{"class":42,"line":165},[40,1193,189],{"class":68},[40,1195,136],{"class":81},[40,1197,939],{"class":68},[40,1199,988],{"class":64},[40,1201,520],{"class":68},[40,1203,136],{"class":81},[40,1205,139],{"class":68},[40,1207,1208,1210,1212],{"class":42,"line":186},[40,1209,133],{"class":68},[40,1211,1116],{"class":81},[40,1213,139],{"class":68},[40,1215,1216],{"class":42,"line":207},[40,1217,1218],{"class":46},"  \u003C!-- the two can exist simultaneously -->\n",[40,1220,1221,1223,1226],{"class":42,"line":213},[40,1222,78],{"class":68},[40,1224,1225],{"class":81},"ReuseBlockA",[40,1227,821],{"class":68},[40,1229,1230,1232,1235],{"class":42,"line":230},[40,1231,78],{"class":68},[40,1233,1234],{"class":81},"ReuseBlockB",[40,1236,821],{"class":68},[40,1238,1239,1241,1243],{"class":42,"line":240},[40,1240,520],{"class":68},[40,1242,320],{"class":81},[40,1244,139],{"class":68},[16,1246,1248],{"id":1247},"analogue-to-react-render-functions","Analogue to React render functions",[12,1250,1251],{},"Having the ability to reuse the same template part is good, but with JSX in React one can also define a render function to dynamically pass different props to the reused piece:",[30,1253,1255],{"className":32,"code":1254,"language":34,"meta":35,"style":35},"const renderBlock = (className) => (\n  \u003Cdiv\n    class={`block ${className}`}\n    onClick={handleClick}>\n    Block that should be reused and customized.\n  \u003C\u002Fdiv>\n);\n\nreturn (\n  \u003Cdiv class=\"container\">\n    \u003Cdiv class=\"header\">\n      Header content\n      {!isCompact && renderBlock(\"full\")}\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"footer\">\n      Footer content\n      {isCompact && renderBlock(\"compact\")}\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n);\n",[37,1256,1257,1280,1286,1308,1319,1324,1332,1338,1342,1348,1366,1384,1388,1413,1421,1439,1443,1466,1474,1482],{"__ignoreMap":35},[40,1258,1259,1261,1264,1266,1269,1273,1275,1278],{"class":42,"line":43},[40,1260,61],{"class":60},[40,1262,1263],{"class":64}," renderBlock ",[40,1265,69],{"class":68},[40,1267,1268],{"class":68}," (",[40,1270,1272],{"class":1271},"sHdIc","className",[40,1274,145],{"class":68},[40,1276,1277],{"class":60}," =>",[40,1279,72],{"class":64},[40,1281,1282,1284],{"class":42,"line":50},[40,1283,78],{"class":68},[40,1285,82],{"class":81},[40,1287,1288,1290,1292,1295,1298,1301,1303,1306],{"class":42,"line":57},[40,1289,88],{"class":60},[40,1291,109],{"class":68},[40,1293,1294],{"class":68},"`",[40,1296,1297],{"class":96},"block ",[40,1299,1300],{"class":68},"${",[40,1302,1272],{"class":64},[40,1304,1305],{"class":68},"}`",[40,1307,115],{"class":68},[40,1309,1310,1312,1314,1316],{"class":42,"line":75},[40,1311,106],{"class":60},[40,1313,109],{"class":68},[40,1315,112],{"class":64},[40,1317,1318],{"class":68},"}>\n",[40,1320,1321],{"class":42,"line":85},[40,1322,1323],{"class":64},"    Block that should be reused and customized.\n",[40,1325,1326,1328,1330],{"class":42,"line":103},[40,1327,133],{"class":68},[40,1329,136],{"class":81},[40,1331,139],{"class":68},[40,1333,1334,1336],{"class":42,"line":118},[40,1335,145],{"class":64},[40,1337,148],{"class":68},[40,1339,1340],{"class":42,"line":124},[40,1341,54],{"emptyLinePlaceholder":53},[40,1343,1344,1346],{"class":42,"line":130},[40,1345,160],{"class":159},[40,1347,72],{"class":64},[40,1349,1350,1352,1354,1356,1358,1360,1362,1364],{"class":42,"line":142},[40,1351,78],{"class":68},[40,1353,136],{"class":81},[40,1355,172],{"class":60},[40,1357,69],{"class":68},[40,1359,93],{"class":68},[40,1361,179],{"class":96},[40,1363,93],{"class":68},[40,1365,139],{"class":68},[40,1367,1368,1370,1372,1374,1376,1378,1380,1382],{"class":42,"line":151},[40,1369,189],{"class":68},[40,1371,136],{"class":81},[40,1373,172],{"class":60},[40,1375,69],{"class":68},[40,1377,93],{"class":68},[40,1379,200],{"class":96},[40,1381,93],{"class":68},[40,1383,139],{"class":68},[40,1385,1386],{"class":42,"line":156},[40,1387,210],{"class":64},[40,1389,1390,1392,1394,1396,1399,1402,1404,1407,1409,1411],{"class":42,"line":165},[40,1391,216],{"class":68},[40,1393,219],{"class":64},[40,1395,222],{"class":68},[40,1397,1398],{"class":667}," renderBlock",[40,1400,1401],{"class":64},"(",[40,1403,93],{"class":68},[40,1405,1406],{"class":96},"full",[40,1408,93],{"class":68},[40,1410,145],{"class":64},[40,1412,115],{"class":68},[40,1414,1415,1417,1419],{"class":42,"line":186},[40,1416,233],{"class":68},[40,1418,136],{"class":81},[40,1420,139],{"class":68},[40,1422,1423,1425,1427,1429,1431,1433,1435,1437],{"class":42,"line":207},[40,1424,189],{"class":68},[40,1426,136],{"class":81},[40,1428,172],{"class":60},[40,1430,69],{"class":68},[40,1432,93],{"class":68},[40,1434,253],{"class":96},[40,1436,93],{"class":68},[40,1438,139],{"class":68},[40,1440,1441],{"class":42,"line":213},[40,1442,263],{"class":64},[40,1444,1445,1447,1449,1451,1453,1455,1457,1460,1462,1464],{"class":42,"line":230},[40,1446,269],{"class":68},[40,1448,219],{"class":64},[40,1450,222],{"class":68},[40,1452,1398],{"class":667},[40,1454,1401],{"class":64},[40,1456,93],{"class":68},[40,1458,1459],{"class":96},"compact",[40,1461,93],{"class":68},[40,1463,145],{"class":64},[40,1465,115],{"class":68},[40,1467,1468,1470,1472],{"class":42,"line":240},[40,1469,233],{"class":68},[40,1471,136],{"class":81},[40,1473,139],{"class":68},[40,1475,1476,1478,1480],{"class":42,"line":260},[40,1477,133],{"class":68},[40,1479,136],{"class":81},[40,1481,139],{"class":68},[40,1483,1484,1486],{"class":42,"line":266},[40,1485,145],{"class":64},[40,1487,148],{"class":68},[12,1489,1490,1491,1494,1495,1497,1498,1501],{},"Vue provides ",[532,1492,1493],{},"scoped slots"," as the general alternative to React JSX render functions, and ",[37,1496,549],{}," supports this feature to pass data to the reused template. You can use the same ",[37,1499,1500],{},"v-slot"," you would normally use to pass data from a child component back to the parent:",[30,1503,1505],{"className":308,"code":1504,"language":310,"meta":35,"style":35},"\u003Cscript setup lang=\"ts\">\nimport { createReusableTemplate } from '@vueuse\u002Fcore'\n\nconst [DefineTemplate, ReuseTemplate] = createReusableTemplate\u003C{ className: string }>()\n\u003C\u002Fscript>\n",[37,1506,1507,1527,1545,1549,1584],{"__ignoreMap":35},[40,1508,1509,1511,1513,1515,1517,1519,1521,1523,1525],{"class":42,"line":43},[40,1510,317],{"class":68},[40,1512,599],{"class":81},[40,1514,602],{"class":60},[40,1516,605],{"class":60},[40,1518,69],{"class":68},[40,1520,93],{"class":68},[40,1522,612],{"class":96},[40,1524,93],{"class":68},[40,1526,139],{"class":68},[40,1528,1529,1531,1533,1535,1537,1539,1541,1543],{"class":42,"line":50},[40,1530,621],{"class":159},[40,1532,624],{"class":68},[40,1534,627],{"class":64},[40,1536,630],{"class":68},[40,1538,633],{"class":159},[40,1540,636],{"class":68},[40,1542,639],{"class":96},[40,1544,642],{"class":68},[40,1546,1547],{"class":42,"line":57},[40,1548,54],{"emptyLinePlaceholder":53},[40,1550,1551,1553,1555,1557,1559,1561,1563,1565,1567,1570,1573,1576,1579,1582],{"class":42,"line":75},[40,1552,61],{"class":60},[40,1554,649],{"class":68},[40,1556,652],{"class":64},[40,1558,655],{"class":68},[40,1560,658],{"class":64},[40,1562,661],{"class":68},[40,1564,664],{"class":68},[40,1566,627],{"class":667},[40,1568,1569],{"class":68},"\u003C{",[40,1571,1572],{"class":81}," className",[40,1574,1575],{"class":68},":",[40,1577,1578],{"class":562}," string",[40,1580,1581],{"class":68}," }>",[40,1583,670],{"class":64},[40,1585,1586,1588,1590],{"class":42,"line":85},[40,1587,520],{"class":68},[40,1589,599],{"class":81},[40,1591,139],{"class":68},[12,1593,1594,1596,1597,1599,1600,1602,1603,1575],{},[37,1595,549],{}," accepts a generic type argument for typing the data passed to the template, similar to specifying a render function signature. You can then bind props to ",[37,1598,687],{}," and access them in the reusable part inside ",[37,1601,652],{}," via ",[37,1604,1500],{},[30,1606,1608],{"className":308,"code":1607,"language":310,"meta":35,"style":35},"\u003Ctemplate>\n  \u003CDefineTemplate v-slot=\"{ className }\">\n    \u003Cdiv :class=\"['block', className]\" @click=\"handleClick\">\n      Block that should be reused and customized.\n    \u003C\u002Fdiv>\n  \u003C\u002FDefineTemplate>\n  \u003Cdiv class=\"container\">\n    \u003Cdiv class=\"header\">\n      Header content\n      \u003CReuseTemplate v-if=\"!isCompact\" className=\"full\" \u002F>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"footer\">\n      Footer content\n      \u003CReuseTemplate v-if=\"isCompact\" className=\"compact\" \u002F>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[37,1609,1610,1618,1638,1668,1673,1681,1689,1707,1725,1729,1757,1765,1783,1787,1815,1823,1831],{"__ignoreMap":35},[40,1611,1612,1614,1616],{"class":42,"line":43},[40,1613,317],{"class":68},[40,1615,320],{"class":81},[40,1617,139],{"class":68},[40,1619,1620,1622,1624,1627,1629,1631,1634,1636],{"class":42,"line":50},[40,1621,78],{"class":68},[40,1623,652],{"class":81},[40,1625,1626],{"class":60}," v-slot",[40,1628,69],{"class":68},[40,1630,93],{"class":68},[40,1632,1633],{"class":96},"{ className }",[40,1635,93],{"class":68},[40,1637,139],{"class":68},[40,1639,1640,1642,1644,1647,1649,1651,1654,1656,1658,1660,1662,1664,1666],{"class":42,"line":57},[40,1641,189],{"class":68},[40,1643,136],{"class":81},[40,1645,1646],{"class":60}," :class",[40,1648,69],{"class":68},[40,1650,93],{"class":68},[40,1652,1653],{"class":96},"['block', className]",[40,1655,93],{"class":68},[40,1657,394],{"class":60},[40,1659,69],{"class":68},[40,1661,93],{"class":68},[40,1663,112],{"class":96},[40,1665,93],{"class":68},[40,1667,139],{"class":68},[40,1669,1670],{"class":42,"line":75},[40,1671,1672],{"class":64},"      Block that should be reused and customized.\n",[40,1674,1675,1677,1679],{"class":42,"line":85},[40,1676,233],{"class":68},[40,1678,136],{"class":81},[40,1680,139],{"class":68},[40,1682,1683,1685,1687],{"class":42,"line":103},[40,1684,133],{"class":68},[40,1686,652],{"class":81},[40,1688,139],{"class":68},[40,1690,1691,1693,1695,1697,1699,1701,1703,1705],{"class":42,"line":118},[40,1692,78],{"class":68},[40,1694,136],{"class":81},[40,1696,172],{"class":60},[40,1698,69],{"class":68},[40,1700,93],{"class":68},[40,1702,179],{"class":96},[40,1704,93],{"class":68},[40,1706,139],{"class":68},[40,1708,1709,1711,1713,1715,1717,1719,1721,1723],{"class":42,"line":124},[40,1710,189],{"class":68},[40,1712,136],{"class":81},[40,1714,172],{"class":60},[40,1716,69],{"class":68},[40,1718,93],{"class":68},[40,1720,200],{"class":96},[40,1722,93],{"class":68},[40,1724,139],{"class":68},[40,1726,1727],{"class":42,"line":130},[40,1728,210],{"class":64},[40,1730,1731,1733,1735,1737,1739,1741,1743,1745,1747,1749,1751,1753,1755],{"class":42,"line":142},[40,1732,367],{"class":68},[40,1734,687],{"class":81},[40,1736,372],{"class":60},[40,1738,69],{"class":68},[40,1740,93],{"class":68},[40,1742,379],{"class":96},[40,1744,93],{"class":68},[40,1746,1572],{"class":60},[40,1748,69],{"class":68},[40,1750,93],{"class":68},[40,1752,1406],{"class":96},[40,1754,93],{"class":68},[40,1756,821],{"class":68},[40,1758,1759,1761,1763],{"class":42,"line":151},[40,1760,233],{"class":68},[40,1762,136],{"class":81},[40,1764,139],{"class":68},[40,1766,1767,1769,1771,1773,1775,1777,1779,1781],{"class":42,"line":156},[40,1768,189],{"class":68},[40,1770,136],{"class":81},[40,1772,172],{"class":60},[40,1774,69],{"class":68},[40,1776,93],{"class":68},[40,1778,253],{"class":96},[40,1780,93],{"class":68},[40,1782,139],{"class":68},[40,1784,1785],{"class":42,"line":165},[40,1786,263],{"class":64},[40,1788,1789,1791,1793,1795,1797,1799,1801,1803,1805,1807,1809,1811,1813],{"class":42,"line":186},[40,1790,367],{"class":68},[40,1792,687],{"class":81},[40,1794,372],{"class":60},[40,1796,69],{"class":68},[40,1798,93],{"class":68},[40,1800,463],{"class":96},[40,1802,93],{"class":68},[40,1804,1572],{"class":60},[40,1806,69],{"class":68},[40,1808,93],{"class":68},[40,1810,1459],{"class":96},[40,1812,93],{"class":68},[40,1814,821],{"class":68},[40,1816,1817,1819,1821],{"class":42,"line":207},[40,1818,233],{"class":68},[40,1820,136],{"class":81},[40,1822,139],{"class":68},[40,1824,1825,1827,1829],{"class":42,"line":213},[40,1826,133],{"class":68},[40,1828,136],{"class":81},[40,1830,139],{"class":68},[40,1832,1833,1835,1837],{"class":42,"line":230},[40,1834,520],{"class":68},[40,1836,320],{"class":81},[40,1838,139],{"class":68},[12,1840,1841,1842,1844,1845,1847,1848,1851,1852,1854,1855,1857,1858,1861],{},"Render functions in JSX can also accept JSX as arguments to be rendered somewhere inside. No worries — ",[37,1843,549],{}," has you covered here as well, as ",[37,1846,687],{}," can be passed slots that can be accessed via ",[37,1849,1850],{},"$slots"," on ",[37,1853,1500],{}," and rendered inside ",[37,1856,652],{}," with ",[532,1859,1860],{},"dynamic components"," syntax:",[30,1863,1865],{"className":308,"code":1864,"language":310,"meta":35,"style":35},"\u003Ctemplate>\n  \u003CDefineTemplate v-slot=\"{ className, $slots }\">\n    \u003Cdiv :class=\"['block', className]\" @click=\"handleClick\">\n      Block that should be reused with custom content.\n      Custom content:\n      \u003C!-- To render the slot -->\n      \u003Ccomponent :is=\"$slots.default\" \u002F>\n    \u003C\u002Fdiv>\n  \u003C\u002FDefineTemplate>\n  \u003Cdiv class=\"container\">\n    \u003Cdiv class=\"header\">\n      Header content\n      \u003CReuseTemplate v-if=\"!isCompact\" className=\"full\">\n        \u003Cdiv>Full content\u003C\u002Fdiv>\n      \u003C\u002FReuseTemplate>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"footer\">\n      Footer content\n      \u003CReuseTemplate v-if=\"isCompact\" className=\"compact\">\n        \u003Cdiv>Compact content\u003C\u002Fdiv>\n      \u003C\u002FReuseTemplate>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[37,1866,1867,1875,1894,1922,1927,1932,1937,1958,1966,1974,1992,2010,2014,2042,2060,2068,2076,2094,2098,2126,2143,2151,2159,2167],{"__ignoreMap":35},[40,1868,1869,1871,1873],{"class":42,"line":43},[40,1870,317],{"class":68},[40,1872,320],{"class":81},[40,1874,139],{"class":68},[40,1876,1877,1879,1881,1883,1885,1887,1890,1892],{"class":42,"line":50},[40,1878,78],{"class":68},[40,1880,652],{"class":81},[40,1882,1626],{"class":60},[40,1884,69],{"class":68},[40,1886,93],{"class":68},[40,1888,1889],{"class":96},"{ className, $slots }",[40,1891,93],{"class":68},[40,1893,139],{"class":68},[40,1895,1896,1898,1900,1902,1904,1906,1908,1910,1912,1914,1916,1918,1920],{"class":42,"line":57},[40,1897,189],{"class":68},[40,1899,136],{"class":81},[40,1901,1646],{"class":60},[40,1903,69],{"class":68},[40,1905,93],{"class":68},[40,1907,1653],{"class":96},[40,1909,93],{"class":68},[40,1911,394],{"class":60},[40,1913,69],{"class":68},[40,1915,93],{"class":68},[40,1917,112],{"class":96},[40,1919,93],{"class":68},[40,1921,139],{"class":68},[40,1923,1924],{"class":42,"line":75},[40,1925,1926],{"class":64},"      Block that should be reused with custom content.\n",[40,1928,1929],{"class":42,"line":85},[40,1930,1931],{"class":64},"      Custom content:\n",[40,1933,1934],{"class":42,"line":103},[40,1935,1936],{"class":46},"      \u003C!-- To render the slot -->\n",[40,1938,1939,1941,1944,1947,1949,1951,1954,1956],{"class":42,"line":118},[40,1940,367],{"class":68},[40,1942,1943],{"class":81},"component",[40,1945,1946],{"class":60}," :is",[40,1948,69],{"class":68},[40,1950,93],{"class":68},[40,1952,1953],{"class":96},"$slots.default",[40,1955,93],{"class":68},[40,1957,821],{"class":68},[40,1959,1960,1962,1964],{"class":42,"line":124},[40,1961,233],{"class":68},[40,1963,136],{"class":81},[40,1965,139],{"class":68},[40,1967,1968,1970,1972],{"class":42,"line":130},[40,1969,133],{"class":68},[40,1971,652],{"class":81},[40,1973,139],{"class":68},[40,1975,1976,1978,1980,1982,1984,1986,1988,1990],{"class":42,"line":142},[40,1977,78],{"class":68},[40,1979,136],{"class":81},[40,1981,172],{"class":60},[40,1983,69],{"class":68},[40,1985,93],{"class":68},[40,1987,179],{"class":96},[40,1989,93],{"class":68},[40,1991,139],{"class":68},[40,1993,1994,1996,1998,2000,2002,2004,2006,2008],{"class":42,"line":151},[40,1995,189],{"class":68},[40,1997,136],{"class":81},[40,1999,172],{"class":60},[40,2001,69],{"class":68},[40,2003,93],{"class":68},[40,2005,200],{"class":96},[40,2007,93],{"class":68},[40,2009,139],{"class":68},[40,2011,2012],{"class":42,"line":156},[40,2013,210],{"class":64},[40,2015,2016,2018,2020,2022,2024,2026,2028,2030,2032,2034,2036,2038,2040],{"class":42,"line":165},[40,2017,367],{"class":68},[40,2019,687],{"class":81},[40,2021,372],{"class":60},[40,2023,69],{"class":68},[40,2025,93],{"class":68},[40,2027,379],{"class":96},[40,2029,93],{"class":68},[40,2031,1572],{"class":60},[40,2033,69],{"class":68},[40,2035,93],{"class":68},[40,2037,1406],{"class":96},[40,2039,93],{"class":68},[40,2041,139],{"class":68},[40,2043,2044,2047,2049,2051,2054,2056,2058],{"class":42,"line":186},[40,2045,2046],{"class":68},"        \u003C",[40,2048,136],{"class":81},[40,2050,939],{"class":68},[40,2052,2053],{"class":64},"Full content",[40,2055,520],{"class":68},[40,2057,136],{"class":81},[40,2059,139],{"class":68},[40,2061,2062,2064,2066],{"class":42,"line":207},[40,2063,414],{"class":68},[40,2065,687],{"class":81},[40,2067,139],{"class":68},[40,2069,2070,2072,2074],{"class":42,"line":213},[40,2071,233],{"class":68},[40,2073,136],{"class":81},[40,2075,139],{"class":68},[40,2077,2078,2080,2082,2084,2086,2088,2090,2092],{"class":42,"line":230},[40,2079,189],{"class":68},[40,2081,136],{"class":81},[40,2083,172],{"class":60},[40,2085,69],{"class":68},[40,2087,93],{"class":68},[40,2089,253],{"class":96},[40,2091,93],{"class":68},[40,2093,139],{"class":68},[40,2095,2096],{"class":42,"line":240},[40,2097,263],{"class":64},[40,2099,2100,2102,2104,2106,2108,2110,2112,2114,2116,2118,2120,2122,2124],{"class":42,"line":260},[40,2101,367],{"class":68},[40,2103,687],{"class":81},[40,2105,372],{"class":60},[40,2107,69],{"class":68},[40,2109,93],{"class":68},[40,2111,463],{"class":96},[40,2113,93],{"class":68},[40,2115,1572],{"class":60},[40,2117,69],{"class":68},[40,2119,93],{"class":68},[40,2121,1459],{"class":96},[40,2123,93],{"class":68},[40,2125,139],{"class":68},[40,2127,2128,2130,2132,2134,2137,2139,2141],{"class":42,"line":266},[40,2129,2046],{"class":68},[40,2131,136],{"class":81},[40,2133,939],{"class":68},[40,2135,2136],{"class":64},"Compact content",[40,2138,520],{"class":68},[40,2140,136],{"class":81},[40,2142,139],{"class":68},[40,2144,2145,2147,2149],{"class":42,"line":280},[40,2146,414],{"class":68},[40,2148,687],{"class":81},[40,2150,139],{"class":68},[40,2152,2153,2155,2157],{"class":42,"line":289},[40,2154,233],{"class":68},[40,2156,136],{"class":81},[40,2158,139],{"class":68},[40,2160,2161,2163,2165],{"class":42,"line":298},[40,2162,133],{"class":68},[40,2164,136],{"class":81},[40,2166,139],{"class":68},[40,2168,2170,2172,2174],{"class":42,"line":2169},24,[40,2171,520],{"class":68},[40,2173,320],{"class":81},[40,2175,139],{"class":68},[16,2177,2179],{"id":2178},"thats-it","That's it!",[12,2181,2182,2183,2188],{},"If you're a React dev struggling to embrace Vue because you feel down having to write templates, consider giving it another shot with this addon. Alternatively, if this still isn't enough to make templates plausible for you, you can learn how to ",[2184,2185,2187],"a",{"href":2186},"\u002Fblog\u002Fusing-jsx-with-vue","use JSX with Vue"," to make your experience with Vue more close to home.",[2190,2191],"blog-button",{"label":2192,"to":2193},"Talk to a Vue expert","https:\u002F\u002Fcalendar.app.google\u002FXwRzASZitZRSVLxq6",[2195,2196,2197],"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 .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}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 .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 .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}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}",{"title":35,"searchDepth":57,"depth":57,"links":2199},[2200,2201,2202,2203,2204],{"id":18,"depth":50,"text":19},{"id":527,"depth":50,"text":528},{"id":542,"depth":50,"text":543},{"id":1247,"depth":50,"text":1248},{"id":2178,"depth":50,"text":2179},"2024-06-12","Coming to Vue from React? Learn how to reuse template blocks in Vue SFCs with VueUse's createReusableTemplate — the closest thing to JSX render functions.","md",false,"\u002Fimages\u002Fblog\u002Ffixing-vue-sfc-templates-for-react\u002Fcard.png",{},"\u002Fblog\u002Ffixing-vue-sfc-templates-for-react",{"title":5,"description":2206},"blog\u002Ffixing-vue-sfc-templates-for-react",[2215,2216,534],"Vue.js","React","XFUpaPhnz2MdwyGb8NmrKcGM-2JxaObtkvn5XqUIm7c",1784559991785]