[{"data":1,"prerenderedAt":1855},["ShallowReactive",2],{"navigation_docs":3,"-examples-navigation-tree":134,"-examples-navigation-tree-surround":1840,"menu-main-menu":1845},[4,31,77,108],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":30},"Getting Started","i-lucide-play","\u002Fgetting-started","1.getting-started",[10,15,20,25],{"title":11,"path":12,"stem":13,"icon":14},"Introduction","\u002Fgetting-started\u002Fintroduction","1.getting-started\u002F1.introduction","i-lucide-home",{"title":16,"path":17,"stem":18,"icon":19},"Installation","\u002Fgetting-started\u002Finstallation","1.getting-started\u002F2.installation","i-lucide-plug",{"title":21,"path":22,"stem":23,"icon":24},"Usage","\u002Fgetting-started\u002Fusage","1.getting-started\u002F4.usage","i-lucide-code",{"title":26,"path":27,"stem":28,"icon":29},"Editor","\u002Fgetting-started\u002Feditor","1.getting-started\u002F5.editor","i-lucide-wrench",false,{"title":32,"icon":33,"path":34,"stem":35,"children":36,"page":30},"Essentials","i-lucide-book","\u002Fessentials","2.essentials",[37,42,47,52,57,62,67,72],{"title":38,"path":39,"stem":40,"icon":41},"Setup Shopify","\u002Fessentials\u002Fsetup-shopify","2.essentials\u002F1.setup-shopify","i-lucide-shopping-bag",{"title":43,"path":44,"stem":45,"icon":46},"Module Config","\u002Fessentials\u002Fconfiguration","2.essentials\u002F2.configuration","i-lucide-anvil",{"title":48,"path":49,"stem":50,"icon":51},"Storefront API","\u002Fessentials\u002Fstorefront","2.essentials\u002F3.storefront","i-lucide-store",{"title":53,"path":54,"stem":55,"icon":56},"Customer API","\u002Fessentials\u002Fcustomer-account","2.essentials\u002F4.customer-account","i-lucide-user",{"title":58,"path":59,"stem":60,"icon":61},"Admin API","\u002Fessentials\u002Fadmin","2.essentials\u002F5.admin","i-lucide-shield",{"title":63,"path":64,"stem":65,"icon":66},"Error Handling","\u002Fessentials\u002Ferror-handling","2.essentials\u002F6.error-handling","i-lucide-bug",{"title":68,"path":69,"stem":70,"icon":71},"Caching","\u002Fessentials\u002Fcaching","2.essentials\u002F7.caching","i-lucide-rabbit",{"title":73,"path":74,"stem":75,"icon":76},"Analytics","\u002Fessentials\u002Fanalytics","2.essentials\u002F8.analytics","i-lucide-chart-line",{"title":78,"icon":79,"path":80,"stem":81,"children":82,"page":30},"Examples","i-lucide-chef-hat","\u002Fexamples","3.examples",[83,88,93,98,103],{"title":84,"path":85,"stem":86,"icon":87},"Navigation Menu","\u002Fexamples\u002Fnavigation-tree","3.examples\u002F1.navigation-tree","i-lucide-menu",{"title":89,"path":90,"stem":91,"icon":92},"Collection Page","\u002Fexamples\u002Fcollection-page","3.examples\u002F2.collection-page","i-lucide-group",{"title":94,"path":95,"stem":96,"icon":97},"Collection Filters","\u002Fexamples\u002Fcollection-filters","3.examples\u002F3.collection-filters","i-lucide-funnel",{"title":99,"path":100,"stem":101,"icon":102},"Product Page","\u002Fexamples\u002Fproduct-page","3.examples\u002F4.product-page","i-lucide-shirt",{"title":104,"path":105,"stem":106,"icon":107},"Using the Cart","\u002Fexamples\u002Fcart","3.examples\u002F5.cart","i-lucide-shopping-cart",{"title":109,"icon":110,"path":111,"stem":112,"children":113,"page":30},"Going Further","i-lucide-pickaxe","\u002Fgoing-further","4.going-further",[114,119,124,129],{"title":115,"path":116,"stem":117,"icon":118},"Hooks","\u002Fgoing-further\u002Fhooks","4.going-further\u002F1.hooks","i-lucide-between-horizontal-start",{"title":120,"path":121,"stem":122,"icon":123},"Codegen","\u002Fgoing-further\u002Fcodegen","4.going-further\u002F2.codegen","i-lucide-wand-sparkles",{"title":125,"path":126,"stem":127,"icon":128},"GraphQL Explorer","\u002Fgoing-further\u002Fexplorer","4.going-further\u002F3.explorer","i-lucide-app-window",{"title":130,"path":131,"stem":132,"icon":133},"Webhooks","\u002Fgoing-further\u002Fwebhooks","4.going-further\u002F4.webhooks","i-lucide-fishing-hook",{"id":135,"title":84,"body":136,"description":1833,"extension":1834,"links":1835,"meta":1836,"navigation":1837,"path":85,"seo":1838,"stem":86,"__hash__":1839},"docs\u002F3.examples\u002F1.navigation-tree.md",{"type":137,"value":138,"toc":1828},"minimark",[139,143,147,736,747,752,766,857,863,1052,1055,1059,1080,1342,1348,1352,1362,1460,1465,1824],[140,141,142],"note",{},"With the upcoming release of @shopify\u002Fhydrogen-vue the examples will be updated to use the new composables and components, so the current examples may become outdated.",[144,145,146],"p",{},"This example will show you how to create a navigation menu for your Shopify store in Nuxt.",[148,149,150],"card",{},[151,152,153,165],"tabs",{},[154,155,158],"tabs-item",{"icon":156,"label":157},"i-lucide-eye","Preview",[159,160],"example-navigation-menu",{"className":161,"handle":164},[162,163],"justify-center","pt-2","main-menu",[154,166,168],{"icon":24,"label":167},"Code",[169,170,173,638],"code-tree",{":expand-all":171,"default-value":172},"true","app\u002Fcomponents\u002FNavigationMenu.vue",[174,175,180],"pre",{"className":176,"code":177,"filename":172,"language":178,"meta":179,"style":179},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nconst props = defineProps\u003C{\n    handle: string\n}>()\n\nconst key = computed(() => `menu-${props.handle}`)\n\nconst { data: items } = await useStorefrontData(key, `#graphql\n  query GetNavigation($handle: String!, $language: LanguageCode, $country: CountryCode)\n  @inContext(language: $language, country: $country) {\n    menu(handle: $handle) {\n      ...MenuFields\n    }\n  }\n`, {\n  variables: {\n    handle: props.handle,\n    language: 'EN',\n    country: 'US',\n  },\n  transform: data => data.menu?.items?.map(item => ({\n    label: item.title,\n    to: item.url ?? undefined,\n  })) ?? [],\n})\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CUNavigationMenu :items=\"items\" \u002F>\n\u003C\u002Ftemplate>\n","vue","",[181,182,183,218,237,250,259,266,312,317,357,363,369,375,381,387,393,404,414,431,450,467,473,517,535,556,572,579,589,594,604,629],"code",{"__ignoreMap":179},[184,185,188,192,196,200,203,206,209,213,215],"span",{"class":186,"line":187},"line",1,[184,189,191],{"class":190},"sMK4o","\u003C",[184,193,195],{"class":194},"swJcz","script",[184,197,199],{"class":198},"spNyl"," setup",[184,201,202],{"class":198}," lang",[184,204,205],{"class":190},"=",[184,207,208],{"class":190},"\"",[184,210,212],{"class":211},"sfazB","ts",[184,214,208],{"class":190},[184,216,217],{"class":190},">\n",[184,219,221,224,228,230,234],{"class":186,"line":220},2,[184,222,223],{"class":198},"const",[184,225,227],{"class":226},"sTEyZ"," props ",[184,229,205],{"class":190},[184,231,233],{"class":232},"s2Zo4"," defineProps",[184,235,236],{"class":190},"\u003C{\n",[184,238,240,243,246],{"class":186,"line":239},3,[184,241,242],{"class":194},"    handle",[184,244,245],{"class":190},":",[184,247,249],{"class":248},"sBMFI"," string\n",[184,251,253,256],{"class":186,"line":252},4,[184,254,255],{"class":190},"}>",[184,257,258],{"class":226},"()\n",[184,260,262],{"class":186,"line":261},5,[184,263,265],{"emptyLinePlaceholder":264},true,"\n",[184,267,269,271,274,276,279,282,285,288,291,294,297,300,303,306,309],{"class":186,"line":268},6,[184,270,223],{"class":198},[184,272,273],{"class":226}," key ",[184,275,205],{"class":190},[184,277,278],{"class":232}," computed",[184,280,281],{"class":226},"(",[184,283,284],{"class":190},"()",[184,286,287],{"class":198}," =>",[184,289,290],{"class":190}," `",[184,292,293],{"class":211},"menu-",[184,295,296],{"class":190},"${",[184,298,299],{"class":226},"props",[184,301,302],{"class":190},".",[184,304,305],{"class":226},"handle",[184,307,308],{"class":190},"}`",[184,310,311],{"class":226},")\n",[184,313,315],{"class":186,"line":314},7,[184,316,265],{"emptyLinePlaceholder":264},[184,318,320,322,325,328,330,333,336,339,343,346,349,352,354],{"class":186,"line":319},8,[184,321,223],{"class":198},[184,323,324],{"class":190}," {",[184,326,327],{"class":194}," data",[184,329,245],{"class":190},[184,331,332],{"class":226}," items ",[184,334,335],{"class":190},"}",[184,337,338],{"class":190}," =",[184,340,342],{"class":341},"s7zQu"," await",[184,344,345],{"class":232}," useStorefrontData",[184,347,348],{"class":226},"(key",[184,350,351],{"class":190},",",[184,353,290],{"class":190},[184,355,356],{"class":211},"#graphql\n",[184,358,360],{"class":186,"line":359},9,[184,361,362],{"class":211},"  query GetNavigation($handle: String!, $language: LanguageCode, $country: CountryCode)\n",[184,364,366],{"class":186,"line":365},10,[184,367,368],{"class":211},"  @inContext(language: $language, country: $country) {\n",[184,370,372],{"class":186,"line":371},11,[184,373,374],{"class":211},"    menu(handle: $handle) {\n",[184,376,378],{"class":186,"line":377},12,[184,379,380],{"class":211},"      ...MenuFields\n",[184,382,384],{"class":186,"line":383},13,[184,385,386],{"class":211},"    }\n",[184,388,390],{"class":186,"line":389},14,[184,391,392],{"class":211},"  }\n",[184,394,396,399,401],{"class":186,"line":395},15,[184,397,398],{"class":190},"`",[184,400,351],{"class":190},[184,402,403],{"class":190}," {\n",[184,405,407,410,412],{"class":186,"line":406},16,[184,408,409],{"class":194},"  variables",[184,411,245],{"class":190},[184,413,403],{"class":190},[184,415,417,419,421,424,426,428],{"class":186,"line":416},17,[184,418,242],{"class":194},[184,420,245],{"class":190},[184,422,423],{"class":226}," props",[184,425,302],{"class":190},[184,427,305],{"class":226},[184,429,430],{"class":190},",\n",[184,432,434,437,439,442,445,448],{"class":186,"line":433},18,[184,435,436],{"class":194},"    language",[184,438,245],{"class":190},[184,440,441],{"class":190}," '",[184,443,444],{"class":211},"EN",[184,446,447],{"class":190},"'",[184,449,430],{"class":190},[184,451,453,456,458,460,463,465],{"class":186,"line":452},19,[184,454,455],{"class":194},"    country",[184,457,245],{"class":190},[184,459,441],{"class":190},[184,461,462],{"class":211},"US",[184,464,447],{"class":190},[184,466,430],{"class":190},[184,468,470],{"class":186,"line":469},20,[184,471,472],{"class":190},"  },\n",[184,474,476,479,481,484,486,488,490,493,496,499,501,504,506,509,511,514],{"class":186,"line":475},21,[184,477,478],{"class":232},"  transform",[184,480,245],{"class":190},[184,482,327],{"class":483},"sHdIc",[184,485,287],{"class":198},[184,487,327],{"class":226},[184,489,302],{"class":190},[184,491,492],{"class":226},"menu",[184,494,495],{"class":190},"?.",[184,497,498],{"class":226},"items",[184,500,495],{"class":190},[184,502,503],{"class":232},"map",[184,505,281],{"class":226},[184,507,508],{"class":483},"item",[184,510,287],{"class":198},[184,512,513],{"class":226}," (",[184,515,516],{"class":190},"{\n",[184,518,520,523,525,528,530,533],{"class":186,"line":519},22,[184,521,522],{"class":194},"    label",[184,524,245],{"class":190},[184,526,527],{"class":226}," item",[184,529,302],{"class":190},[184,531,532],{"class":226},"title",[184,534,430],{"class":190},[184,536,538,541,543,545,547,550,553],{"class":186,"line":537},23,[184,539,540],{"class":194},"    to",[184,542,245],{"class":190},[184,544,527],{"class":226},[184,546,302],{"class":190},[184,548,549],{"class":226},"url ",[184,551,552],{"class":190},"??",[184,554,555],{"class":190}," undefined,\n",[184,557,559,562,565,567,570],{"class":186,"line":558},24,[184,560,561],{"class":190},"  }",[184,563,564],{"class":226},")) ",[184,566,552],{"class":190},[184,568,569],{"class":226}," []",[184,571,430],{"class":190},[184,573,575,577],{"class":186,"line":574},25,[184,576,335],{"class":190},[184,578,311],{"class":226},[184,580,582,585,587],{"class":186,"line":581},26,[184,583,584],{"class":190},"\u003C\u002F",[184,586,195],{"class":194},[184,588,217],{"class":190},[184,590,592],{"class":186,"line":591},27,[184,593,265],{"emptyLinePlaceholder":264},[184,595,597,599,602],{"class":186,"line":596},28,[184,598,191],{"class":190},[184,600,601],{"class":194},"template",[184,603,217],{"class":190},[184,605,607,610,613,616,618,620,622,624,626],{"class":186,"line":606},29,[184,608,609],{"class":190},"  \u003C",[184,611,612],{"class":194},"UNavigationMenu",[184,614,615],{"class":190}," :",[184,617,498],{"class":198},[184,619,205],{"class":190},[184,621,208],{"class":190},[184,623,498],{"class":226},[184,625,208],{"class":190},[184,627,628],{"class":190}," \u002F>\n",[184,630,632,634,636],{"class":186,"line":631},30,[184,633,584],{"class":190},[184,635,601],{"class":194},[184,637,217],{"class":190},[174,639,643],{"className":640,"code":641,"filename":642,"language":212,"meta":179,"style":179},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","export const MENU_FRAGMENT = `#graphql\n  fragment MenuFields on Menu {\n    title\n    items {\n      ...MenuItemFields\n    }\n  }\n`\n\nexport const MENU_ITEM_FRAGMENT = `#graphql\n  fragment MenuItemFields on MenuItem {\n    title\n    url\n  }\n`\n","graphql\u002Fmenu.ts",[181,644,645,662,667,672,677,682,686,690,695,699,714,719,723,728,732],{"__ignoreMap":179},[184,646,647,650,653,656,658,660],{"class":186,"line":187},[184,648,649],{"class":341},"export",[184,651,652],{"class":198}," const",[184,654,655],{"class":226}," MENU_FRAGMENT ",[184,657,205],{"class":190},[184,659,290],{"class":190},[184,661,356],{"class":211},[184,663,664],{"class":186,"line":220},[184,665,666],{"class":211},"  fragment MenuFields on Menu {\n",[184,668,669],{"class":186,"line":239},[184,670,671],{"class":211},"    title\n",[184,673,674],{"class":186,"line":252},[184,675,676],{"class":211},"    items {\n",[184,678,679],{"class":186,"line":261},[184,680,681],{"class":211},"      ...MenuItemFields\n",[184,683,684],{"class":186,"line":268},[184,685,386],{"class":211},[184,687,688],{"class":186,"line":314},[184,689,392],{"class":211},[184,691,692],{"class":186,"line":319},[184,693,694],{"class":190},"`\n",[184,696,697],{"class":186,"line":359},[184,698,265],{"emptyLinePlaceholder":264},[184,700,701,703,705,708,710,712],{"class":186,"line":365},[184,702,649],{"class":341},[184,704,652],{"class":198},[184,706,707],{"class":226}," MENU_ITEM_FRAGMENT ",[184,709,205],{"class":190},[184,711,290],{"class":190},[184,713,356],{"class":211},[184,715,716],{"class":186,"line":371},[184,717,718],{"class":211},"  fragment MenuItemFields on MenuItem {\n",[184,720,721],{"class":186,"line":377},[184,722,671],{"class":211},[184,724,725],{"class":186,"line":383},[184,726,727],{"class":211},"    url\n",[184,729,730],{"class":186,"line":389},[184,731,392],{"class":211},[184,733,734],{"class":186,"line":395},[184,735,694],{"class":190},[144,737,738,739,743,744,302],{},"In order to follow this example, you need to have a navigation menu set up in your Shopify store.\nMake sure you have configured the ",[740,741,742],"a",{"href":44},"Nuxt Shopify module"," and have a ",[740,745,746],{"href":39},"Shopify store set up",[748,749,751],"h2",{"id":750},"obtaining-the-menu-data","Obtaining the Menu Data",[144,753,754,755,758,759,762,763,765],{},"First, we create a new component ",[181,756,757],{},"components\u002FNavigationMenu.vue",".\nHere, we use the ",[181,760,761],{},"useStorefrontData"," composable to fetch the navigation menu from Shopify.\nTo do this, we use a GraphQL query to get the menu items by their handle (e.g., ",[181,764,164],{},"):",[174,767,769],{"className":640,"code":768,"language":212,"meta":179,"style":179},"query GetNavigation($handle: String!) {\n  menu(handle: $handle) {\n    items {\n      ... on MenuItem {\n        title\n        url\n      }\n    }\n  }\n}\n",[181,770,771,790,809,816,829,834,839,844,848,852],{"__ignoreMap":179},[184,772,773,776,779,782,785,788],{"class":186,"line":187},[184,774,775],{"class":226},"query ",[184,777,778],{"class":232},"GetNavigation",[184,780,781],{"class":226},"($handle: String",[184,783,784],{"class":190},"!",[184,786,787],{"class":226},") ",[184,789,516],{"class":190},[184,791,792,795,797,799,802,805,807],{"class":186,"line":220},[184,793,794],{"class":232},"  menu",[184,796,281],{"class":194},[184,798,305],{"class":226},[184,800,801],{"class":194},": ",[184,803,804],{"class":226},"$handle",[184,806,787],{"class":194},[184,808,516],{"class":190},[184,810,811,814],{"class":186,"line":239},[184,812,813],{"class":226},"    items",[184,815,403],{"class":190},[184,817,818,821,824,827],{"class":186,"line":252},[184,819,820],{"class":190},"      ...",[184,822,823],{"class":226}," on",[184,825,826],{"class":226}," MenuItem",[184,828,403],{"class":190},[184,830,831],{"class":186,"line":261},[184,832,833],{"class":226},"        title\n",[184,835,836],{"class":186,"line":268},[184,837,838],{"class":226},"        url\n",[184,840,841],{"class":186,"line":314},[184,842,843],{"class":190},"      }\n",[184,845,846],{"class":186,"line":319},[184,847,386],{"class":190},[184,849,850],{"class":186,"line":359},[184,851,392],{"class":190},[184,853,854],{"class":186,"line":365},[184,855,856],{"class":190},"}\n",[144,858,859,860,862],{},"When using this query with the ",[181,861,761],{}," composable, we pass the handle as a variable:",[174,864,867],{"className":176,"code":865,"filename":866,"language":178,"meta":179,"style":179},"\u003Cscript setup lang=\"ts\">\nconst { data } = await useStorefrontData('menu', `#graphql\n  query GetNavigation($handle: String!) {\n    menu(handle: $handle) {\n      items {\n        ... on MenuItem {\n          title\n          url\n        }\n      }\n    }\n  }\n`, {\n  variables: {\n    handle: 'main-menu',\n  },\n})\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cpre>{{ data }}\u003C\u002Fpre>\n\u003C\u002Ftemplate>\n","~\u002Fcomponents\u002FNavigationMenu.vue",[181,868,869,889,920,925,929,934,939,944,949,954,958,962,966,974,982,996,1000,1006,1014,1018,1026,1044],{"__ignoreMap":179},[184,870,871,873,875,877,879,881,883,885,887],{"class":186,"line":187},[184,872,191],{"class":190},[184,874,195],{"class":194},[184,876,199],{"class":198},[184,878,202],{"class":198},[184,880,205],{"class":190},[184,882,208],{"class":190},[184,884,212],{"class":211},[184,886,208],{"class":190},[184,888,217],{"class":190},[184,890,891,893,895,898,900,902,904,906,908,910,912,914,916,918],{"class":186,"line":220},[184,892,223],{"class":198},[184,894,324],{"class":190},[184,896,897],{"class":226}," data ",[184,899,335],{"class":190},[184,901,338],{"class":190},[184,903,342],{"class":341},[184,905,345],{"class":232},[184,907,281],{"class":226},[184,909,447],{"class":190},[184,911,492],{"class":211},[184,913,447],{"class":190},[184,915,351],{"class":190},[184,917,290],{"class":190},[184,919,356],{"class":211},[184,921,922],{"class":186,"line":239},[184,923,924],{"class":211},"  query GetNavigation($handle: String!) {\n",[184,926,927],{"class":186,"line":252},[184,928,374],{"class":211},[184,930,931],{"class":186,"line":261},[184,932,933],{"class":211},"      items {\n",[184,935,936],{"class":186,"line":268},[184,937,938],{"class":211},"        ... on MenuItem {\n",[184,940,941],{"class":186,"line":314},[184,942,943],{"class":211},"          title\n",[184,945,946],{"class":186,"line":319},[184,947,948],{"class":211},"          url\n",[184,950,951],{"class":186,"line":359},[184,952,953],{"class":211},"        }\n",[184,955,956],{"class":186,"line":365},[184,957,843],{"class":211},[184,959,960],{"class":186,"line":371},[184,961,386],{"class":211},[184,963,964],{"class":186,"line":377},[184,965,392],{"class":211},[184,967,968,970,972],{"class":186,"line":383},[184,969,398],{"class":190},[184,971,351],{"class":190},[184,973,403],{"class":190},[184,975,976,978,980],{"class":186,"line":389},[184,977,409],{"class":194},[184,979,245],{"class":190},[184,981,403],{"class":190},[184,983,984,986,988,990,992,994],{"class":186,"line":395},[184,985,242],{"class":194},[184,987,245],{"class":190},[184,989,441],{"class":190},[184,991,164],{"class":211},[184,993,447],{"class":190},[184,995,430],{"class":190},[184,997,998],{"class":186,"line":406},[184,999,472],{"class":190},[184,1001,1002,1004],{"class":186,"line":416},[184,1003,335],{"class":190},[184,1005,311],{"class":226},[184,1007,1008,1010,1012],{"class":186,"line":433},[184,1009,584],{"class":190},[184,1011,195],{"class":194},[184,1013,217],{"class":190},[184,1015,1016],{"class":186,"line":452},[184,1017,265],{"emptyLinePlaceholder":264},[184,1019,1020,1022,1024],{"class":186,"line":469},[184,1021,191],{"class":190},[184,1023,601],{"class":194},[184,1025,217],{"class":190},[184,1027,1028,1030,1032,1035,1038,1040,1042],{"class":186,"line":475},[184,1029,609],{"class":190},[184,1031,174],{"class":194},[184,1033,1034],{"class":190},">",[184,1036,1037],{"class":226},"{{ data }}",[184,1039,584],{"class":190},[184,1041,174],{"class":194},[184,1043,217],{"class":190},[184,1045,1046,1048,1050],{"class":186,"line":519},[184,1047,584],{"class":190},[184,1049,601],{"class":194},[184,1051,217],{"class":190},[144,1053,1054],{},"The result will be a list of menu items with their titles and URLs.",[748,1056,1058],{"id":1057},"transforming-the-data","Transforming the Data",[144,1060,1061,1062,1065,1066,1068,1069,1072,1073,1076,1077,1079],{},"The ",[181,1063,1064],{},"data"," returned from the query is a good starting point, but we want to transform the data into a format that\ncan be used by a navigation component, in this case the Nuxt UI ",[181,1067,612],{},".\nTo do so, we can use the ",[181,1070,1071],{},"transform"," option of ",[181,1074,1075],{},"useAsyncData",", which is built into the ",[181,1078,761],{}," composable:",[174,1081,1083],{"className":176,"code":1082,"filename":866,"language":178,"meta":179,"style":179},"\u003Cscript setup lang=\"ts\">\nconst { data: items } = await useStorefrontData('menu', `#graphql\n  query GetNavigation($handle: String!) {\n    menu(handle: $handle) {\n      items {\n        ... on MenuItem {\n          title\n          url\n        }\n      }\n    }\n  }\n`, {\n  variables: {\n    handle: 'main-menu',\n  },\n  transform: data => data.menu?.items?.map(item => ({\n    label: item.title,\n    to: item.url,\n  })) ?? [],\n})\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CUNavigationMenu :items=\"items\" \u002F>\n\u003C\u002Ftemplate>\n",[181,1084,1085,1105,1139,1143,1147,1151,1155,1159,1163,1167,1171,1175,1179,1187,1195,1209,1213,1247,1261,1276,1288,1294,1302,1306,1314,1334],{"__ignoreMap":179},[184,1086,1087,1089,1091,1093,1095,1097,1099,1101,1103],{"class":186,"line":187},[184,1088,191],{"class":190},[184,1090,195],{"class":194},[184,1092,199],{"class":198},[184,1094,202],{"class":198},[184,1096,205],{"class":190},[184,1098,208],{"class":190},[184,1100,212],{"class":211},[184,1102,208],{"class":190},[184,1104,217],{"class":190},[184,1106,1107,1109,1111,1113,1115,1117,1119,1121,1123,1125,1127,1129,1131,1133,1135,1137],{"class":186,"line":220},[184,1108,223],{"class":198},[184,1110,324],{"class":190},[184,1112,327],{"class":194},[184,1114,245],{"class":190},[184,1116,332],{"class":226},[184,1118,335],{"class":190},[184,1120,338],{"class":190},[184,1122,342],{"class":341},[184,1124,345],{"class":232},[184,1126,281],{"class":226},[184,1128,447],{"class":190},[184,1130,492],{"class":211},[184,1132,447],{"class":190},[184,1134,351],{"class":190},[184,1136,290],{"class":190},[184,1138,356],{"class":211},[184,1140,1141],{"class":186,"line":239},[184,1142,924],{"class":211},[184,1144,1145],{"class":186,"line":252},[184,1146,374],{"class":211},[184,1148,1149],{"class":186,"line":261},[184,1150,933],{"class":211},[184,1152,1153],{"class":186,"line":268},[184,1154,938],{"class":211},[184,1156,1157],{"class":186,"line":314},[184,1158,943],{"class":211},[184,1160,1161],{"class":186,"line":319},[184,1162,948],{"class":211},[184,1164,1165],{"class":186,"line":359},[184,1166,953],{"class":211},[184,1168,1169],{"class":186,"line":365},[184,1170,843],{"class":211},[184,1172,1173],{"class":186,"line":371},[184,1174,386],{"class":211},[184,1176,1177],{"class":186,"line":377},[184,1178,392],{"class":211},[184,1180,1181,1183,1185],{"class":186,"line":383},[184,1182,398],{"class":190},[184,1184,351],{"class":190},[184,1186,403],{"class":190},[184,1188,1189,1191,1193],{"class":186,"line":389},[184,1190,409],{"class":194},[184,1192,245],{"class":190},[184,1194,403],{"class":190},[184,1196,1197,1199,1201,1203,1205,1207],{"class":186,"line":395},[184,1198,242],{"class":194},[184,1200,245],{"class":190},[184,1202,441],{"class":190},[184,1204,164],{"class":211},[184,1206,447],{"class":190},[184,1208,430],{"class":190},[184,1210,1211],{"class":186,"line":406},[184,1212,472],{"class":190},[184,1214,1215,1217,1219,1221,1223,1225,1227,1229,1231,1233,1235,1237,1239,1241,1243,1245],{"class":186,"line":416},[184,1216,478],{"class":232},[184,1218,245],{"class":190},[184,1220,327],{"class":483},[184,1222,287],{"class":198},[184,1224,327],{"class":226},[184,1226,302],{"class":190},[184,1228,492],{"class":226},[184,1230,495],{"class":190},[184,1232,498],{"class":226},[184,1234,495],{"class":190},[184,1236,503],{"class":232},[184,1238,281],{"class":226},[184,1240,508],{"class":483},[184,1242,287],{"class":198},[184,1244,513],{"class":226},[184,1246,516],{"class":190},[184,1248,1249,1251,1253,1255,1257,1259],{"class":186,"line":433},[184,1250,522],{"class":194},[184,1252,245],{"class":190},[184,1254,527],{"class":226},[184,1256,302],{"class":190},[184,1258,532],{"class":226},[184,1260,430],{"class":190},[184,1262,1263,1265,1267,1269,1271,1274],{"class":186,"line":452},[184,1264,540],{"class":194},[184,1266,245],{"class":190},[184,1268,527],{"class":226},[184,1270,302],{"class":190},[184,1272,1273],{"class":226},"url",[184,1275,430],{"class":190},[184,1277,1278,1280,1282,1284,1286],{"class":186,"line":469},[184,1279,561],{"class":190},[184,1281,564],{"class":226},[184,1283,552],{"class":190},[184,1285,569],{"class":226},[184,1287,430],{"class":190},[184,1289,1290,1292],{"class":186,"line":475},[184,1291,335],{"class":190},[184,1293,311],{"class":226},[184,1295,1296,1298,1300],{"class":186,"line":519},[184,1297,584],{"class":190},[184,1299,195],{"class":194},[184,1301,217],{"class":190},[184,1303,1304],{"class":186,"line":537},[184,1305,265],{"emptyLinePlaceholder":264},[184,1307,1308,1310,1312],{"class":186,"line":558},[184,1309,191],{"class":190},[184,1311,601],{"class":194},[184,1313,217],{"class":190},[184,1315,1316,1318,1320,1322,1324,1326,1328,1330,1332],{"class":186,"line":574},[184,1317,609],{"class":190},[184,1319,612],{"class":194},[184,1321,615],{"class":190},[184,1323,498],{"class":198},[184,1325,205],{"class":190},[184,1327,208],{"class":190},[184,1329,498],{"class":226},[184,1331,208],{"class":190},[184,1333,628],{"class":190},[184,1335,1336,1338,1340],{"class":186,"line":581},[184,1337,584],{"class":190},[184,1339,601],{"class":194},[184,1341,217],{"class":190},[144,1343,1344,1345,1347],{},"And that's it! You now have a navigation tree that fetches its data from Shopify.\nIf you want to use a different menu, just change the ",[181,1346,305],{}," variable to the handle of your desired menu in Shopify.",[748,1349,1351],{"id":1350},"making-the-component-reusable","Making the Component Reusable",[144,1353,1354,1355,1357,1358,1361],{},"At this point, it might also make sense to add a ",[181,1356,305],{}," prop to the component so you can reuse it for different menus.\nWe can also translate the menu to a specific language and country by using an ",[181,1359,1360],{},"@inContext"," directive in the GraphQL query:",[174,1363,1365],{"className":640,"code":1364,"language":212,"meta":179,"style":179},"query GetNavigation($handle: String!, $language: LanguageCode, $country: CountryCode)\n@inContext(language: $language, country: $country) {\n  menu(handle: $handle) {\n    items {\n      ... on MenuItem {\n        title\n        url\n      }\n    }\n  }\n}\n",[181,1366,1367,1386,1404,1420,1426,1436,1440,1444,1448,1452,1456],{"__ignoreMap":179},[184,1368,1369,1371,1373,1375,1378,1381,1383],{"class":186,"line":187},[184,1370,775],{"class":226},[184,1372,778],{"class":232},[184,1374,781],{"class":226},[184,1376,1377],{"class":190},"!,",[184,1379,1380],{"class":226}," $language: LanguageCode",[184,1382,351],{"class":190},[184,1384,1385],{"class":226}," $country: CountryCode)\n",[184,1387,1388,1391,1394,1397,1399,1402],{"class":186,"line":220},[184,1389,1390],{"class":190},"@",[184,1392,1393],{"class":232},"inContext",[184,1395,1396],{"class":226},"(language: $language",[184,1398,351],{"class":190},[184,1400,1401],{"class":226}," country: $country) ",[184,1403,516],{"class":190},[184,1405,1406,1408,1410,1412,1414,1416,1418],{"class":186,"line":239},[184,1407,794],{"class":232},[184,1409,281],{"class":194},[184,1411,305],{"class":226},[184,1413,801],{"class":194},[184,1415,804],{"class":226},[184,1417,787],{"class":194},[184,1419,516],{"class":190},[184,1421,1422,1424],{"class":186,"line":252},[184,1423,813],{"class":226},[184,1425,403],{"class":190},[184,1427,1428,1430,1432,1434],{"class":186,"line":261},[184,1429,820],{"class":190},[184,1431,823],{"class":226},[184,1433,826],{"class":226},[184,1435,403],{"class":190},[184,1437,1438],{"class":186,"line":268},[184,1439,833],{"class":226},[184,1441,1442],{"class":186,"line":314},[184,1443,838],{"class":226},[184,1445,1446],{"class":186,"line":319},[184,1447,843],{"class":190},[184,1449,1450],{"class":186,"line":359},[184,1451,386],{"class":190},[184,1453,1454],{"class":186,"line":365},[184,1455,392],{"class":190},[184,1457,1458],{"class":186,"line":371},[184,1459,856],{"class":190},[144,1461,1462,1463,245],{},"When adding all of this together, we get the final component.\nYou can use this component anywhere in your app, just make sure to pass the correct ",[181,1464,305],{},[174,1466,1468],{"className":176,"code":1467,"filename":866,"language":178,"meta":179,"style":179},"\u003Cscript setup lang=\"ts\">\nconst props = defineProps\u003C{\n  handle: string\n}>()\n\nconst key = computed(() => `menu-${props.handle}`)\n\nconst { data: items } = await useStorefrontData(key, `#graphql\n  query GetNavigation($handle: String!, $language: LanguageCode, $country: CountryCode)\n  @inContext(language: $language, country: $country) {\n    menu(handle: $handle) {\n      items {\n        ... on MenuItem {\n          title\n          url\n        }\n      }\n    }\n  }\n`, {\n  variables: {\n    handle: props.handle,\n    language: 'EN',\n    country: 'US',\n  },\n  transform: data => data.menu?.items?.map(item => ({\n    label: item.title,\n    to: item.url,\n  })) ?? [],\n})\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CUNavigationMenu :items=\"items\" \u002F>\n\u003C\u002Ftemplate>\n",[181,1469,1470,1490,1502,1511,1517,1521,1553,1557,1585,1589,1593,1597,1601,1605,1609,1613,1617,1621,1625,1629,1637,1645,1659,1673,1687,1691,1725,1739,1753,1765,1771,1780,1785,1794,1815],{"__ignoreMap":179},[184,1471,1472,1474,1476,1478,1480,1482,1484,1486,1488],{"class":186,"line":187},[184,1473,191],{"class":190},[184,1475,195],{"class":194},[184,1477,199],{"class":198},[184,1479,202],{"class":198},[184,1481,205],{"class":190},[184,1483,208],{"class":190},[184,1485,212],{"class":211},[184,1487,208],{"class":190},[184,1489,217],{"class":190},[184,1491,1492,1494,1496,1498,1500],{"class":186,"line":220},[184,1493,223],{"class":198},[184,1495,227],{"class":226},[184,1497,205],{"class":190},[184,1499,233],{"class":232},[184,1501,236],{"class":190},[184,1503,1504,1507,1509],{"class":186,"line":239},[184,1505,1506],{"class":194},"  handle",[184,1508,245],{"class":190},[184,1510,249],{"class":248},[184,1512,1513,1515],{"class":186,"line":252},[184,1514,255],{"class":190},[184,1516,258],{"class":226},[184,1518,1519],{"class":186,"line":261},[184,1520,265],{"emptyLinePlaceholder":264},[184,1522,1523,1525,1527,1529,1531,1533,1535,1537,1539,1541,1543,1545,1547,1549,1551],{"class":186,"line":268},[184,1524,223],{"class":198},[184,1526,273],{"class":226},[184,1528,205],{"class":190},[184,1530,278],{"class":232},[184,1532,281],{"class":226},[184,1534,284],{"class":190},[184,1536,287],{"class":198},[184,1538,290],{"class":190},[184,1540,293],{"class":211},[184,1542,296],{"class":190},[184,1544,299],{"class":226},[184,1546,302],{"class":190},[184,1548,305],{"class":226},[184,1550,308],{"class":190},[184,1552,311],{"class":226},[184,1554,1555],{"class":186,"line":314},[184,1556,265],{"emptyLinePlaceholder":264},[184,1558,1559,1561,1563,1565,1567,1569,1571,1573,1575,1577,1579,1581,1583],{"class":186,"line":319},[184,1560,223],{"class":198},[184,1562,324],{"class":190},[184,1564,327],{"class":194},[184,1566,245],{"class":190},[184,1568,332],{"class":226},[184,1570,335],{"class":190},[184,1572,338],{"class":190},[184,1574,342],{"class":341},[184,1576,345],{"class":232},[184,1578,348],{"class":226},[184,1580,351],{"class":190},[184,1582,290],{"class":190},[184,1584,356],{"class":211},[184,1586,1587],{"class":186,"line":359},[184,1588,362],{"class":211},[184,1590,1591],{"class":186,"line":365},[184,1592,368],{"class":211},[184,1594,1595],{"class":186,"line":371},[184,1596,374],{"class":211},[184,1598,1599],{"class":186,"line":377},[184,1600,933],{"class":211},[184,1602,1603],{"class":186,"line":383},[184,1604,938],{"class":211},[184,1606,1607],{"class":186,"line":389},[184,1608,943],{"class":211},[184,1610,1611],{"class":186,"line":395},[184,1612,948],{"class":211},[184,1614,1615],{"class":186,"line":406},[184,1616,953],{"class":211},[184,1618,1619],{"class":186,"line":416},[184,1620,843],{"class":211},[184,1622,1623],{"class":186,"line":433},[184,1624,386],{"class":211},[184,1626,1627],{"class":186,"line":452},[184,1628,392],{"class":211},[184,1630,1631,1633,1635],{"class":186,"line":469},[184,1632,398],{"class":190},[184,1634,351],{"class":190},[184,1636,403],{"class":190},[184,1638,1639,1641,1643],{"class":186,"line":475},[184,1640,409],{"class":194},[184,1642,245],{"class":190},[184,1644,403],{"class":190},[184,1646,1647,1649,1651,1653,1655,1657],{"class":186,"line":519},[184,1648,242],{"class":194},[184,1650,245],{"class":190},[184,1652,423],{"class":226},[184,1654,302],{"class":190},[184,1656,305],{"class":226},[184,1658,430],{"class":190},[184,1660,1661,1663,1665,1667,1669,1671],{"class":186,"line":537},[184,1662,436],{"class":194},[184,1664,245],{"class":190},[184,1666,441],{"class":190},[184,1668,444],{"class":211},[184,1670,447],{"class":190},[184,1672,430],{"class":190},[184,1674,1675,1677,1679,1681,1683,1685],{"class":186,"line":558},[184,1676,455],{"class":194},[184,1678,245],{"class":190},[184,1680,441],{"class":190},[184,1682,462],{"class":211},[184,1684,447],{"class":190},[184,1686,430],{"class":190},[184,1688,1689],{"class":186,"line":574},[184,1690,472],{"class":190},[184,1692,1693,1695,1697,1699,1701,1703,1705,1707,1709,1711,1713,1715,1717,1719,1721,1723],{"class":186,"line":581},[184,1694,478],{"class":232},[184,1696,245],{"class":190},[184,1698,327],{"class":483},[184,1700,287],{"class":198},[184,1702,327],{"class":226},[184,1704,302],{"class":190},[184,1706,492],{"class":226},[184,1708,495],{"class":190},[184,1710,498],{"class":226},[184,1712,495],{"class":190},[184,1714,503],{"class":232},[184,1716,281],{"class":226},[184,1718,508],{"class":483},[184,1720,287],{"class":198},[184,1722,513],{"class":226},[184,1724,516],{"class":190},[184,1726,1727,1729,1731,1733,1735,1737],{"class":186,"line":591},[184,1728,522],{"class":194},[184,1730,245],{"class":190},[184,1732,527],{"class":226},[184,1734,302],{"class":190},[184,1736,532],{"class":226},[184,1738,430],{"class":190},[184,1740,1741,1743,1745,1747,1749,1751],{"class":186,"line":596},[184,1742,540],{"class":194},[184,1744,245],{"class":190},[184,1746,527],{"class":226},[184,1748,302],{"class":190},[184,1750,1273],{"class":226},[184,1752,430],{"class":190},[184,1754,1755,1757,1759,1761,1763],{"class":186,"line":606},[184,1756,561],{"class":190},[184,1758,564],{"class":226},[184,1760,552],{"class":190},[184,1762,569],{"class":226},[184,1764,430],{"class":190},[184,1766,1767,1769],{"class":186,"line":631},[184,1768,335],{"class":190},[184,1770,311],{"class":226},[184,1772,1774,1776,1778],{"class":186,"line":1773},31,[184,1775,584],{"class":190},[184,1777,195],{"class":194},[184,1779,217],{"class":190},[184,1781,1783],{"class":186,"line":1782},32,[184,1784,265],{"emptyLinePlaceholder":264},[184,1786,1788,1790,1792],{"class":186,"line":1787},33,[184,1789,191],{"class":190},[184,1791,601],{"class":194},[184,1793,217],{"class":190},[184,1795,1797,1799,1801,1803,1805,1807,1809,1811,1813],{"class":186,"line":1796},34,[184,1798,609],{"class":190},[184,1800,612],{"class":194},[184,1802,615],{"class":190},[184,1804,498],{"class":198},[184,1806,205],{"class":190},[184,1808,208],{"class":190},[184,1810,498],{"class":226},[184,1812,208],{"class":190},[184,1814,628],{"class":190},[184,1816,1818,1820,1822],{"class":186,"line":1817},35,[184,1819,584],{"class":190},[184,1821,601],{"class":194},[184,1823,217],{"class":190},[1825,1826,1827],"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 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 .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html .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);}",{"title":179,"searchDepth":220,"depth":220,"links":1829},[1830,1831,1832],{"id":750,"depth":220,"text":751},{"id":1057,"depth":220,"text":1058},{"id":1350,"depth":220,"text":1351},"How to create a navigation menu for your Shopify store in Nuxt","md",null,{},{"icon":87},{"title":84,"description":1833},"6Yj540frEe9Lq5X719V3-ZFvU5TyJmHcAPbxWATA72s",[1841,1843],{"title":73,"path":74,"stem":75,"description":1842,"icon":76,"children":-1},"Send Shopify headless analytics from your Nuxt storefront",{"title":89,"path":90,"stem":91,"description":1844,"icon":92,"children":-1},"How to create a collection page for your Shopify store in Nuxt",[1846,1849,1852],{"label":1847,"to":1848},"Collections","https:\u002F\u002Fnuxt-module-store.myshopify.com\u002Fcollections",{"label":1850,"to":1851},"Blog","https:\u002F\u002Fnuxt-module-store.myshopify.com\u002Fblogs\u002Fnews",{"label":1853,"to":1854},"About","https:\u002F\u002Fnuxt-module-store.myshopify.com\u002Fpages\u002Fabout",1788560609091]