[{"data":1,"prerenderedAt":1045},["ShallowReactive",2],{"blog-\u002Fblog\u002Fv-card-in-depth":3,"blog-\u002Fblog\u002Fv-card-in-depth-surround":1002,"blog-related":1013},{"id":4,"title":5,"body":6,"date":987,"description":988,"extension":989,"meta":990,"minutes":267,"navigation":991,"path":992,"seo":993,"stem":994,"subtitle":995,"tags":996,"__hash__":1001},"blog\u002Fblog\u002Fv-card-in-depth.md","V-Card In Depth",{"type":7,"value":8,"toc":977},"minimark",[9,14,29,33,36,49,52,55,101,104,108,133,136,142,145,149,159,169,286,293,364,373,420,433,448,450,482,487,508,510,532,536,539,557,562,578,583,591,766,772,776,793,807,901,911,948,954,960,973],[10,11,13],"h2",{"id":12},"introduction","Introduction",[15,16,17,18,28],"p",{},"As someone who loves Vuetify and formally a contributor. I wanted to dive back in and see all the amazing changes the made in this newest version over the past years. My first thought was to dive into one of my long time favorite and most used component ",[19,20,21],"strong",{},[22,23,27],"a",{"href":24,"rel":25},"https:\u002F\u002Fgithub.com\u002Fvuetifyjs\u002Fvuetify\u002Fblob\u002Fnext\u002Fpackages\u002Fvuetify\u002Fsrc\u002Fcomponents\u002FVCard\u002FVCard.tsx",[26],"nofollow","V-Card",".",[10,30,32],{"id":31},"overview","Overview",[15,34,35],{},"Diving into the Vuetify Component Library can be overwhelming. I decided to break down the V-Card component into a 3 areas I wanted to explore.",[37,38,39,43,46],"ol",{},[40,41,42],"li",{},"How does it get exported for use?",[40,44,45],{},"How is the component created?",[40,47,48],{},"How am I able to use the props\u002Fattributes available in this component?",[10,50,42],{"id":51},"how-does-it-get-exported-for-use",[15,53,54],{},"When we install Vuetify into our application we are able to import the V-Card like this:",[56,57,62],"pre",{"className":58,"code":59,"language":60,"meta":61,"style":61},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { VCard } from 'vueitfy';\n","ts","",[63,64,65],"code",{"__ignoreMap":61},[66,67,70,74,78,82,85,88,91,95,98],"span",{"class":68,"line":69},"line",1,[66,71,73],{"class":72},"s7zQu","import",[66,75,77],{"class":76},"sMK4o"," {",[66,79,81],{"class":80},"sTEyZ"," VCard",[66,83,84],{"class":76}," }",[66,86,87],{"class":72}," from",[66,89,90],{"class":76}," '",[66,92,94],{"class":93},"sfazB","vueitfy",[66,96,97],{"class":76},"'",[66,99,100],{"class":76},";\n",[15,102,103],{},"A line many of us are familiar with. How does this work and where do all of the exports for other components? The flow of exporting the card component is as follows:",[105,106],"img",{"src":107},"https:\u002F\u002Fimagedelivery.net\u002FnGYhisqu4x6SCDrz5V8Qxg\u002Fae7eebc1-8f0c-4a60-333e-7e90d8555d00\u002Fpublic",[15,109,110,111,114,115,118,119,122,123,128,129,132],{},"Once the component is exported to the ",[63,112,113],{},"index.ts"," of the ",[63,116,117],{},"\u002Fcomponents"," folder. Vuetify runs a build script (",[63,120,121],{},"yarn build",") to package it. This is where the magic happens. The build script uses ",[22,124,127],{"href":125,"rel":126},"https:\u002F\u002Frollupjs.org\u002Fguide\u002Fen\u002F",[26],"rollup"," to bundle the component and other parts of vuetify into a single folder for distribution. This ",[63,130,131],{},"dist"," folder is what we use\u002Frefrence when we import Vuetify into our application.",[105,134],{"src":135},"https:\u002F\u002Fimagedelivery.net\u002FnGYhisqu4x6SCDrz5V8Qxg\u002Fa10baf86-0213-40a7-41f8-bb6f643b2f00\u002Fpublic",[15,137,138,139,141],{},"(Results of ",[63,140,121],{},")",[15,143,144],{},"This is how Vuetify we go from a component being defined in the Vuetify codebase to being packages and exposed to us for use in our application.",[10,146,148],{"id":147},"how-is-it-created","How Is It Created?",[15,150,151,152,155],{},"Diving into the codebase, I found the V-Card component in: ",[63,153,154],{},"vuetify>src>components>VCard",[105,156],{"alt":157,"src":158},"Vuetify V-Card Directory Image","https:\u002F\u002Fimagedelivery.net\u002FnGYhisqu4x6SCDrz5V8Qxg\u002F66f9c179-62d7-4ab0-c64e-5a46fb0d8500\u002Fpublic",[15,160,161,162,165,166,168],{},"The first thing I noticed was the ",[63,163,164],{},"VCard.tsx"," file. This is the main file orchestrating the composition and use of other components within the same directory. Inside the ",[63,167,164],{}," file we see the various components being imported and used throughout the file.",[56,170,172],{"className":58,"code":171,"language":60,"meta":61,"style":61},"\u002F\u002F Components\nimport { VCardActions } from '.\u002FVCardActions'\nimport { VCardItem } from '.\u002FVCardItem'\nimport { VCardText } from '.\u002FVCardText'\nimport { VDefaultsProvider } from '@\u002Fcomponents\u002FVDefaultsProvider'\nimport { VImg } from '@\u002Fcomponents\u002FVImg'\n\n",[63,173,174,180,202,223,244,265],{"__ignoreMap":61},[66,175,176],{"class":68,"line":69},[66,177,179],{"class":178},"sHwdD","\u002F\u002F Components\n",[66,181,183,185,187,190,192,194,196,199],{"class":68,"line":182},2,[66,184,73],{"class":72},[66,186,77],{"class":76},[66,188,189],{"class":80}," VCardActions",[66,191,84],{"class":76},[66,193,87],{"class":72},[66,195,90],{"class":76},[66,197,198],{"class":93},".\u002FVCardActions",[66,200,201],{"class":76},"'\n",[66,203,205,207,209,212,214,216,218,221],{"class":68,"line":204},3,[66,206,73],{"class":72},[66,208,77],{"class":76},[66,210,211],{"class":80}," VCardItem",[66,213,84],{"class":76},[66,215,87],{"class":72},[66,217,90],{"class":76},[66,219,220],{"class":93},".\u002FVCardItem",[66,222,201],{"class":76},[66,224,226,228,230,233,235,237,239,242],{"class":68,"line":225},4,[66,227,73],{"class":72},[66,229,77],{"class":76},[66,231,232],{"class":80}," VCardText",[66,234,84],{"class":76},[66,236,87],{"class":72},[66,238,90],{"class":76},[66,240,241],{"class":93},".\u002FVCardText",[66,243,201],{"class":76},[66,245,247,249,251,254,256,258,260,263],{"class":68,"line":246},5,[66,248,73],{"class":72},[66,250,77],{"class":76},[66,252,253],{"class":80}," VDefaultsProvider",[66,255,84],{"class":76},[66,257,87],{"class":72},[66,259,90],{"class":76},[66,261,262],{"class":93},"@\u002Fcomponents\u002FVDefaultsProvider",[66,264,201],{"class":76},[66,266,268,270,272,275,277,279,281,284],{"class":68,"line":267},6,[66,269,73],{"class":72},[66,271,77],{"class":76},[66,273,274],{"class":80}," VImg",[66,276,84],{"class":76},[66,278,87],{"class":72},[66,280,90],{"class":76},[66,282,283],{"class":93},"@\u002Fcomponents\u002FVImg",[66,285,201],{"class":76},[15,287,288,289,292],{},"If we jump to line 50 & 51 we'll see exactly where ",[63,290,291],{},"VCard"," is defined as a component and exported for use.",[56,294,296],{"className":58,"code":295,"language":60,"meta":61,"style":61},"export const VCard = genericComponent\u003CVCardSlots>()({\n  name: 'VCard',\n  \u002F\u002F more code....\n})\n",[63,297,298,333,351,356],{"__ignoreMap":61},[66,299,300,303,307,310,313,317,320,324,327,330],{"class":68,"line":69},[66,301,302],{"class":72},"export",[66,304,306],{"class":305},"spNyl"," const",[66,308,309],{"class":80}," VCard ",[66,311,312],{"class":76},"=",[66,314,316],{"class":315},"s2Zo4"," genericComponent",[66,318,319],{"class":76},"\u003C",[66,321,323],{"class":322},"sBMFI","VCardSlots",[66,325,326],{"class":76},">",[66,328,329],{"class":80},"()(",[66,331,332],{"class":76},"{\n",[66,334,335,339,342,344,346,348],{"class":68,"line":182},[66,336,338],{"class":337},"swJcz","  name",[66,340,341],{"class":76},":",[66,343,90],{"class":76},[66,345,291],{"class":93},[66,347,97],{"class":76},[66,349,350],{"class":76},",\n",[66,352,353],{"class":68,"line":204},[66,354,355],{"class":178},"  \u002F\u002F more code....\n",[66,357,358,361],{"class":68,"line":225},[66,359,360],{"class":76},"}",[66,362,363],{"class":80},")\n",[15,365,366,367,372],{},"Why use this instad of the standard ",[22,368,371],{"href":369,"rel":370},"https:\u002F\u002Fvuejs.org\u002Fapi\u002Fgeneral.html#definecomponent",[26],"defineComponent"," as typically used in Vue applicaitons?\nexample below:",[56,374,376],{"className":58,"code":375,"language":60,"meta":61,"style":61},"export const VCard = defineComponent({\n  name: 'VCard',\n  \u002F\u002F more code....\n})\n",[63,377,378,396,410,414],{"__ignoreMap":61},[66,379,380,382,384,386,388,391,394],{"class":68,"line":69},[66,381,302],{"class":72},[66,383,306],{"class":305},[66,385,309],{"class":80},[66,387,312],{"class":76},[66,389,390],{"class":315}," defineComponent",[66,392,393],{"class":80},"(",[66,395,332],{"class":76},[66,397,398,400,402,404,406,408],{"class":68,"line":182},[66,399,338],{"class":337},[66,401,341],{"class":76},[66,403,90],{"class":76},[66,405,291],{"class":93},[66,407,97],{"class":76},[66,409,350],{"class":76},[66,411,412],{"class":68,"line":204},[66,413,355],{"class":178},[66,415,416,418],{"class":68,"line":225},[66,417,360],{"class":76},[66,419,363],{"class":80},[15,421,422,423,426,427,432],{},"TLDR: ",[63,424,425],{},"genericComponent"," essentially for the use of generic props and slots when defining components.\n",[22,428,431],{"href":429,"rel":430},"https:\u002F\u002Fgithub.com\u002Fvuetifyjs\u002Fvuetify\u002Fblob\u002Ff00e0017f0779faba82e739178a92078fd986967\u002Fpackages\u002Fvuetify\u002Fsrc\u002Futil\u002FdefineComponent.tsx#L180",[26],"view here"," for more details.",[15,434,435,436,441,442,447],{},"Jumping to ",[22,437,440],{"href":438,"rel":439},"https:\u002F\u002Fgithub.com\u002Fvuetifyjs\u002Fvuetify\u002Fblob\u002Ff00e0017f0779faba82e739178a92078fd986967\u002Fpackages\u002Fvuetify\u002Fsrc\u002Fcomponents\u002FVCard\u002FVCard.tsx#L110",[26],"line 110"," we are able to see exactly where the VCard componnet is initiating rendering and ",[22,443,446],{"href":444,"rel":445},"https:\u002F\u002Fgithub.com\u002Fvuetifyjs\u002Fvuetify\u002Fblob\u002Ff00e0017f0779faba82e739178a92078fd986967\u002Fpackages\u002Fvuetify\u002Fsrc\u002Fcomponents\u002FVCard\u002FVCard.tsx#L121",[26],"line 121"," is where we start builing the components template.",[15,449,440],{},[56,451,453],{"className":58,"code":452,"language":60,"meta":61,"style":61},"useRender(() => {\n\u002F\u002F more code.....\n})\n",[63,454,455,471,476],{"__ignoreMap":61},[66,456,457,460,462,465,468],{"class":68,"line":69},[66,458,459],{"class":315},"useRender",[66,461,393],{"class":80},[66,463,464],{"class":76},"()",[66,466,467],{"class":305}," =>",[66,469,470],{"class":76}," {\n",[66,472,473],{"class":68,"line":182},[66,474,475],{"class":178},"\u002F\u002F more code.....\n",[66,477,478,480],{"class":68,"line":204},[66,479,360],{"class":76},[66,481,363],{"class":80},[15,483,484,486],{},[63,485,459],{}," is a custom rendering function that essentially does the following:",[488,489,490,501],"ul",{},[40,491,492,493],{},"Gets the current instance of the Node\n",[488,494,495,498],{},[40,496,497],{},"Checks if it's called inside a \"setup\" function",[40,499,500],{},"If it is, it returns the view model",[40,502,503,504,507],{},"It takes the valid view model and uses 'vue 3' ",[63,505,506],{},".render","  function to return the valid vue model as a Virtual DOM tree to be added to our applications VDOM Tree.",[15,509,446],{},[56,511,513],{"className":58,"code":512,"language":60,"meta":61,"style":61},"return (\n\u002F\u002F building our component....\n)\n",[63,514,515,523,528],{"__ignoreMap":61},[66,516,517,520],{"class":68,"line":69},[66,518,519],{"class":72},"return",[66,521,522],{"class":80}," (\n",[66,524,525],{"class":68,"line":182},[66,526,527],{"class":178},"\u002F\u002F building our component....\n",[66,529,530],{"class":68,"line":204},[66,531,363],{"class":80},[10,533,535],{"id":534},"parts-of-the-component","Parts of the Component.",[15,537,538],{},"The component can be broken down into several parts:",[488,540,541,548,551,554],{},[40,542,543,544,547],{},"Shell: Where we see the ",[63,545,546],{},"\u003CTag>\u003C\u002FTag>"," component encapsulating the innards of V-Card",[40,549,550],{},"Layout: The parts of the components that render conditially based upon the variables with the prefix \"has\" and slots (ex. hasImage, hasText, slots.action, slots.image, ect.)",[40,552,553],{},"Props\u002FOptions: The attributes\u002Fprops section is where the default options are declared to interact\u002Fmodify the V-Card Component. ex.(onClick, title, subtitle, actions, ect.)",[40,555,556],{},"Classes: Where the component inherits both V-Card specific CSS classes and globally configured classes.",[558,559,561],"h4",{"id":560},"shell","Shell",[15,563,564,565,570,571,574,575,577],{},"Inside the return statement on ",[22,566,569],{"href":567,"rel":568},"https:\u002F\u002Fgithub.com\u002Fvuetifyjs\u002Fvuetify\u002Fblob\u002Ff00e0017f0779faba82e739178a92078fd986967\u002Fpackages\u002Fvuetify\u002Fsrc\u002Fcomponents\u002FVCard\u002FVCard.tsx#L122",[26],"line 122"," we see ",[63,572,573],{},"\u003CTag>",". What exactly is this \"Tag\" component? The ",[63,576,573],{}," component is essentially an agnostic component that inherits the name of the defined component's name property.\n(Fact check. Looks likes it's a div by default.)",[579,580,582],"h3",{"id":581},"layout","Layout",[15,584,585,586,341],{},"Inside the shell the layout is defined. There are a multitude of ternary statements determining what to render. An example of this is on ",[22,587,590],{"href":588,"rel":589},"https:\u002F\u002Fgithub.com\u002Fvuetifyjs\u002Fvuetify\u002Fblob\u002Ff00e0017f0779faba82e739178a92078fd986967\u002Fpackages\u002Fvuetify\u002Fsrc\u002Fcomponents\u002FVCard\u002FVCard.tsx#L1513",[26],"line 151",[56,592,594],{"className":58,"code":593,"language":60,"meta":61,"style":61},"{ hasImage && (\n    \u003CVDefaultsProvider\n      key=\"image\"\n      defaults={{\n        VImg: {\n          cover: true,\n          src: props.image,\n        },\n      }}\n    >\n      \u003Cdiv class=\"v-card__image\">\n        { slots.image?.() ?? \u003CVImg \u002F> }\n      \u003C\u002Fdiv>\n    \u003C\u002FVDefaultsProvider>\n  ) \n}\n",[63,595,596,609,617,633,641,650,663,680,686,692,698,722,734,744,755,761],{"__ignoreMap":61},[66,597,598,601,604,607],{"class":68,"line":69},[66,599,600],{"class":76},"{",[66,602,603],{"class":80}," hasImage",[66,605,606],{"class":76}," &&",[66,608,522],{"class":337},[66,610,611,614],{"class":68,"line":182},[66,612,613],{"class":76},"    \u003C",[66,615,616],{"class":80},"VDefaultsProvider\n",[66,618,619,622,624,627,630],{"class":68,"line":204},[66,620,621],{"class":80},"      key",[66,623,312],{"class":76},[66,625,626],{"class":76},"\"",[66,628,629],{"class":93},"image",[66,631,632],{"class":76},"\"\n",[66,634,635,638],{"class":68,"line":225},[66,636,637],{"class":80},"      defaults",[66,639,640],{"class":76},"={{\n",[66,642,643,646,648],{"class":68,"line":246},[66,644,645],{"class":322},"        VImg",[66,647,341],{"class":76},[66,649,470],{"class":76},[66,651,652,655,657,661],{"class":68,"line":267},[66,653,654],{"class":322},"          cover",[66,656,341],{"class":76},[66,658,660],{"class":659},"sfNiH"," true",[66,662,350],{"class":76},[66,664,666,669,671,674,676,678],{"class":68,"line":665},7,[66,667,668],{"class":322},"          src",[66,670,341],{"class":76},[66,672,673],{"class":80}," props",[66,675,28],{"class":76},[66,677,629],{"class":80},[66,679,350],{"class":76},[66,681,683],{"class":68,"line":682},8,[66,684,685],{"class":76},"        },\n",[66,687,689],{"class":68,"line":688},9,[66,690,691],{"class":76},"      }}\n",[66,693,695],{"class":68,"line":694},10,[66,696,697],{"class":76},"    >\n",[66,699,701,704,707,710,712,714,717,719],{"class":68,"line":700},11,[66,702,703],{"class":76},"      \u003C",[66,705,706],{"class":80},"div",[66,708,709],{"class":80}," class",[66,711,312],{"class":76},[66,713,626],{"class":76},[66,715,716],{"class":93},"v-card__image",[66,718,626],{"class":76},[66,720,721],{"class":76},">\n",[66,723,725,728,731],{"class":68,"line":724},12,[66,726,727],{"class":76},"        {",[66,729,730],{"class":337}," slots.image?.() ?? \u003CVImg \u002F> ",[66,732,733],{"class":76},"}\n",[66,735,737,740,742],{"class":68,"line":736},13,[66,738,739],{"class":76},"      \u003C\u002F",[66,741,706],{"class":80},[66,743,721],{"class":76},[66,745,747,750,753],{"class":68,"line":746},14,[66,748,749],{"class":76},"    \u003C\u002F",[66,751,752],{"class":80},"VDefaultsProvider",[66,754,721],{"class":76},[66,756,758],{"class":68,"line":757},15,[66,759,760],{"class":337},"  ) \n",[66,762,764],{"class":68,"line":763},16,[66,765,733],{"class":76},[15,767,768,769,771],{},"This statement is determining if there's an image if there is we render it! tag is rendered inside the div with ",[63,770,716],{}," styling. Throughout the rest of the card component we have a very similar pattern for card item, text, actions, ect. This is great because it allows for a clean\u002Fmodular way to identify and render parts of the component. If we wanted to add our own custom part we'd follow the exact pattern.",[10,773,775],{"id":774},"how-am-i-able-to-use-the-props-attributes-in-this-component","How am I able to use the props & attributes in this component?",[15,777,778,779,782,783,786,787,789,790],{},"Using props and attributes in the card component is quite straight forward. Let's look at the ",[19,780,781],{},"flat"," prop. In the ",[63,784,785],{},"\u003CVCard \u002F>"," component we use the prop ",[19,788,781],{}," to remove the card shadow and border.\nExample:\n",[63,791,792],{},"\u003Cv-card flat \u002F>",[15,794,795,796,798,799,801,802,28],{},"Inside the ",[63,797,291],{}," component we accept a boolean prop called ",[19,800,781],{}," ",[22,803,806],{"href":804,"rel":805},"https:\u002F\u002Fgithub.com\u002Fvuetifyjs\u002Fvuetify\u002Fblob\u002Ff00e0017f0779faba82e739178a92078fd986967\u002Fpackages\u002Fvuetify\u002Fsrc\u002Fcomponents\u002FVCard\u002FVCard.tsx#L59",[26],"line 59",[56,808,812],{"className":809,"code":810,"language":811,"meta":61,"style":61},"language-tsx shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","props: {\n    appendAvatar: String,\n    appendIcon: IconValue,\n    disabled: Boolean,\n    flat: Boolean, \u002F\u002F here\n    hover: Boolean,\n    image: String,\n    \u002F\u002F more code.....\n","tsx",[63,813,814,823,835,847,859,874,885,896],{"__ignoreMap":61},[66,815,816,819,821],{"class":68,"line":69},[66,817,818],{"class":322},"props",[66,820,341],{"class":76},[66,822,470],{"class":76},[66,824,825,828,830,833],{"class":68,"line":182},[66,826,827],{"class":322},"    appendAvatar",[66,829,341],{"class":76},[66,831,832],{"class":80}," String",[66,834,350],{"class":76},[66,836,837,840,842,845],{"class":68,"line":204},[66,838,839],{"class":322},"    appendIcon",[66,841,341],{"class":76},[66,843,844],{"class":80}," IconValue",[66,846,350],{"class":76},[66,848,849,852,854,857],{"class":68,"line":225},[66,850,851],{"class":322},"    disabled",[66,853,341],{"class":76},[66,855,856],{"class":80}," Boolean",[66,858,350],{"class":76},[66,860,861,864,866,868,871],{"class":68,"line":246},[66,862,863],{"class":322},"    flat",[66,865,341],{"class":76},[66,867,856],{"class":80},[66,869,870],{"class":76},",",[66,872,873],{"class":178}," \u002F\u002F here\n",[66,875,876,879,881,883],{"class":68,"line":267},[66,877,878],{"class":322},"    hover",[66,880,341],{"class":76},[66,882,856],{"class":80},[66,884,350],{"class":76},[66,886,887,890,892,894],{"class":68,"line":665},[66,888,889],{"class":322},"    image",[66,891,341],{"class":76},[66,893,832],{"class":80},[66,895,350],{"class":76},[66,897,898],{"class":68,"line":682},[66,899,900],{"class":178},"    \u002F\u002F more code.....\n",[15,902,903,904,906,907,910],{},"Next we go inside our base of the ",[63,905,291],{}," component which is ",[63,908,909],{},"\u003CTag \u002F>"," and check two conditions",[37,912,913,930],{},[40,914,915,918,919,922,923,926,927],{},[63,916,917],{},"'v-card--flat': props.flat,"," - we apply the ",[63,920,921],{},"'v-card--flat"," class to our card component if ",[63,924,925],{},"props.flat"," is ",[63,928,929],{},"true",[40,931,932,918,935,922,938,941,942,944,945,947],{},[63,933,934],{},"'v-card--hover': props.hover && !(props.disabled || props.flat),",[63,936,937],{},"'v-card--hover'",[63,939,940],{},"props.hover"," is true AND we don't have our disabled prop or flat prop true. Since we do have a ",[19,943,781],{}," prop the ",[63,946,937],{}," class isn't applied.",[15,949,950,951,953],{},"With this we went from ",[63,952,792],{}," to checking if that prop exists. If it does exist we want to do a certain thing within our Vuetify component. Very similar to how props are used building out component in vue or any other web component framework. Not too bad right? 🙂",[15,955,956,957,959],{},"Overall the ",[63,958,291],{}," component along with many others in Vuetify are not as scary to look into once a foothole is found. The general paradigms we see are quite similar to how many people would build vue components.",[15,961,962,963,965,966,969,970,972],{},"Outside of custom components such as ",[63,964,909],{}," the pattern that's most prevalent and heavily emphasized in this library emphasis is ",[19,967,968],{},"composability",". When looking further into the component you'll see many imported composables used to make the ",[63,971,291],{}," component what it is. Hopefully this helps and you feel more comfortable diving into the internals of Vuetify! 😃",[974,975,976],"style",{},"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 .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}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 .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 .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}",{"title":61,"searchDepth":182,"depth":182,"links":978},[979,980,981,982,983,986],{"id":12,"depth":182,"text":13},{"id":31,"depth":182,"text":32},{"id":51,"depth":182,"text":42},{"id":147,"depth":182,"text":148},{"id":534,"depth":182,"text":535,"children":984},[985],{"id":581,"depth":204,"text":582},{"id":774,"depth":182,"text":775},"2023-03-08","Diving into the innards of Vuetify","md",{},true,"\u002Fblog\u002Fv-card-in-depth",{"title":5,"description":988},"blog\u002Fv-card-in-depth","Framework Breakdown:",[997,998,999,1000],"beginners","vuetify","vue","javascript","JX6-7QcdGDCgpAAm8uzLoYMjrrXRYX97SbrMDt0WNu4",[1003,1008],{"title":1004,"path":1005,"stem":1006,"description":1007,"children":-1},"Let's build a Github Profile Search Web App","\u002Fblog\u002Flets-build-a-github-profile-search-web-app","blog\u002Flets-build-a-github-profile-search-web-app","A tutorial for using the Github API",{"title":1009,"path":1010,"stem":1011,"description":1012,"children":-1},"What is a CLI","\u002Fblog\u002Fwhat-is-a-cli","blog\u002Fwhat-is-a-cli","Introduction to a Command Line Interface",[1014,1022,1024,1030,1035,1040],{"title":1015,"date":1016,"tags":1017,"path":1021},"Demystifying the ECMAScript Spec: Array.prototype.push","2026-09-22",[1018,1019,1000,1020],"intermediate","ecmascript","tutorial","\u002Fblog\u002Fdemystifying-the-ecmascript-spec-array-push",{"title":5,"date":987,"tags":1023,"path":992},[997,998,999,1000],{"title":1025,"date":1026,"tags":1027,"path":1029},"Getting Started With The Beacon API","2020-06-25",[1000,1028,1020],"web api","\u002Fblog\u002Fgetting-started-with-the-beacon-api",{"title":1031,"date":1032,"tags":1033,"path":1034},"What is Tree Shaking","2020-05-29",[997,998,999,1000],"\u002Fblog\u002Fwhat-is-tree-shaking",{"title":1009,"date":1036,"tags":1037,"path":1010},"2020-05-11",[1038,998,1039],"vue3","typescript",{"title":1004,"date":1041,"tags":1042,"path":1005},"2019-07-03",[1043,1000,1044,1020],"web project","github api",1790605409689]