[{"data":1,"prerenderedAt":2005},["ShallowReactive",2],{"building-a-simple-rating-component-with-vue-3":3},{"id":4,"title":5,"body":6,"brief":1995,"createdAt":1996,"description":12,"extension":1997,"meta":1998,"navigation":276,"path":1999,"readTime":2000,"seo":2001,"slug":2002,"stem":2003,"__hash__":2004},"blog\u002Fblog\u002Fbuilding-a-simple-rating-component-with-vue-3.md","Building a simple rating component with Vue 3",{"type":7,"value":8,"toc":1993},"minimark",[9,13,16,27,241,244,250,253,262,313,326,368,378,651,661,818,821,1253,1266,1337,1340,1345,1355,1823,1826,1981,1990],[10,11,12],"p",{},"A rating component which is sometimes referred to as a star rating component, is a user-facing element that allows users to provide feedback or rate something, typically on a scale, and just to display the rating of something sometimes. It's used in many applications and websites to collect user opinions, feedback, or reviews by assigning a certain number of stars or other symbols to represent a rating.",[10,14,15],{},"In this post, we'll be building a basic and simple rating reusable rating component using Vue 3.",[10,17,18,19,26],{},"We'll begin by creating a new Single File Component (SFC) named \"Rate.vue\" within our current Vue 3 project. If you're exploring, you can also use Vue's ",[20,21,25],"a",{"href":22,"rel":23},"https:\u002F\u002Fplay.vuejs.org\u002F",[24],"nofollow","playground",". Inside the Rate component, we'll include the necessary HTML elements.",[28,29,34],"pre",{"className":30,"code":31,"language":32,"meta":33,"style":33},"language-vue shiki shiki-themes vitesse-light vitesse-black","\u003Ctemplate>\n  \u003Cdiv class=\"wrapper\">\n    \u003Cspan class=\"star\">★\u003C\u002Fspan>\n    \u003Cspan class=\"star\">★\u003C\u002Fspan>\n    \u003Cspan class=\"star\">★\u003C\u002Fspan>\n    \u003Cspan class=\"star\">★\u003C\u002Fspan>\n    \u003Cspan class=\"star\">★\u003C\u002Fspan>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","vue","",[35,36,37,53,81,114,141,168,195,222,232],"code",{"__ignoreMap":33},[38,39,42,46,50],"span",{"class":40,"line":41},"line",1,[38,43,45],{"class":44},"stPdD","\u003C",[38,47,49],{"class":48},"sTPum","template",[38,51,52],{"class":44},">\n",[38,54,56,59,62,66,69,73,77,79],{"class":40,"line":55},2,[38,57,58],{"class":44},"  \u003C",[38,60,61],{"class":48},"div",[38,63,65],{"class":64},"s9nN2"," class",[38,67,68],{"class":44},"=",[38,70,72],{"class":71},"scnC2","\"",[38,74,76],{"class":75},"spP0B","wrapper",[38,78,72],{"class":71},[38,80,52],{"class":44},[38,82,84,87,89,91,93,95,98,100,103,107,110,112],{"class":40,"line":83},3,[38,85,86],{"class":44},"    \u003C",[38,88,38],{"class":48},[38,90,65],{"class":64},[38,92,68],{"class":44},[38,94,72],{"class":71},[38,96,97],{"class":75},"star",[38,99,72],{"class":71},[38,101,102],{"class":44},">",[38,104,106],{"class":105},"slSvp","★",[38,108,109],{"class":44},"\u003C\u002F",[38,111,38],{"class":48},[38,113,52],{"class":44},[38,115,117,119,121,123,125,127,129,131,133,135,137,139],{"class":40,"line":116},4,[38,118,86],{"class":44},[38,120,38],{"class":48},[38,122,65],{"class":64},[38,124,68],{"class":44},[38,126,72],{"class":71},[38,128,97],{"class":75},[38,130,72],{"class":71},[38,132,102],{"class":44},[38,134,106],{"class":105},[38,136,109],{"class":44},[38,138,38],{"class":48},[38,140,52],{"class":44},[38,142,144,146,148,150,152,154,156,158,160,162,164,166],{"class":40,"line":143},5,[38,145,86],{"class":44},[38,147,38],{"class":48},[38,149,65],{"class":64},[38,151,68],{"class":44},[38,153,72],{"class":71},[38,155,97],{"class":75},[38,157,72],{"class":71},[38,159,102],{"class":44},[38,161,106],{"class":105},[38,163,109],{"class":44},[38,165,38],{"class":48},[38,167,52],{"class":44},[38,169,171,173,175,177,179,181,183,185,187,189,191,193],{"class":40,"line":170},6,[38,172,86],{"class":44},[38,174,38],{"class":48},[38,176,65],{"class":64},[38,178,68],{"class":44},[38,180,72],{"class":71},[38,182,97],{"class":75},[38,184,72],{"class":71},[38,186,102],{"class":44},[38,188,106],{"class":105},[38,190,109],{"class":44},[38,192,38],{"class":48},[38,194,52],{"class":44},[38,196,198,200,202,204,206,208,210,212,214,216,218,220],{"class":40,"line":197},7,[38,199,86],{"class":44},[38,201,38],{"class":48},[38,203,65],{"class":64},[38,205,68],{"class":44},[38,207,72],{"class":71},[38,209,97],{"class":75},[38,211,72],{"class":71},[38,213,102],{"class":44},[38,215,106],{"class":105},[38,217,109],{"class":44},[38,219,38],{"class":48},[38,221,52],{"class":44},[38,223,225,228,230],{"class":40,"line":224},8,[38,226,227],{"class":44},"  \u003C\u002F",[38,229,61],{"class":48},[38,231,52],{"class":44},[38,233,235,237,239],{"class":40,"line":234},9,[38,236,109],{"class":44},[38,238,49],{"class":48},[38,240,52],{"class":44},[10,242,243],{},"The above code block will render the following UI:",[10,245,246],{},[247,248],"img",{"alt":33,"src":249},"https:\u002F\u002Fcdn.hashnode.com\u002Fres\u002Fhashnode\u002Fimage\u002Fupload\u002Fv1697142132842\u002Fb55975cd-b4ca-46fa-9c52-0ac4fca86f83.png",[10,251,252],{},"Next, let's introduce some JavaScript code to enhance the interactivity of our user interface. This involves specifying props, emits, and a function to update\u002Femit ratings as needed.",[10,254,255,256,261],{},"We start by declaring props using pure type annotations. Props can be defined using ",[20,257,260],{"href":258,"rel":259},"https:\u002F\u002Fvuejs.org\u002Fguide\u002Fcomponents\u002Fprops.html#props-declaration",[24],"defineProps",".",[28,263,265],{"className":30,"code":264,"language":32,"meta":33,"style":33},"import { defineProps } from \"vue\";\n\nconst props = defineProps\u003C{\n    value: number;\n    totalRating: number;\n}>();\n",[35,266,267,272,278,288,296,303],{"__ignoreMap":33},[38,268,269],{"class":40,"line":41},[38,270,271],{"class":105},"import { defineProps } from \"vue\";\n",[38,273,274],{"class":40,"line":55},[38,275,277],{"emptyLinePlaceholder":276},true,"\n",[38,279,280,283,285],{"class":40,"line":83},[38,281,282],{"class":105},"const props = defineProps",[38,284,45],{"class":44},[38,286,287],{"class":105},"{\n",[38,289,290,293],{"class":40,"line":116},[38,291,292],{"class":48},"    value:",[38,294,295],{"class":64}," number;\n",[38,297,298,301],{"class":40,"line":143},[38,299,300],{"class":64},"    totalRating:",[38,302,295],{"class":64},[38,304,305,308,310],{"class":40,"line":170},[38,306,307],{"class":64},"}",[38,309,102],{"class":44},[38,311,312],{"class":105},"();\n",[10,314,315,316,321,322,325],{},"In Vue, a component can explicitly declare the events it will emit using the ",[20,317,320],{"href":318,"rel":319},"https:\u002F\u002Fvuejs.org\u002Fguide\u002Fcomponents\u002Fevents.html#declaring-emitted-events",[24],"defineEmits"," macro, in our case, which is to declare an ",[35,323,324],{},"update-rating"," event with an argument. We'll be doing this using pure type annotations like so:",[28,327,329],{"className":30,"code":328,"language":32,"meta":33,"style":33},"import { defineEmits } from \"vue\";\n\ndefineEmits\u003C(event: \"update-rating\", value: number) => void>();\n",[35,330,331,336,340],{"__ignoreMap":33},[38,332,333],{"class":40,"line":41},[38,334,335],{"class":105},"import { defineEmits } from \"vue\";\n",[38,337,338],{"class":40,"line":55},[38,339,277],{"emptyLinePlaceholder":276},[38,341,342,344,346,349,352,356,359,362,365],{"class":40,"line":83},[38,343,320],{"class":105},[38,345,45],{"class":44},[38,347,348],{"class":105},"(",[38,350,351],{"class":48},"event:",[38,353,355],{"class":354},"sGGdt"," \"update-rating\",",[38,357,358],{"class":64}," value:",[38,360,361],{"class":64}," number)",[38,363,364],{"class":44}," =>",[38,366,367],{"class":105}," void>();\n",[10,369,370,371,373,374,377],{},"Now, we will use a loop to dynamically render the ",[35,372,38],{}," element based on the ",[35,375,376],{},"totalRating"," prop:",[28,379,381],{"className":30,"code":380,"language":32,"meta":33,"style":33},"\u003Cscript lang=\"ts\" setup>\nimport { defineProps, defineEmits } from \"vue\";\n\nconst props = defineProps\u003C{\n  value: number;\n  totalRating: number;\n}>();\n\nconst emit = defineEmits\u003C(event: \"update-rating\", value: number) => void>();\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"wrapper\">\n    \u003Cspan v-for=\"star in totalRating\" :key=\"star\" class=\"star\">★\u003C\u002Fspan>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[35,382,383,407,440,444,462,476,487,492,496,541,550,555,564,583,633,642],{"__ignoreMap":33},[38,384,385,387,390,393,395,397,400,402,405],{"class":40,"line":41},[38,386,45],{"class":44},[38,388,389],{"class":48},"script",[38,391,392],{"class":64}," lang",[38,394,68],{"class":44},[38,396,72],{"class":71},[38,398,399],{"class":75},"ts",[38,401,72],{"class":71},[38,403,404],{"class":64}," setup",[38,406,52],{"class":44},[38,408,409,412,415,418,421,424,427,430,433,435,437],{"class":40,"line":55},[38,410,411],{"class":48},"import",[38,413,414],{"class":44}," {",[38,416,417],{"class":64}," defineProps",[38,419,420],{"class":44},",",[38,422,423],{"class":64}," defineEmits",[38,425,426],{"class":44}," }",[38,428,429],{"class":48}," from",[38,431,432],{"class":71}," \"",[38,434,32],{"class":75},[38,436,72],{"class":71},[38,438,439],{"class":44},";\n",[38,441,442],{"class":40,"line":83},[38,443,277],{"emptyLinePlaceholder":276},[38,445,446,450,453,456,459],{"class":40,"line":116},[38,447,449],{"class":448},"s5TCs","const ",[38,451,452],{"class":64},"props",[38,454,455],{"class":44}," =",[38,457,417],{"class":458},"s_xSY",[38,460,461],{"class":44},"\u003C{\n",[38,463,464,467,470,474],{"class":40,"line":143},[38,465,466],{"class":64},"  value",[38,468,469],{"class":44},": ",[38,471,473],{"class":472},"s_NWU","number",[38,475,439],{"class":44},[38,477,478,481,483,485],{"class":40,"line":170},[38,479,480],{"class":64},"  totalRating",[38,482,469],{"class":44},[38,484,473],{"class":472},[38,486,439],{"class":44},[38,488,489],{"class":40,"line":197},[38,490,491],{"class":44},"}>();\n",[38,493,494],{"class":40,"line":224},[38,495,277],{"emptyLinePlaceholder":276},[38,497,498,500,503,505,507,510,513,515,517,519,521,523,526,528,530,533,535,538],{"class":40,"line":234},[38,499,449],{"class":448},[38,501,502],{"class":64},"emit",[38,504,455],{"class":44},[38,506,423],{"class":458},[38,508,509],{"class":44},"\u003C(",[38,511,512],{"class":64},"event",[38,514,469],{"class":44},[38,516,72],{"class":71},[38,518,324],{"class":75},[38,520,72],{"class":71},[38,522,420],{"class":44},[38,524,525],{"class":64}," value",[38,527,469],{"class":44},[38,529,473],{"class":472},[38,531,532],{"class":44},")",[38,534,364],{"class":44},[38,536,537],{"class":472}," void",[38,539,540],{"class":44},">();\n",[38,542,544,546,548],{"class":40,"line":543},10,[38,545,109],{"class":44},[38,547,389],{"class":48},[38,549,52],{"class":44},[38,551,553],{"class":40,"line":552},11,[38,554,277],{"emptyLinePlaceholder":276},[38,556,558,560,562],{"class":40,"line":557},12,[38,559,45],{"class":44},[38,561,49],{"class":48},[38,563,52],{"class":44},[38,565,567,569,571,573,575,577,579,581],{"class":40,"line":566},13,[38,568,58],{"class":44},[38,570,61],{"class":48},[38,572,65],{"class":64},[38,574,68],{"class":44},[38,576,72],{"class":71},[38,578,76],{"class":75},[38,580,72],{"class":71},[38,582,52],{"class":44},[38,584,586,588,590,593,595,597,600,602,605,607,609,611,613,615,617,619,621,623,625,627,629,631],{"class":40,"line":585},14,[38,587,86],{"class":44},[38,589,38],{"class":48},[38,591,592],{"class":64}," v-for",[38,594,68],{"class":44},[38,596,72],{"class":71},[38,598,599],{"class":75},"star in totalRating",[38,601,72],{"class":71},[38,603,604],{"class":64}," :key",[38,606,68],{"class":44},[38,608,72],{"class":71},[38,610,97],{"class":75},[38,612,72],{"class":71},[38,614,65],{"class":64},[38,616,68],{"class":44},[38,618,72],{"class":71},[38,620,97],{"class":75},[38,622,72],{"class":71},[38,624,102],{"class":44},[38,626,106],{"class":105},[38,628,109],{"class":44},[38,630,38],{"class":48},[38,632,52],{"class":44},[38,634,636,638,640],{"class":40,"line":635},15,[38,637,227],{"class":44},[38,639,61],{"class":48},[38,641,52],{"class":44},[38,643,645,647,649],{"class":40,"line":644},16,[38,646,109],{"class":44},[38,648,49],{"class":48},[38,650,52],{"class":44},[10,652,653,654,657,658,660],{},"Moving forward, we can now utilize our Rating component in another component, which has the ",[35,655,656],{},"rating"," and ",[35,659,376],{}," states, which will be supplied as props to the Rating component.",[28,662,664],{"className":30,"code":663,"language":32,"meta":33,"style":33},"\u003Cscript setup>\nimport Rating from \".\u002FRating.vue\";\nimport { ref } from \"vue\";\n\nconst rating = ref(3);\nconst totalRating = ref(5);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CRating :value=\"rating\" :total-rating=\"totalRating\" \u002F>\n\u003C\u002Ftemplate>\n",[35,665,666,676,694,715,719,740,758,766,770,778,810],{"__ignoreMap":33},[38,667,668,670,672,674],{"class":40,"line":41},[38,669,45],{"class":44},[38,671,389],{"class":48},[38,673,404],{"class":64},[38,675,52],{"class":44},[38,677,678,680,683,685,687,690,692],{"class":40,"line":55},[38,679,411],{"class":48},[38,681,682],{"class":64}," Rating",[38,684,429],{"class":48},[38,686,432],{"class":71},[38,688,689],{"class":75},".\u002FRating.vue",[38,691,72],{"class":71},[38,693,439],{"class":44},[38,695,696,698,700,703,705,707,709,711,713],{"class":40,"line":83},[38,697,411],{"class":48},[38,699,414],{"class":44},[38,701,702],{"class":64}," ref",[38,704,426],{"class":44},[38,706,429],{"class":48},[38,708,432],{"class":71},[38,710,32],{"class":75},[38,712,72],{"class":71},[38,714,439],{"class":44},[38,716,717],{"class":40,"line":116},[38,718,277],{"emptyLinePlaceholder":276},[38,720,721,724,727,729,731,733,737],{"class":40,"line":143},[38,722,723],{"class":448},"const",[38,725,726],{"class":64}," rating",[38,728,455],{"class":44},[38,730,702],{"class":458},[38,732,348],{"class":44},[38,734,736],{"class":735},"sqbOQ","3",[38,738,739],{"class":44},");\n",[38,741,742,744,747,749,751,753,756],{"class":40,"line":170},[38,743,723],{"class":448},[38,745,746],{"class":64}," totalRating",[38,748,455],{"class":44},[38,750,702],{"class":458},[38,752,348],{"class":44},[38,754,755],{"class":735},"5",[38,757,739],{"class":44},[38,759,760,762,764],{"class":40,"line":197},[38,761,109],{"class":44},[38,763,389],{"class":48},[38,765,52],{"class":44},[38,767,768],{"class":40,"line":224},[38,769,277],{"emptyLinePlaceholder":276},[38,771,772,774,776],{"class":40,"line":234},[38,773,45],{"class":44},[38,775,49],{"class":48},[38,777,52],{"class":44},[38,779,780,782,785,788,790,792,794,796,799,801,803,805,807],{"class":40,"line":543},[38,781,58],{"class":44},[38,783,784],{"class":48},"Rating",[38,786,787],{"class":64}," :value",[38,789,68],{"class":44},[38,791,72],{"class":71},[38,793,656],{"class":75},[38,795,72],{"class":71},[38,797,798],{"class":64}," :total-rating",[38,800,68],{"class":44},[38,802,72],{"class":71},[38,804,376],{"class":75},[38,806,72],{"class":71},[38,808,809],{"class":44}," \u002F>\n",[38,811,812,814,816],{"class":40,"line":552},[38,813,109],{"class":44},[38,815,49],{"class":48},[38,817,52],{"class":44},[10,819,820],{},"Indeed, it's important to note that, at this point, there haven't been any visible changes in our user interface. The reason is that we have yet to apply styles to the \"Rating\" component. Now, it's time to add the necessary styles to enhance the appearance and presentation of the \"Rating\" component:",[28,822,824],{"className":30,"code":823,"language":32,"meta":33,"style":33},"\u003Cscript lang=\"ts\" setup>\nimport { defineProps, defineEmits } from \"vue\";\n\nconst props = defineProps\u003C{\n  value: number;\n  totalRating: number;\n}>();\n\nconst emit = defineEmits\u003C(event: \"update-rating\", value: number) => void>();\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"wrapper\">\n    \u003Cspan v-for=\"star in totalRating\" :key=\"star\" class=\"star\">★\u003C\u002Fspan>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cstyle scoped>\n.wrapper {\n  display: flex;\n  align-items: center;\n  gap: 2px;\n}\n\n.star {\n  cursor: pointer;\n  color: #d8d8d8;\n}\n\n.star:hover,\n.star:active,\n.star.filled {\n  color: orange;\n}\n\u003C\u002Fstyle>\n",[35,825,826,846,870,874,886,896,906,910,914,952,960,964,972,990,1036,1044,1052,1057,1070,1080,1096,1109,1125,1131,1136,1145,1158,1174,1179,1184,1199,1213,1227,1239,1244],{"__ignoreMap":33},[38,827,828,830,832,834,836,838,840,842,844],{"class":40,"line":41},[38,829,45],{"class":44},[38,831,389],{"class":48},[38,833,392],{"class":64},[38,835,68],{"class":44},[38,837,72],{"class":71},[38,839,399],{"class":75},[38,841,72],{"class":71},[38,843,404],{"class":64},[38,845,52],{"class":44},[38,847,848,850,852,854,856,858,860,862,864,866,868],{"class":40,"line":55},[38,849,411],{"class":48},[38,851,414],{"class":44},[38,853,417],{"class":64},[38,855,420],{"class":44},[38,857,423],{"class":64},[38,859,426],{"class":44},[38,861,429],{"class":48},[38,863,432],{"class":71},[38,865,32],{"class":75},[38,867,72],{"class":71},[38,869,439],{"class":44},[38,871,872],{"class":40,"line":83},[38,873,277],{"emptyLinePlaceholder":276},[38,875,876,878,880,882,884],{"class":40,"line":116},[38,877,449],{"class":448},[38,879,452],{"class":64},[38,881,455],{"class":44},[38,883,417],{"class":458},[38,885,461],{"class":44},[38,887,888,890,892,894],{"class":40,"line":143},[38,889,466],{"class":64},[38,891,469],{"class":44},[38,893,473],{"class":472},[38,895,439],{"class":44},[38,897,898,900,902,904],{"class":40,"line":170},[38,899,480],{"class":64},[38,901,469],{"class":44},[38,903,473],{"class":472},[38,905,439],{"class":44},[38,907,908],{"class":40,"line":197},[38,909,491],{"class":44},[38,911,912],{"class":40,"line":224},[38,913,277],{"emptyLinePlaceholder":276},[38,915,916,918,920,922,924,926,928,930,932,934,936,938,940,942,944,946,948,950],{"class":40,"line":234},[38,917,449],{"class":448},[38,919,502],{"class":64},[38,921,455],{"class":44},[38,923,423],{"class":458},[38,925,509],{"class":44},[38,927,512],{"class":64},[38,929,469],{"class":44},[38,931,72],{"class":71},[38,933,324],{"class":75},[38,935,72],{"class":71},[38,937,420],{"class":44},[38,939,525],{"class":64},[38,941,469],{"class":44},[38,943,473],{"class":472},[38,945,532],{"class":44},[38,947,364],{"class":44},[38,949,537],{"class":472},[38,951,540],{"class":44},[38,953,954,956,958],{"class":40,"line":543},[38,955,109],{"class":44},[38,957,389],{"class":48},[38,959,52],{"class":44},[38,961,962],{"class":40,"line":552},[38,963,277],{"emptyLinePlaceholder":276},[38,965,966,968,970],{"class":40,"line":557},[38,967,45],{"class":44},[38,969,49],{"class":48},[38,971,52],{"class":44},[38,973,974,976,978,980,982,984,986,988],{"class":40,"line":566},[38,975,58],{"class":44},[38,977,61],{"class":48},[38,979,65],{"class":64},[38,981,68],{"class":44},[38,983,72],{"class":71},[38,985,76],{"class":75},[38,987,72],{"class":71},[38,989,52],{"class":44},[38,991,992,994,996,998,1000,1002,1004,1006,1008,1010,1012,1014,1016,1018,1020,1022,1024,1026,1028,1030,1032,1034],{"class":40,"line":585},[38,993,86],{"class":44},[38,995,38],{"class":48},[38,997,592],{"class":64},[38,999,68],{"class":44},[38,1001,72],{"class":71},[38,1003,599],{"class":75},[38,1005,72],{"class":71},[38,1007,604],{"class":64},[38,1009,68],{"class":44},[38,1011,72],{"class":71},[38,1013,97],{"class":75},[38,1015,72],{"class":71},[38,1017,65],{"class":64},[38,1019,68],{"class":44},[38,1021,72],{"class":71},[38,1023,97],{"class":75},[38,1025,72],{"class":71},[38,1027,102],{"class":44},[38,1029,106],{"class":105},[38,1031,109],{"class":44},[38,1033,38],{"class":48},[38,1035,52],{"class":44},[38,1037,1038,1040,1042],{"class":40,"line":635},[38,1039,227],{"class":44},[38,1041,61],{"class":48},[38,1043,52],{"class":44},[38,1045,1046,1048,1050],{"class":40,"line":644},[38,1047,109],{"class":44},[38,1049,49],{"class":48},[38,1051,52],{"class":44},[38,1053,1055],{"class":40,"line":1054},17,[38,1056,277],{"emptyLinePlaceholder":276},[38,1058,1060,1062,1065,1068],{"class":40,"line":1059},18,[38,1061,45],{"class":44},[38,1063,1064],{"class":48},"style",[38,1066,1067],{"class":64}," scoped",[38,1069,52],{"class":44},[38,1071,1073,1075,1077],{"class":40,"line":1072},19,[38,1074,261],{"class":44},[38,1076,76],{"class":64},[38,1078,1079],{"class":44}," {\n",[38,1081,1083,1087,1090,1094],{"class":40,"line":1082},20,[38,1084,1086],{"class":1085},"sHLBJ","  display",[38,1088,1089],{"class":44},":",[38,1091,1093],{"class":1092},"sfsYZ"," flex",[38,1095,439],{"class":44},[38,1097,1099,1102,1104,1107],{"class":40,"line":1098},21,[38,1100,1101],{"class":1085},"  align-items",[38,1103,1089],{"class":44},[38,1105,1106],{"class":1092}," center",[38,1108,439],{"class":44},[38,1110,1112,1115,1117,1120,1123],{"class":40,"line":1111},22,[38,1113,1114],{"class":1085},"  gap",[38,1116,1089],{"class":44},[38,1118,1119],{"class":735}," 2",[38,1121,1122],{"class":448},"px",[38,1124,439],{"class":44},[38,1126,1128],{"class":40,"line":1127},23,[38,1129,1130],{"class":44},"}\n",[38,1132,1134],{"class":40,"line":1133},24,[38,1135,277],{"emptyLinePlaceholder":276},[38,1137,1139,1141,1143],{"class":40,"line":1138},25,[38,1140,261],{"class":44},[38,1142,97],{"class":64},[38,1144,1079],{"class":44},[38,1146,1148,1151,1153,1156],{"class":40,"line":1147},26,[38,1149,1150],{"class":1085},"  cursor",[38,1152,1089],{"class":44},[38,1154,1155],{"class":1092}," pointer",[38,1157,439],{"class":44},[38,1159,1161,1164,1166,1169,1172],{"class":40,"line":1160},27,[38,1162,1163],{"class":1085},"  color",[38,1165,1089],{"class":44},[38,1167,1168],{"class":44}," #",[38,1170,1171],{"class":1092},"d8d8d8",[38,1173,439],{"class":44},[38,1175,1177],{"class":40,"line":1176},28,[38,1178,1130],{"class":44},[38,1180,1182],{"class":40,"line":1181},29,[38,1183,277],{"emptyLinePlaceholder":276},[38,1185,1187,1189,1191,1193,1196],{"class":40,"line":1186},30,[38,1188,261],{"class":44},[38,1190,97],{"class":64},[38,1192,1089],{"class":44},[38,1194,1195],{"class":64},"hover",[38,1197,1198],{"class":44},",\n",[38,1200,1202,1204,1206,1208,1211],{"class":40,"line":1201},31,[38,1203,261],{"class":44},[38,1205,97],{"class":64},[38,1207,1089],{"class":44},[38,1209,1210],{"class":64},"active",[38,1212,1198],{"class":44},[38,1214,1216,1218,1220,1222,1225],{"class":40,"line":1215},32,[38,1217,261],{"class":44},[38,1219,97],{"class":64},[38,1221,261],{"class":44},[38,1223,1224],{"class":64},"filled",[38,1226,1079],{"class":44},[38,1228,1230,1232,1234,1237],{"class":40,"line":1229},33,[38,1231,1163],{"class":1085},[38,1233,1089],{"class":44},[38,1235,1236],{"class":1092}," orange",[38,1238,439],{"class":44},[38,1240,1242],{"class":40,"line":1241},34,[38,1243,1130],{"class":44},[38,1245,1247,1249,1251],{"class":40,"line":1246},35,[38,1248,109],{"class":44},[38,1250,1064],{"class":48},[38,1252,52],{"class":44},[10,1254,1255,1256,1258,1259,1262,1263,1265],{},"Currently, there may not be any noticeable changes, but if you hover over the stars, you will observe a color change to orange. Our next step is to visually indicate the current rating value by conditionally applying a class to the ",[35,1257,38],{}," element. When the current star is less than or equal to the ",[35,1260,1261],{},"value"," prop that we previously declared, we will add a ",[35,1264,1224],{}," class to the element.",[28,1267,1271],{"className":1268,"code":1269,"language":1270,"meta":33,"style":33},"language-html shiki shiki-themes vitesse-light vitesse-black","\u003Cspan v-for=\"star in totalRating\" :key=\"star\" class=\"star\" :class=\"{ filled: star \u003C= value }\">★\u003C\u002Fspan>\n","html",[35,1272,1273],{"__ignoreMap":33},[38,1274,1275,1277,1279,1281,1283,1285,1287,1289,1291,1293,1295,1297,1299,1301,1303,1305,1307,1309,1312,1314,1316,1319,1322,1325,1327,1329,1331,1333,1335],{"class":40,"line":41},[38,1276,45],{"class":44},[38,1278,38],{"class":48},[38,1280,592],{"class":64},[38,1282,68],{"class":44},[38,1284,72],{"class":71},[38,1286,599],{"class":75},[38,1288,72],{"class":71},[38,1290,604],{"class":64},[38,1292,68],{"class":44},[38,1294,72],{"class":71},[38,1296,97],{"class":75},[38,1298,72],{"class":71},[38,1300,65],{"class":64},[38,1302,68],{"class":44},[38,1304,72],{"class":71},[38,1306,97],{"class":75},[38,1308,72],{"class":71},[38,1310,1311],{"class":64}," :class",[38,1313,68],{"class":44},[38,1315,72],{"class":71},[38,1317,1318],{"class":75},"{ filled: star ",[38,1320,45],{"class":1321},"s7hpK",[38,1323,1324],{"class":75},"= value }",[38,1326,72],{"class":71},[38,1328,102],{"class":44},[38,1330,106],{"class":105},[38,1332,109],{"class":44},[38,1334,38],{"class":48},[38,1336,52],{"class":44},[10,1338,1339],{},"With this modification, you can now observe the current rating value in the user interface, represented with varying colors to distinguish between filled and unfilled stars.",[10,1341,1342],{},[247,1343],{"alt":33,"src":1344},"https:\u002F\u002Fcdn.hashnode.com\u002Fres\u002Fhashnode\u002Fimage\u002Fupload\u002Fv1697141096435\u002Fff56bece-c871-40a8-966f-d740123e2639.png",[10,1346,1347,1348,1351,1352,1354],{},"The final piece to complete our implementation is to introduce a functionality for setting new ratings. We will create a ",[35,1349,1350],{},"setRating"," function for updating the rating and emitting the new value to the parent component. This function will then be attached to the ",[35,1353,38],{}," element as a click event handler.",[28,1356,1358],{"className":30,"code":1357,"language":32,"meta":33,"style":33},"\u003Cscript lang=\"ts\" setup>\nimport { defineProps, defineEmits } from \"vue\";\n\nconst props = defineProps\u003C{\n  value: number;\n  totalRating: number;\n}>();\n\nconst emit = defineEmits\u003C(event: \"update-rating\", value: number) => void>();\n\nconst setRating = (star: number) => {\n  emit(\"update-rating\", star);\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"wrapper\">\n    \u003Cspan v-for=\"star in totalRating\" :key=\"star\" class=\"star\" :class=\"{ filled: star \u003C= value }\" @click=\"setRating(star)\">★\u003C\u002Fspan>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cstyle scoped>\n.wrapper {\n  display: flex;\n  align-items: center;\n  gap: 2px;\n}\n\n.star {\n  cursor: pointer;\n  color: #d8d8d8;\n}\n\n.star:hover,\n.star:active,\n.star.filled {\n  color: orange;\n}\n\u003C\u002Fstyle>\n",[35,1359,1360,1380,1404,1408,1420,1430,1440,1444,1448,1486,1490,1513,1533,1538,1546,1550,1558,1576,1645,1653,1661,1665,1675,1683,1693,1703,1715,1719,1723,1731,1741,1753,1757,1761,1773,1785,1798,1809,1814],{"__ignoreMap":33},[38,1361,1362,1364,1366,1368,1370,1372,1374,1376,1378],{"class":40,"line":41},[38,1363,45],{"class":44},[38,1365,389],{"class":48},[38,1367,392],{"class":64},[38,1369,68],{"class":44},[38,1371,72],{"class":71},[38,1373,399],{"class":75},[38,1375,72],{"class":71},[38,1377,404],{"class":64},[38,1379,52],{"class":44},[38,1381,1382,1384,1386,1388,1390,1392,1394,1396,1398,1400,1402],{"class":40,"line":55},[38,1383,411],{"class":48},[38,1385,414],{"class":44},[38,1387,417],{"class":64},[38,1389,420],{"class":44},[38,1391,423],{"class":64},[38,1393,426],{"class":44},[38,1395,429],{"class":48},[38,1397,432],{"class":71},[38,1399,32],{"class":75},[38,1401,72],{"class":71},[38,1403,439],{"class":44},[38,1405,1406],{"class":40,"line":83},[38,1407,277],{"emptyLinePlaceholder":276},[38,1409,1410,1412,1414,1416,1418],{"class":40,"line":116},[38,1411,449],{"class":448},[38,1413,452],{"class":64},[38,1415,455],{"class":44},[38,1417,417],{"class":458},[38,1419,461],{"class":44},[38,1421,1422,1424,1426,1428],{"class":40,"line":143},[38,1423,466],{"class":64},[38,1425,469],{"class":44},[38,1427,473],{"class":472},[38,1429,439],{"class":44},[38,1431,1432,1434,1436,1438],{"class":40,"line":170},[38,1433,480],{"class":64},[38,1435,469],{"class":44},[38,1437,473],{"class":472},[38,1439,439],{"class":44},[38,1441,1442],{"class":40,"line":197},[38,1443,491],{"class":44},[38,1445,1446],{"class":40,"line":224},[38,1447,277],{"emptyLinePlaceholder":276},[38,1449,1450,1452,1454,1456,1458,1460,1462,1464,1466,1468,1470,1472,1474,1476,1478,1480,1482,1484],{"class":40,"line":234},[38,1451,449],{"class":448},[38,1453,502],{"class":64},[38,1455,455],{"class":44},[38,1457,423],{"class":458},[38,1459,509],{"class":44},[38,1461,512],{"class":64},[38,1463,469],{"class":44},[38,1465,72],{"class":71},[38,1467,324],{"class":75},[38,1469,72],{"class":71},[38,1471,420],{"class":44},[38,1473,525],{"class":64},[38,1475,469],{"class":44},[38,1477,473],{"class":472},[38,1479,532],{"class":44},[38,1481,364],{"class":44},[38,1483,537],{"class":472},[38,1485,540],{"class":44},[38,1487,1488],{"class":40,"line":543},[38,1489,277],{"emptyLinePlaceholder":276},[38,1491,1492,1494,1496,1498,1501,1503,1505,1507,1509,1511],{"class":40,"line":552},[38,1493,449],{"class":448},[38,1495,1350],{"class":458},[38,1497,455],{"class":44},[38,1499,1500],{"class":44}," (",[38,1502,97],{"class":64},[38,1504,469],{"class":44},[38,1506,473],{"class":472},[38,1508,532],{"class":44},[38,1510,364],{"class":44},[38,1512,1079],{"class":44},[38,1514,1515,1518,1520,1522,1524,1526,1528,1531],{"class":40,"line":557},[38,1516,1517],{"class":458},"  emit",[38,1519,348],{"class":44},[38,1521,72],{"class":71},[38,1523,324],{"class":75},[38,1525,72],{"class":71},[38,1527,420],{"class":44},[38,1529,1530],{"class":64}," star",[38,1532,739],{"class":44},[38,1534,1535],{"class":40,"line":566},[38,1536,1537],{"class":44},"};\n",[38,1539,1540,1542,1544],{"class":40,"line":585},[38,1541,109],{"class":44},[38,1543,389],{"class":48},[38,1545,52],{"class":44},[38,1547,1548],{"class":40,"line":635},[38,1549,277],{"emptyLinePlaceholder":276},[38,1551,1552,1554,1556],{"class":40,"line":644},[38,1553,45],{"class":44},[38,1555,49],{"class":48},[38,1557,52],{"class":44},[38,1559,1560,1562,1564,1566,1568,1570,1572,1574],{"class":40,"line":1054},[38,1561,58],{"class":44},[38,1563,61],{"class":48},[38,1565,65],{"class":64},[38,1567,68],{"class":44},[38,1569,72],{"class":71},[38,1571,76],{"class":75},[38,1573,72],{"class":71},[38,1575,52],{"class":44},[38,1577,1578,1580,1582,1584,1586,1588,1590,1592,1594,1596,1598,1600,1602,1604,1606,1608,1610,1612,1614,1616,1618,1621,1623,1626,1628,1630,1633,1635,1637,1639,1641,1643],{"class":40,"line":1059},[38,1579,86],{"class":44},[38,1581,38],{"class":48},[38,1583,592],{"class":64},[38,1585,68],{"class":44},[38,1587,72],{"class":71},[38,1589,599],{"class":75},[38,1591,72],{"class":71},[38,1593,604],{"class":64},[38,1595,68],{"class":44},[38,1597,72],{"class":71},[38,1599,97],{"class":75},[38,1601,72],{"class":71},[38,1603,65],{"class":64},[38,1605,68],{"class":44},[38,1607,72],{"class":71},[38,1609,97],{"class":75},[38,1611,72],{"class":71},[38,1613,1311],{"class":64},[38,1615,68],{"class":44},[38,1617,72],{"class":71},[38,1619,1620],{"class":75},"{ filled: star \u003C= value }",[38,1622,72],{"class":71},[38,1624,1625],{"class":64}," @click",[38,1627,68],{"class":44},[38,1629,72],{"class":71},[38,1631,1632],{"class":75},"setRating(star)",[38,1634,72],{"class":71},[38,1636,102],{"class":44},[38,1638,106],{"class":105},[38,1640,109],{"class":44},[38,1642,38],{"class":48},[38,1644,52],{"class":44},[38,1646,1647,1649,1651],{"class":40,"line":1072},[38,1648,227],{"class":44},[38,1650,61],{"class":48},[38,1652,52],{"class":44},[38,1654,1655,1657,1659],{"class":40,"line":1082},[38,1656,109],{"class":44},[38,1658,49],{"class":48},[38,1660,52],{"class":44},[38,1662,1663],{"class":40,"line":1098},[38,1664,277],{"emptyLinePlaceholder":276},[38,1666,1667,1669,1671,1673],{"class":40,"line":1111},[38,1668,45],{"class":44},[38,1670,1064],{"class":48},[38,1672,1067],{"class":64},[38,1674,52],{"class":44},[38,1676,1677,1679,1681],{"class":40,"line":1127},[38,1678,261],{"class":44},[38,1680,76],{"class":64},[38,1682,1079],{"class":44},[38,1684,1685,1687,1689,1691],{"class":40,"line":1133},[38,1686,1086],{"class":1085},[38,1688,1089],{"class":44},[38,1690,1093],{"class":1092},[38,1692,439],{"class":44},[38,1694,1695,1697,1699,1701],{"class":40,"line":1138},[38,1696,1101],{"class":1085},[38,1698,1089],{"class":44},[38,1700,1106],{"class":1092},[38,1702,439],{"class":44},[38,1704,1705,1707,1709,1711,1713],{"class":40,"line":1147},[38,1706,1114],{"class":1085},[38,1708,1089],{"class":44},[38,1710,1119],{"class":735},[38,1712,1122],{"class":448},[38,1714,439],{"class":44},[38,1716,1717],{"class":40,"line":1160},[38,1718,1130],{"class":44},[38,1720,1721],{"class":40,"line":1176},[38,1722,277],{"emptyLinePlaceholder":276},[38,1724,1725,1727,1729],{"class":40,"line":1181},[38,1726,261],{"class":44},[38,1728,97],{"class":64},[38,1730,1079],{"class":44},[38,1732,1733,1735,1737,1739],{"class":40,"line":1186},[38,1734,1150],{"class":1085},[38,1736,1089],{"class":44},[38,1738,1155],{"class":1092},[38,1740,439],{"class":44},[38,1742,1743,1745,1747,1749,1751],{"class":40,"line":1201},[38,1744,1163],{"class":1085},[38,1746,1089],{"class":44},[38,1748,1168],{"class":44},[38,1750,1171],{"class":1092},[38,1752,439],{"class":44},[38,1754,1755],{"class":40,"line":1215},[38,1756,1130],{"class":44},[38,1758,1759],{"class":40,"line":1229},[38,1760,277],{"emptyLinePlaceholder":276},[38,1762,1763,1765,1767,1769,1771],{"class":40,"line":1241},[38,1764,261],{"class":44},[38,1766,97],{"class":64},[38,1768,1089],{"class":44},[38,1770,1195],{"class":64},[38,1772,1198],{"class":44},[38,1774,1775,1777,1779,1781,1783],{"class":40,"line":1246},[38,1776,261],{"class":44},[38,1778,97],{"class":64},[38,1780,1089],{"class":44},[38,1782,1210],{"class":64},[38,1784,1198],{"class":44},[38,1786,1788,1790,1792,1794,1796],{"class":40,"line":1787},36,[38,1789,261],{"class":44},[38,1791,97],{"class":64},[38,1793,261],{"class":44},[38,1795,1224],{"class":64},[38,1797,1079],{"class":44},[38,1799,1801,1803,1805,1807],{"class":40,"line":1800},37,[38,1802,1163],{"class":1085},[38,1804,1089],{"class":44},[38,1806,1236],{"class":1092},[38,1808,439],{"class":44},[38,1810,1812],{"class":40,"line":1811},38,[38,1813,1130],{"class":44},[38,1815,1817,1819,1821],{"class":40,"line":1816},39,[38,1818,109],{"class":44},[38,1820,1064],{"class":48},[38,1822,52],{"class":44},[10,1824,1825],{},"In the parent component, we listen for the \"update-rating\" event allowing us to respond to changes in the rating value and update the rating state accordingly. This ensures that any changes made in the \"Rating\" component are reflected and managed in the parent component:",[28,1827,1829],{"className":30,"code":1828,"language":32,"meta":33,"style":33},"\u003Cscript setup>\nimport Rating from \".\u002FRating.vue\";\nimport { ref } from \"vue\";\n\nconst rating = ref(3);\nconst totalRating = ref(5);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CRating :value=\"rating\" :total-rating=\"totalRating\" @update-rating=\"rating = $event\" \u002F>\n\u003C\u002Ftemplate>\n",[35,1830,1831,1841,1857,1877,1881,1897,1913,1921,1925,1933,1973],{"__ignoreMap":33},[38,1832,1833,1835,1837,1839],{"class":40,"line":41},[38,1834,45],{"class":44},[38,1836,389],{"class":48},[38,1838,404],{"class":64},[38,1840,52],{"class":44},[38,1842,1843,1845,1847,1849,1851,1853,1855],{"class":40,"line":55},[38,1844,411],{"class":48},[38,1846,682],{"class":64},[38,1848,429],{"class":48},[38,1850,432],{"class":71},[38,1852,689],{"class":75},[38,1854,72],{"class":71},[38,1856,439],{"class":44},[38,1858,1859,1861,1863,1865,1867,1869,1871,1873,1875],{"class":40,"line":83},[38,1860,411],{"class":48},[38,1862,414],{"class":44},[38,1864,702],{"class":64},[38,1866,426],{"class":44},[38,1868,429],{"class":48},[38,1870,432],{"class":71},[38,1872,32],{"class":75},[38,1874,72],{"class":71},[38,1876,439],{"class":44},[38,1878,1879],{"class":40,"line":116},[38,1880,277],{"emptyLinePlaceholder":276},[38,1882,1883,1885,1887,1889,1891,1893,1895],{"class":40,"line":143},[38,1884,723],{"class":448},[38,1886,726],{"class":64},[38,1888,455],{"class":44},[38,1890,702],{"class":458},[38,1892,348],{"class":44},[38,1894,736],{"class":735},[38,1896,739],{"class":44},[38,1898,1899,1901,1903,1905,1907,1909,1911],{"class":40,"line":170},[38,1900,723],{"class":448},[38,1902,746],{"class":64},[38,1904,455],{"class":44},[38,1906,702],{"class":458},[38,1908,348],{"class":44},[38,1910,755],{"class":735},[38,1912,739],{"class":44},[38,1914,1915,1917,1919],{"class":40,"line":197},[38,1916,109],{"class":44},[38,1918,389],{"class":48},[38,1920,52],{"class":44},[38,1922,1923],{"class":40,"line":224},[38,1924,277],{"emptyLinePlaceholder":276},[38,1926,1927,1929,1931],{"class":40,"line":234},[38,1928,45],{"class":44},[38,1930,49],{"class":48},[38,1932,52],{"class":44},[38,1934,1935,1937,1939,1941,1943,1945,1947,1949,1951,1953,1955,1957,1959,1962,1964,1966,1969,1971],{"class":40,"line":543},[38,1936,58],{"class":44},[38,1938,784],{"class":48},[38,1940,787],{"class":64},[38,1942,68],{"class":44},[38,1944,72],{"class":71},[38,1946,656],{"class":75},[38,1948,72],{"class":71},[38,1950,798],{"class":64},[38,1952,68],{"class":44},[38,1954,72],{"class":71},[38,1956,376],{"class":75},[38,1958,72],{"class":71},[38,1960,1961],{"class":64}," @update-rating",[38,1963,68],{"class":44},[38,1965,72],{"class":71},[38,1967,1968],{"class":75},"rating = $event",[38,1970,72],{"class":71},[38,1972,809],{"class":44},[38,1974,1975,1977,1979],{"class":40,"line":552},[38,1976,109],{"class":44},[38,1978,49],{"class":48},[38,1980,52],{"class":44},[10,1982,1983,1984,1989],{},"Excellent! We've successfully created a reusable Rating component that enables users to review and rate products or any other items in your project. This component can be further extended to accommodate various icons or symbols by utilizing ",[20,1985,1988],{"href":1986,"rel":1987},"https:\u002F\u002Fvuejs.org\u002Fguide\u002Fcomponents\u002Fslots.html",[24],"slots",". Additionally, it can be customized to display the rating of a product or other items without allowing user interaction.",[1064,1991,1992],{},"html pre.shiki code .stPdD, html code.shiki .stPdD{--shiki-default:#999999;--shiki-dark:#444444}html pre.shiki code .sTPum, html code.shiki .sTPum{--shiki-default:#1E754F;--shiki-dark:#4D9375}html pre.shiki code .s9nN2, html code.shiki .s9nN2{--shiki-default:#B07D48;--shiki-dark:#BD976A}html pre.shiki code .scnC2, html code.shiki .scnC2{--shiki-default:#B5695977;--shiki-dark:#C98A7D77}html pre.shiki code .spP0B, html code.shiki .spP0B{--shiki-default:#B56959;--shiki-dark:#C98A7D}html pre.shiki code .slSvp, html code.shiki .slSvp{--shiki-default:#393A34;--shiki-dark:#DBD7CACC}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 .sGGdt, html code.shiki .sGGdt{--shiki-default:#999999;--shiki-default-font-style:italic;--shiki-dark:#444444;--shiki-dark-font-style:italic}html pre.shiki code .s5TCs, html code.shiki .s5TCs{--shiki-default:#AB5959;--shiki-dark:#CB7676}html pre.shiki code .s_xSY, html code.shiki .s_xSY{--shiki-default:#59873A;--shiki-dark:#80A665}html pre.shiki code .s_NWU, html code.shiki .s_NWU{--shiki-default:#2E8F82;--shiki-dark:#5DA994}html pre.shiki code .sqbOQ, html code.shiki .sqbOQ{--shiki-default:#2F798A;--shiki-dark:#4C9A91}html pre.shiki code .sHLBJ, html code.shiki .sHLBJ{--shiki-default:#998418;--shiki-dark:#B8A965}html pre.shiki code .sfsYZ, html code.shiki .sfsYZ{--shiki-default:#A65E2B;--shiki-dark:#C99076}html pre.shiki code .s7hpK, html code.shiki .s7hpK{--shiki-default:#B31D28;--shiki-default-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic}",{"title":33,"searchDepth":55,"depth":55,"links":1994},[],"A rating component which is sometimes referred to as a star rating component, is a user-facing element that allows users to provide feedback or rate something, typically on a scale, and just to display the rating of something sometimes. It's used in ...","2023-10-12T21:06:23.034Z","md",{},"\u002Fblog\u002Fbuilding-a-simple-rating-component-with-vue-3","4",{"title":5,"description":12},"building-a-simple-rating-component-with-vue-3","blog\u002Fbuilding-a-simple-rating-component-with-vue-3","nstA4Ec4f5l6nGJCloeI2rpNJsIKvHq6a6gHNHABPeI",1777557962590]