[{"data":1,"prerenderedAt":1884},["ShallowReactive",2],{"article-en-how-to-set-up-a-nuxt-3-storefront-with-medusa-2":3},{"id":4,"title":5,"body":6,"date":1875,"description":1876,"extension":1877,"meta":1878,"navigation":766,"path":1879,"published":766,"seo":1880,"stem":1881,"translationSlug":1882,"__hash__":1883},"articles_en/en/articles/how-to-set-up-a-nuxt-3-storefront-with-medusa-2.md","How to Set Up a Nuxt 3 Storefront with Medusa 2",{"type":7,"value":8,"toc":1848},"minimark",[9,14,18,53,56,60,69,74,77,103,106,112,120,127,140,144,147,154,156,160,163,167,178,186,193,197,209,247,251,261,271,277,279,283,292,296,318,321,334,338,358,473,477,485,490,533,537,545,549,557,561,570,636,644,691,699,856,864,965,973,1255,1259,1274,1277,1283,1285,1289,1293,1300,1306,1309,1323,1327,1333,1339,1352,1356,1410,1414,1423,1426,1453,1459,1667,1670,1676,1789,1793,1798,1806,1822,1828,1832,1835,1837,1841,1844],[10,11,13],"h2",{"id":12},"prerequisites","Prerequisites",[15,16,17],"p",{},"Before starting, ensure you have the following tools installed on your machine:",[19,20,21,31,39,46],"ul",{},[22,23,24],"li",{},[25,26,30],"a",{"href":27,"rel":28},"https://nodejs.org/en/download/",[29],"nofollow","Node.js v22+",[22,32,33,34],{},"A package manager: ",[25,35,38],{"href":36,"rel":37},"https://pnpm.io/fr/installation",[29],"Pnpm v9+",[22,40,41],{},[25,42,45],{"href":43,"rel":44},"https://git-scm.com/downloads",[29],"Git CLI Tool",[22,47,48],{},[25,49,52],{"href":50,"rel":51},"https://www.postgresql.org/download/",[29],"PostgreSQL",[54,55],"hr",{},[10,57,59],{"id":58},"install-medusa","Install Medusa",[15,61,62,63,68],{},"Follow the ",[25,64,67],{"href":65,"rel":66},"https://docs.medusajs.com/learn/installation",[29],"Medusa installation guide"," for detailed instructions. Here’s a streamlined version:",[70,71,73],"h3",{"id":72},"create-a-medusa-application","Create a Medusa Application",[15,75,76],{},"Run the following command to create a new Medusa application:",[78,79,84],"pre",{"className":80,"code":81,"language":82,"meta":83,"style":83},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","npx create-medusa-app@latest my-medusa-store\n","bash","",[85,86,87],"code",{"__ignoreMap":83},[88,89,92,96,100],"span",{"class":90,"line":91},"line",1,[88,93,95],{"class":94},"sBMFI","npx",[88,97,99],{"class":98},"sfazB"," create-medusa-app@latest",[88,101,102],{"class":98}," my-medusa-store\n",[15,104,105],{},"When prompted:",[107,108,109],"blockquote",{},[15,110,111],{},"Would you like to create the Next.js storefront? You can also create it later.",[15,113,114,115,119],{},"Choose ",[116,117,118],"strong",{},"No",". For this tutorial, we will use our custom Nuxt storefront instead.",[15,121,122,123,126],{},"Wait for the setup to complete. Once done, your Medusa app should automatically open a page in your browser, allowing you to log in to the Admin dashboard interface at ",[85,124,125],{},"http://localhost:9000/app",".",[19,128,129,134],{},[22,130,131,132],{},"The Admin dashboard interface: ",[85,133,125],{},[22,135,136,137],{},"API routes: ",[85,138,139],{},"http://localhost:9000",[70,141,143],{"id":142},"create-an-admin-user","Create an Admin User",[15,145,146],{},"When the Admin dashboard interface loads, fill out the registration form to create your first Admin user:",[15,148,149],{},[150,151],"img",{"alt":152,"src":153},"Admin User Registration","https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i07e996298fqtpoilpom.png",[54,155],{},[10,157,159],{"id":158},"configure-your-medusa-application","Configure Your Medusa Application",[15,161,162],{},"This tutorial isn’t focused on Medusa configuration, but we’ll cover the basic setup needed for integration with our Nuxt app.",[70,164,166],{"id":165},"update-cors-configuration","Update CORS Configuration",[15,168,169,170,173,174,177],{},"Open the ",[85,171,172],{},".env"," file in your Medusa application folder and update the ",[85,175,176],{},"STORE_CORS"," key to include the default URL of your Nuxt app:",[78,179,184],{"className":180,"code":182,"language":183},[181],"language-text","STORE_CORS=http://localhost:3000\n","text",[85,185,182],{"__ignoreMap":83},[15,187,188,189,192],{},"This allows Medusa to accept API requests from ",[85,190,191],{},"http://localhost:3000",", which is the default URL for a locally running Nuxt app.",[70,194,196],{"id":195},"add-a-new-region","Add a New Region",[15,198,199,200,208],{},"Navigate to ",[116,201,202,203],{},"Store Settings > ",[25,204,207],{"href":205,"rel":206},"http://localhost:9000/app/settings/regions",[29],"Regions"," in the Admin dashboard.",[210,211,212,218],"ol",{},[22,213,214,215,126],{},"Click ",[116,216,217],{},"Create",[22,219,220,221],{},"Fill in the details for a new region, such as:\n",[19,222,223,229,235,241],{},[22,224,225,228],{},[116,226,227],{},"Name",": United States",[22,230,231,234],{},[116,232,233],{},"Currency",": USD",[22,236,237,240],{},[116,238,239],{},"Country",": US",[22,242,243,246],{},[116,244,245],{},"Payment Provider",": Default option (e.g., Stripe if configured)",[70,248,250],{"id":249},"create-a-collection-and-add-products","Create a Collection and Add Products",[15,252,199,253,126],{},[116,254,255,256],{},"Products > ",[25,257,260],{"href":258,"rel":259},"http://localhost:9000/app/collections",[29],"Collections",[210,262,263,268],{},[22,264,214,265,267],{},[116,266,217],{}," to add a new collection (e.g., \"Latest Drops\").",[22,269,270],{},"Add products to the collection. You can select the first 3 products as an example:",[15,272,273],{},[150,274],{"alt":275,"src":276},"Add Products to Collection","https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mrwlgakn9klyt7d0ho6m.png",[54,278],{},[10,280,282],{"id":281},"install-nuxt-v3-with-v4-compatibility","Install Nuxt v3 with v4 Compatibility",[15,284,285,286,291],{},"For detailed instructions, visit ",[25,287,290],{"href":288,"rel":289},"https://nuxt.com/docs/getting-started/installation",[29],"the Nuxt installation guide",". Here’s a summary of what we’ll do:",[70,293,295],{"id":294},"create-a-nuxt-app","Create a Nuxt App",[78,297,299],{"className":80,"code":298,"language":82,"meta":83,"style":83},"pnpm dlx nuxi@latest init nuxt-medusa\n",[85,300,301],{"__ignoreMap":83},[88,302,303,306,309,312,315],{"class":90,"line":91},[88,304,305],{"class":94},"pnpm",[88,307,308],{"class":98}," dlx",[88,310,311],{"class":98}," nuxi@latest",[88,313,314],{"class":98}," init",[88,316,317],{"class":98}," nuxt-medusa\n",[15,319,320],{},"Navigate to your application folder:",[78,322,324],{"className":80,"code":323,"language":82,"meta":83,"style":83},"cd nuxt-medusa\n",[85,325,326],{"__ignoreMap":83},[88,327,328,332],{"class":90,"line":91},[88,329,331],{"class":330},"s2Zo4","cd",[88,333,317],{"class":98},[70,335,337],{"id":336},"add-compatibility-with-nuxt-v4","Add Compatibility with Nuxt v4",[210,339,340,351],{},[22,341,342,343,346,347,350],{},"Create an ",[85,344,345],{},"/app"," folder and move ",[85,348,349],{},"app.vue"," into this folder.",[22,352,353,354,357],{},"Update the ",[85,355,356],{},"nuxt.config.ts"," file:",[78,359,363],{"className":360,"code":361,"language":362,"meta":83,"style":83},"language-typescript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","export default defineNuxtConfig({\n  compatibilityDate: '2024-11-01',\n  devtools: { enabled: true },\n  future: {\n    compatibilityVersion: 4,\n  },\n});\n","typescript",[85,364,365,385,407,430,441,455,461],{"__ignoreMap":83},[88,366,367,371,374,377,381],{"class":90,"line":91},[88,368,370],{"class":369},"s7zQu","export",[88,372,373],{"class":369}," default",[88,375,376],{"class":330}," defineNuxtConfig",[88,378,380],{"class":379},"sTEyZ","(",[88,382,384],{"class":383},"sMK4o","{\n",[88,386,388,392,395,398,401,404],{"class":90,"line":387},2,[88,389,391],{"class":390},"swJcz","  compatibilityDate",[88,393,394],{"class":383},":",[88,396,397],{"class":383}," '",[88,399,400],{"class":98},"2024-11-01",[88,402,403],{"class":383},"'",[88,405,406],{"class":383},",\n",[88,408,410,413,415,418,421,423,427],{"class":90,"line":409},3,[88,411,412],{"class":390},"  devtools",[88,414,394],{"class":383},[88,416,417],{"class":383}," {",[88,419,420],{"class":390}," enabled",[88,422,394],{"class":383},[88,424,426],{"class":425},"sfNiH"," true",[88,428,429],{"class":383}," },\n",[88,431,433,436,438],{"class":90,"line":432},4,[88,434,435],{"class":390},"  future",[88,437,394],{"class":383},[88,439,440],{"class":383}," {\n",[88,442,444,447,449,453],{"class":90,"line":443},5,[88,445,446],{"class":390},"    compatibilityVersion",[88,448,394],{"class":383},[88,450,452],{"class":451},"sbssI"," 4",[88,454,406],{"class":383},[88,456,458],{"class":90,"line":457},6,[88,459,460],{"class":383},"  },\n",[88,462,464,467,470],{"class":90,"line":463},7,[88,465,466],{"class":383},"}",[88,468,469],{"class":379},")",[88,471,472],{"class":383},";\n",[70,474,476],{"id":475},"add-eslint-with-stylistic-configuration","Add ESLint with Stylistic Configuration",[15,478,62,479,484],{},[25,480,483],{"href":481,"rel":482},"https://eslint.nuxt.com/packages/module",[29],"ESLint installation guide",". I recommend enabling stylistic formatting:",[15,486,487,488,357],{},"Add the ESLint key to your ",[85,489,356],{},[78,491,493],{"className":360,"code":492,"language":362,"meta":83,"style":83},"eslint: {\n  config: {\n    stylistic: true,\n  },\n},\n",[85,494,495,504,513,524,528],{"__ignoreMap":83},[88,496,497,500,502],{"class":90,"line":91},[88,498,499],{"class":94},"eslint",[88,501,394],{"class":383},[88,503,440],{"class":383},[88,505,506,509,511],{"class":90,"line":387},[88,507,508],{"class":94},"  config",[88,510,394],{"class":383},[88,512,440],{"class":383},[88,514,515,518,520,522],{"class":90,"line":409},[88,516,517],{"class":94},"    stylistic",[88,519,394],{"class":383},[88,521,426],{"class":425},[88,523,406],{"class":383},[88,525,526],{"class":90,"line":432},[88,527,460],{"class":383},[88,529,530],{"class":90,"line":443},[88,531,532],{"class":383},"},\n",[70,534,536],{"id":535},"add-nuxt-ui-v3","Add Nuxt UI v3",[15,538,539,540,126],{},"Nuxt UI v3 is a library based on Reka UI (formerly Radix-Vue) and serves as a great alternative since Medusa's UI library (based on Radix Primitives) is React-only. For installation details, visit ",[25,541,544],{"href":542,"rel":543},"https://ui3.nuxt.dev/getting-started/installation/nuxt",[29],"the Nuxt UI v3 documentation",[70,546,548],{"id":547},"add-nuxt-image","Add Nuxt Image",[15,550,551,552,126],{},"E-commerce applications require optimized image handling. Use Nuxt Image for this purpose. Installation instructions are available ",[25,553,556],{"href":554,"rel":555},"https://image.nuxt.com/get-started/installation",[29],"here",[70,558,560],{"id":559},"nuxt-styling-configuration","Nuxt Styling Configuration",[210,562,563],{},[22,564,565,566,569],{},"Replace ",[85,567,568],{},"/app/app.vue"," with the following:",[78,571,575],{"className":572,"code":573,"language":574,"meta":83,"style":83},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Ctemplate>\n  \u003CUApp>\n    \u003CNuxtRouteAnnouncer />\n    \u003CNuxtPage />\n  \u003C/UApp>\n\u003C/template>\n","vue",[85,576,577,588,598,609,618,627],{"__ignoreMap":83},[88,578,579,582,585],{"class":90,"line":91},[88,580,581],{"class":383},"\u003C",[88,583,584],{"class":390},"template",[88,586,587],{"class":383},">\n",[88,589,590,593,596],{"class":90,"line":387},[88,591,592],{"class":383},"  \u003C",[88,594,595],{"class":390},"UApp",[88,597,587],{"class":383},[88,599,600,603,606],{"class":90,"line":409},[88,601,602],{"class":383},"    \u003C",[88,604,605],{"class":390},"NuxtRouteAnnouncer",[88,607,608],{"class":383}," />\n",[88,610,611,613,616],{"class":90,"line":432},[88,612,602],{"class":383},[88,614,615],{"class":390},"NuxtPage",[88,617,608],{"class":383},[88,619,620,623,625],{"class":90,"line":443},[88,621,622],{"class":383},"  \u003C/",[88,624,595],{"class":390},[88,626,587],{"class":383},[88,628,629,632,634],{"class":90,"line":457},[88,630,631],{"class":383},"\u003C/",[88,633,584],{"class":390},[88,635,587],{"class":383},[210,637,638],{"start":387},[22,639,640,641,394],{},"Create an index page ",[85,642,643],{},"/app/pages/index.vue",[78,645,647],{"className":572,"code":646,"language":574,"meta":83,"style":83},"\u003Ctemplate>\n  \u003Cdiv>\n    \u003CAppHero />\n  \u003C/div>\n\u003C/template>\n",[85,648,649,657,666,675,683],{"__ignoreMap":83},[88,650,651,653,655],{"class":90,"line":91},[88,652,581],{"class":383},[88,654,584],{"class":390},[88,656,587],{"class":383},[88,658,659,661,664],{"class":90,"line":387},[88,660,592],{"class":383},[88,662,663],{"class":390},"div",[88,665,587],{"class":383},[88,667,668,670,673],{"class":90,"line":409},[88,669,602],{"class":383},[88,671,672],{"class":390},"AppHero",[88,674,608],{"class":383},[88,676,677,679,681],{"class":90,"line":432},[88,678,622],{"class":383},[88,680,663],{"class":390},[88,682,587],{"class":383},[88,684,685,687,689],{"class":90,"line":443},[88,686,631],{"class":383},[88,688,584],{"class":390},[88,690,587],{"class":383},[210,692,693],{"start":409},[22,694,695,696,394],{},"Create a Hero component ",[85,697,698],{},"/app/components/hero.vue",[78,700,702],{"className":572,"code":701,"language":574,"meta":83,"style":83},"\u003Cscript setup lang=\"ts\">\nconst { title } = useAppConfig();\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CUContainer class=\"flex items-center justify-center h-screen bg-neutral-100\">\n    \u003Ch1 class=\"text-3xl text-primary-500 font-semibold\">\n      {{ title }}\n    \u003C/h1>\n  \u003C/UContainer>\n\u003C/template>\n",[85,703,704,731,754,762,768,776,797,817,828,838,847],{"__ignoreMap":83},[88,705,706,708,711,715,718,721,724,727,729],{"class":90,"line":91},[88,707,581],{"class":383},[88,709,710],{"class":390},"script",[88,712,714],{"class":713},"spNyl"," setup",[88,716,717],{"class":713}," lang",[88,719,720],{"class":383},"=",[88,722,723],{"class":383},"\"",[88,725,726],{"class":98},"ts",[88,728,723],{"class":383},[88,730,587],{"class":383},[88,732,733,736,738,741,743,746,749,752],{"class":90,"line":387},[88,734,735],{"class":713},"const",[88,737,417],{"class":383},[88,739,740],{"class":379}," title ",[88,742,466],{"class":383},[88,744,745],{"class":383}," =",[88,747,748],{"class":330}," useAppConfig",[88,750,751],{"class":379},"()",[88,753,472],{"class":383},[88,755,756,758,760],{"class":90,"line":409},[88,757,631],{"class":383},[88,759,710],{"class":390},[88,761,587],{"class":383},[88,763,764],{"class":90,"line":432},[88,765,767],{"emptyLinePlaceholder":766},true,"\n",[88,769,770,772,774],{"class":90,"line":443},[88,771,581],{"class":383},[88,773,584],{"class":390},[88,775,587],{"class":383},[88,777,778,780,783,786,788,790,793,795],{"class":90,"line":457},[88,779,592],{"class":383},[88,781,782],{"class":390},"UContainer",[88,784,785],{"class":713}," class",[88,787,720],{"class":383},[88,789,723],{"class":383},[88,791,792],{"class":98},"flex items-center justify-center h-screen bg-neutral-100",[88,794,723],{"class":383},[88,796,587],{"class":383},[88,798,799,801,804,806,808,810,813,815],{"class":90,"line":463},[88,800,602],{"class":383},[88,802,803],{"class":390},"h1",[88,805,785],{"class":713},[88,807,720],{"class":383},[88,809,723],{"class":383},[88,811,812],{"class":98},"text-3xl text-primary-500 font-semibold",[88,814,723],{"class":383},[88,816,587],{"class":383},[88,818,820,823,825],{"class":90,"line":819},8,[88,821,822],{"class":383},"      {{",[88,824,740],{"class":379},[88,826,827],{"class":383},"}}\n",[88,829,831,834,836],{"class":90,"line":830},9,[88,832,833],{"class":383},"    \u003C/",[88,835,803],{"class":390},[88,837,587],{"class":383},[88,839,841,843,845],{"class":90,"line":840},10,[88,842,622],{"class":383},[88,844,782],{"class":390},[88,846,587],{"class":383},[88,848,850,852,854],{"class":90,"line":849},11,[88,851,631],{"class":383},[88,853,584],{"class":390},[88,855,587],{"class":383},[210,857,858],{"start":432},[22,859,860,861,394],{},"Add ",[85,862,863],{},"/app/app.config.ts",[78,865,867],{"className":360,"code":866,"language":362,"meta":83,"style":83},"export default defineAppConfig({\n  title: 'Nuxt Medusa Storefront',\n  ui: {\n    colors: {\n      primary: 'blue',\n      neutral: 'zinc',\n    },\n  },\n});\n",[85,868,869,882,898,907,916,932,948,953,957],{"__ignoreMap":83},[88,870,871,873,875,878,880],{"class":90,"line":91},[88,872,370],{"class":369},[88,874,373],{"class":369},[88,876,877],{"class":330}," defineAppConfig",[88,879,380],{"class":379},[88,881,384],{"class":383},[88,883,884,887,889,891,894,896],{"class":90,"line":387},[88,885,886],{"class":390},"  title",[88,888,394],{"class":383},[88,890,397],{"class":383},[88,892,893],{"class":98},"Nuxt Medusa Storefront",[88,895,403],{"class":383},[88,897,406],{"class":383},[88,899,900,903,905],{"class":90,"line":409},[88,901,902],{"class":390},"  ui",[88,904,394],{"class":383},[88,906,440],{"class":383},[88,908,909,912,914],{"class":90,"line":432},[88,910,911],{"class":390},"    colors",[88,913,394],{"class":383},[88,915,440],{"class":383},[88,917,918,921,923,925,928,930],{"class":90,"line":443},[88,919,920],{"class":390},"      primary",[88,922,394],{"class":383},[88,924,397],{"class":383},[88,926,927],{"class":98},"blue",[88,929,403],{"class":383},[88,931,406],{"class":383},[88,933,934,937,939,941,944,946],{"class":90,"line":457},[88,935,936],{"class":390},"      neutral",[88,938,394],{"class":383},[88,940,397],{"class":383},[88,942,943],{"class":98},"zinc",[88,945,403],{"class":383},[88,947,406],{"class":383},[88,949,950],{"class":90,"line":463},[88,951,952],{"class":383},"    },\n",[88,954,955],{"class":90,"line":819},[88,956,460],{"class":383},[88,958,959,961,963],{"class":90,"line":830},[88,960,466],{"class":383},[88,962,469],{"class":379},[88,964,472],{"class":383},[210,966,967],{"start":443},[22,968,969,970,394],{},"Update ",[85,971,972],{},"/app/assets/css/main.css",[78,974,978],{"className":975,"code":976,"language":977,"meta":83,"style":83},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","@import \"tailwindcss\";\n@import \"@nuxt/ui\";\n\n@theme {\n  /* Declaring Font Sans */\n  --font-sans: 'Inter', sans-serif;\n\n  /* Extending default Tailwind utilities */\n  --container-8xl: 90rem;\n\n  /* Adding Nuxt UI color aliases to Tailwind colors */\n  --color-primary-50: var(--ui-color-primary-50);\n  --color-primary-100: var(--ui-color-primary-100);\n  --color-primary-200: var(--ui-color-primary-200);\n  --color-primary-300: var(--ui-color-primary-300);\n  --color-primary-400: var(--ui-color-primary-400);\n  --color-primary-500: var(--ui-color-primary-500);\n  --color-primary-600: var(--ui-color-primary-600);\n  --color-primary-700: var(--ui-color-primary-700);\n  --color-primary-800: var(--ui-color-primary-800);\n  --color-primary-900: var(--ui-color-primary-900);\n  --color-primary-950: var(--ui-color-primary-950);\n\n  /* Overriding Tailwind neutral color with the Nuxt UI neutral color */\n  --color-neutral-50: var(--ui-color-neutral-50);\n  --color-neutral-100: var(--ui-color-neutral-100);\n  --color-neutral-200: var(--ui-color-neutral-200);\n  --color-neutral-300: var(--ui-color-neutral-300);\n  --color-neutral-400: var(--ui-color-neutral-400);\n  --color-neutral-500: var(--ui-color-neutral-500);\n  --color-neutral-600: var(--ui-color-neutral-600);\n  --color-neutral-700: var(--ui-color-neutral-700);\n  --color-neutral-800: var(--ui-color-neutral-800);\n  --color-neutral-900: var(--ui-color-neutral-900);\n  --color-neutral-950: var(--ui-color-neutral-950);\n}\n\n:root {\n  /* Changing the default Nuxt UI container component size */\n  --ui-container: var(--container-8xl);\n}\n","css",[85,979,980,995,1008,1012,1019,1025,1038,1042,1047,1052,1056,1061,1067,1073,1079,1085,1091,1097,1103,1109,1115,1121,1127,1132,1138,1144,1150,1156,1162,1168,1174,1180,1186,1192,1198,1204,1210,1215,1225,1231,1250],{"__ignoreMap":83},[88,981,982,985,988,991,993],{"class":90,"line":91},[88,983,984],{"class":369},"@import",[88,986,987],{"class":383}," \"",[88,989,990],{"class":98},"tailwindcss",[88,992,723],{"class":383},[88,994,472],{"class":383},[88,996,997,999,1001,1004,1006],{"class":90,"line":387},[88,998,984],{"class":369},[88,1000,987],{"class":383},[88,1002,1003],{"class":98},"@nuxt/ui",[88,1005,723],{"class":383},[88,1007,472],{"class":383},[88,1009,1010],{"class":90,"line":409},[88,1011,767],{"emptyLinePlaceholder":766},[88,1013,1014,1017],{"class":90,"line":432},[88,1015,1016],{"class":369},"@theme",[88,1018,440],{"class":383},[88,1020,1021],{"class":90,"line":443},[88,1022,1024],{"class":1023},"sHwdD","  /* Declaring Font Sans */\n",[88,1026,1027,1030,1033,1036],{"class":90,"line":457},[88,1028,1029],{"class":379},"  --font-sans: 'Inter'",[88,1031,1032],{"class":383},",",[88,1034,1035],{"class":94}," sans-serif",[88,1037,472],{"class":379},[88,1039,1040],{"class":90,"line":463},[88,1041,767],{"emptyLinePlaceholder":766},[88,1043,1044],{"class":90,"line":819},[88,1045,1046],{"class":1023},"  /* Extending default Tailwind utilities */\n",[88,1048,1049],{"class":90,"line":830},[88,1050,1051],{"class":379},"  --container-8xl: 90rem;\n",[88,1053,1054],{"class":90,"line":840},[88,1055,767],{"emptyLinePlaceholder":766},[88,1057,1058],{"class":90,"line":849},[88,1059,1060],{"class":1023},"  /* Adding Nuxt UI color aliases to Tailwind colors */\n",[88,1062,1064],{"class":90,"line":1063},12,[88,1065,1066],{"class":379},"  --color-primary-50: var(--ui-color-primary-50);\n",[88,1068,1070],{"class":90,"line":1069},13,[88,1071,1072],{"class":379},"  --color-primary-100: var(--ui-color-primary-100);\n",[88,1074,1076],{"class":90,"line":1075},14,[88,1077,1078],{"class":379},"  --color-primary-200: var(--ui-color-primary-200);\n",[88,1080,1082],{"class":90,"line":1081},15,[88,1083,1084],{"class":379},"  --color-primary-300: var(--ui-color-primary-300);\n",[88,1086,1088],{"class":90,"line":1087},16,[88,1089,1090],{"class":379},"  --color-primary-400: var(--ui-color-primary-400);\n",[88,1092,1094],{"class":90,"line":1093},17,[88,1095,1096],{"class":379},"  --color-primary-500: var(--ui-color-primary-500);\n",[88,1098,1100],{"class":90,"line":1099},18,[88,1101,1102],{"class":379},"  --color-primary-600: var(--ui-color-primary-600);\n",[88,1104,1106],{"class":90,"line":1105},19,[88,1107,1108],{"class":379},"  --color-primary-700: var(--ui-color-primary-700);\n",[88,1110,1112],{"class":90,"line":1111},20,[88,1113,1114],{"class":379},"  --color-primary-800: var(--ui-color-primary-800);\n",[88,1116,1118],{"class":90,"line":1117},21,[88,1119,1120],{"class":379},"  --color-primary-900: var(--ui-color-primary-900);\n",[88,1122,1124],{"class":90,"line":1123},22,[88,1125,1126],{"class":379},"  --color-primary-950: var(--ui-color-primary-950);\n",[88,1128,1130],{"class":90,"line":1129},23,[88,1131,767],{"emptyLinePlaceholder":766},[88,1133,1135],{"class":90,"line":1134},24,[88,1136,1137],{"class":1023},"  /* Overriding Tailwind neutral color with the Nuxt UI neutral color */\n",[88,1139,1141],{"class":90,"line":1140},25,[88,1142,1143],{"class":379},"  --color-neutral-50: var(--ui-color-neutral-50);\n",[88,1145,1147],{"class":90,"line":1146},26,[88,1148,1149],{"class":379},"  --color-neutral-100: var(--ui-color-neutral-100);\n",[88,1151,1153],{"class":90,"line":1152},27,[88,1154,1155],{"class":379},"  --color-neutral-200: var(--ui-color-neutral-200);\n",[88,1157,1159],{"class":90,"line":1158},28,[88,1160,1161],{"class":379},"  --color-neutral-300: var(--ui-color-neutral-300);\n",[88,1163,1165],{"class":90,"line":1164},29,[88,1166,1167],{"class":379},"  --color-neutral-400: var(--ui-color-neutral-400);\n",[88,1169,1171],{"class":90,"line":1170},30,[88,1172,1173],{"class":379},"  --color-neutral-500: var(--ui-color-neutral-500);\n",[88,1175,1177],{"class":90,"line":1176},31,[88,1178,1179],{"class":379},"  --color-neutral-600: var(--ui-color-neutral-600);\n",[88,1181,1183],{"class":90,"line":1182},32,[88,1184,1185],{"class":379},"  --color-neutral-700: var(--ui-color-neutral-700);\n",[88,1187,1189],{"class":90,"line":1188},33,[88,1190,1191],{"class":379},"  --color-neutral-800: var(--ui-color-neutral-800);\n",[88,1193,1195],{"class":90,"line":1194},34,[88,1196,1197],{"class":379},"  --color-neutral-900: var(--ui-color-neutral-900);\n",[88,1199,1201],{"class":90,"line":1200},35,[88,1202,1203],{"class":379},"  --color-neutral-950: var(--ui-color-neutral-950);\n",[88,1205,1207],{"class":90,"line":1206},36,[88,1208,1209],{"class":383},"}\n",[88,1211,1213],{"class":90,"line":1212},37,[88,1214,767],{"emptyLinePlaceholder":766},[88,1216,1218,1220,1223],{"class":90,"line":1217},38,[88,1219,394],{"class":383},[88,1221,1222],{"class":713},"root",[88,1224,440],{"class":383},[88,1226,1228],{"class":90,"line":1227},39,[88,1229,1230],{"class":1023},"  /* Changing the default Nuxt UI container component size */\n",[88,1232,1234,1237,1239,1242,1244,1247],{"class":90,"line":1233},40,[88,1235,1236],{"class":379},"  --ui-container",[88,1238,394],{"class":383},[88,1240,1241],{"class":330}," var",[88,1243,380],{"class":383},[88,1245,1246],{"class":379},"--container-8xl",[88,1248,1249],{"class":383},");\n",[88,1251,1253],{"class":90,"line":1252},41,[88,1254,1209],{"class":383},[70,1256,1258],{"id":1257},"start-your-application","Start Your Application",[78,1260,1262],{"className":80,"code":1261,"language":82,"meta":83,"style":83},"pnpm run dev\n",[85,1263,1264],{"__ignoreMap":83},[88,1265,1266,1268,1271],{"class":90,"line":91},[88,1267,305],{"class":94},[88,1269,1270],{"class":98}," run",[88,1272,1273],{"class":98}," dev\n",[15,1275,1276],{},"You should see your Nuxt app running with the configured theming:",[15,1278,1279],{},[150,1280],{"alt":1281,"src":1282},"Nuxt App Preview","https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2oce3sp4bwsp6jgl0yxy.png",[54,1284],{},[10,1286,1288],{"id":1287},"connect-nuxt-with-medusa","Connect Nuxt with Medusa",[70,1290,1292],{"id":1291},"update-medusa-cors-configuration","Update Medusa CORS Configuration",[15,1294,169,1295,173,1297,1299],{},[85,1296,172],{},[85,1298,176],{}," key:",[78,1301,1304],{"className":1302,"code":1303,"language":183},[181],"STORE_CORS=http://localhost:8000,http://localhost:3000,https://docs.medusajs.com\n",[85,1305,1303],{"__ignoreMap":83},[15,1307,1308],{},"Restart the server:",[78,1310,1312],{"className":80,"code":1311,"language":82,"meta":83,"style":83},"npm run dev\n",[85,1313,1314],{"__ignoreMap":83},[88,1315,1316,1319,1321],{"class":90,"line":91},[88,1317,1318],{"class":94},"npm",[88,1320,1270],{"class":98},[88,1322,1273],{"class":98},[70,1324,1326],{"id":1325},"add-medusa-publishable-key-to-nuxt","Add Medusa Publishable Key to Nuxt",[15,1328,1329,1330,1332],{},"Create a ",[85,1331,172],{}," file in your Nuxt project:",[78,1334,1337],{"className":1335,"code":1336,"language":183},[181],"NUXT_PUBLIC_MEDUSA_BACKEND_URL=http://localhost:9000\nNUXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY=pk_your_key\n",[85,1338,1336],{"__ignoreMap":83},[15,1340,565,1341,1344,1345,126],{},[85,1342,1343],{},"pk_your_key"," with your Medusa Publishable Key, which you can find under ",[116,1346,202,1347],{},[25,1348,1351],{"href":1349,"rel":1350},"http://localhost:9000/app/settings/publishable-api-keys",[29],"Publishable Key",[15,1353,969,1354,394],{},[85,1355,356],{},[78,1357,1359],{"className":360,"code":1358,"language":362,"meta":83,"style":83},"runtimeConfig: {\n  public: {\n    medusaBackendUrl: '',\n    medusaPublishableKey: '',\n  },\n},\n",[85,1360,1361,1370,1379,1391,1402,1406],{"__ignoreMap":83},[88,1362,1363,1366,1368],{"class":90,"line":91},[88,1364,1365],{"class":94},"runtimeConfig",[88,1367,394],{"class":383},[88,1369,440],{"class":383},[88,1371,1372,1375,1377],{"class":90,"line":387},[88,1373,1374],{"class":94},"  public",[88,1376,394],{"class":383},[88,1378,440],{"class":383},[88,1380,1381,1384,1386,1389],{"class":90,"line":409},[88,1382,1383],{"class":94},"    medusaBackendUrl",[88,1385,394],{"class":383},[88,1387,1388],{"class":383}," ''",[88,1390,406],{"class":383},[88,1392,1393,1396,1398,1400],{"class":90,"line":432},[88,1394,1395],{"class":94},"    medusaPublishableKey",[88,1397,394],{"class":383},[88,1399,1388],{"class":383},[88,1401,406],{"class":383},[88,1403,1404],{"class":90,"line":443},[88,1405,460],{"class":383},[88,1407,1408],{"class":90,"line":457},[88,1409,532],{"class":383},[70,1411,1413],{"id":1412},"create-a-medusa-plugin","Create a Medusa plugin",[15,1415,1416,1417,1422],{},"Let's now create a plugin that let us use the ",[25,1418,1421],{"href":1419,"rel":1420},"https://docs.medusajs.com/resources/js-sdk",[29],"Medusa SDK"," everywhere in our application.",[15,1424,1425],{},"First let's install the Medusa SDK",[78,1427,1429],{"className":80,"code":1428,"language":82,"meta":83,"style":83},"pnpm add @medusajs/js-sdk\npnpm add -D @medusajs/types \n",[85,1430,1431,1441],{"__ignoreMap":83},[88,1432,1433,1435,1438],{"class":90,"line":91},[88,1434,305],{"class":94},[88,1436,1437],{"class":98}," add",[88,1439,1440],{"class":98}," @medusajs/js-sdk\n",[88,1442,1443,1445,1447,1450],{"class":90,"line":387},[88,1444,305],{"class":94},[88,1446,1437],{"class":98},[88,1448,1449],{"class":98}," -D",[88,1451,1452],{"class":98}," @medusajs/types\n",[15,1454,1455,1456],{},"Create your Nuxt Medusa plugin ",[85,1457,1458],{},"/app/plugins/medusa.ts",[78,1460,1462],{"className":360,"code":1461,"language":362,"meta":83,"style":83},"import Medusa from '@medusajs/js-sdk'\n\nexport default defineNuxtPlugin(() => {\n  const config = useRuntimeConfig()\n\n  const medusa = new Medusa({\n    baseUrl: config.public.medusaBackendUrl,\n    debug: process.env.NODE_ENV === 'development',\n    publishableKey: config.public.medusaPublishableKey,\n  })\n\n  return {\n    provide: {\n      medusa,\n    },\n  }\n})\n",[85,1463,1464,1483,1487,1505,1521,1525,1544,1565,1597,1617,1625,1629,1636,1645,1652,1656,1661],{"__ignoreMap":83},[88,1465,1466,1469,1472,1475,1477,1480],{"class":90,"line":91},[88,1467,1468],{"class":369},"import",[88,1470,1471],{"class":379}," Medusa ",[88,1473,1474],{"class":369},"from",[88,1476,397],{"class":383},[88,1478,1479],{"class":98},"@medusajs/js-sdk",[88,1481,1482],{"class":383},"'\n",[88,1484,1485],{"class":90,"line":387},[88,1486,767],{"emptyLinePlaceholder":766},[88,1488,1489,1491,1493,1496,1498,1500,1503],{"class":90,"line":409},[88,1490,370],{"class":369},[88,1492,373],{"class":369},[88,1494,1495],{"class":330}," defineNuxtPlugin",[88,1497,380],{"class":379},[88,1499,751],{"class":383},[88,1501,1502],{"class":713}," =>",[88,1504,440],{"class":383},[88,1506,1507,1510,1513,1515,1518],{"class":90,"line":432},[88,1508,1509],{"class":713},"  const",[88,1511,1512],{"class":379}," config",[88,1514,745],{"class":383},[88,1516,1517],{"class":330}," useRuntimeConfig",[88,1519,1520],{"class":390},"()\n",[88,1522,1523],{"class":90,"line":443},[88,1524,767],{"emptyLinePlaceholder":766},[88,1526,1527,1529,1532,1534,1537,1540,1542],{"class":90,"line":457},[88,1528,1509],{"class":713},[88,1530,1531],{"class":379}," medusa",[88,1533,745],{"class":383},[88,1535,1536],{"class":383}," new",[88,1538,1539],{"class":330}," Medusa",[88,1541,380],{"class":390},[88,1543,384],{"class":383},[88,1545,1546,1549,1551,1553,1555,1558,1560,1563],{"class":90,"line":463},[88,1547,1548],{"class":390},"    baseUrl",[88,1550,394],{"class":383},[88,1552,1512],{"class":379},[88,1554,126],{"class":383},[88,1556,1557],{"class":379},"public",[88,1559,126],{"class":383},[88,1561,1562],{"class":379},"medusaBackendUrl",[88,1564,406],{"class":383},[88,1566,1567,1570,1572,1575,1577,1580,1582,1585,1588,1590,1593,1595],{"class":90,"line":819},[88,1568,1569],{"class":390},"    debug",[88,1571,394],{"class":383},[88,1573,1574],{"class":379}," process",[88,1576,126],{"class":383},[88,1578,1579],{"class":379},"env",[88,1581,126],{"class":383},[88,1583,1584],{"class":379},"NODE_ENV",[88,1586,1587],{"class":383}," ===",[88,1589,397],{"class":383},[88,1591,1592],{"class":98},"development",[88,1594,403],{"class":383},[88,1596,406],{"class":383},[88,1598,1599,1602,1604,1606,1608,1610,1612,1615],{"class":90,"line":830},[88,1600,1601],{"class":390},"    publishableKey",[88,1603,394],{"class":383},[88,1605,1512],{"class":379},[88,1607,126],{"class":383},[88,1609,1557],{"class":379},[88,1611,126],{"class":383},[88,1613,1614],{"class":379},"medusaPublishableKey",[88,1616,406],{"class":383},[88,1618,1619,1622],{"class":90,"line":840},[88,1620,1621],{"class":383},"  }",[88,1623,1624],{"class":390},")\n",[88,1626,1627],{"class":90,"line":849},[88,1628,767],{"emptyLinePlaceholder":766},[88,1630,1631,1634],{"class":90,"line":1063},[88,1632,1633],{"class":369},"  return",[88,1635,440],{"class":383},[88,1637,1638,1641,1643],{"class":90,"line":1069},[88,1639,1640],{"class":390},"    provide",[88,1642,394],{"class":383},[88,1644,440],{"class":383},[88,1646,1647,1650],{"class":90,"line":1075},[88,1648,1649],{"class":379},"      medusa",[88,1651,406],{"class":383},[88,1653,1654],{"class":90,"line":1081},[88,1655,952],{"class":383},[88,1657,1658],{"class":90,"line":1087},[88,1659,1660],{"class":383},"  }\n",[88,1662,1663,1665],{"class":90,"line":1093},[88,1664,466],{"class":383},[88,1666,1624],{"class":379},[15,1668,1669],{},"Let's now test our integration.",[15,1671,1672,1673,1675],{},"For this, just replace your ",[85,1674,643],{}," with the following",[78,1677,1679],{"className":572,"code":1678,"language":574,"meta":83,"style":83},"\u003Cscript setup lang=\"ts\">\nconst { $medusa } = useNuxtApp()\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003CAppHero />\n    \u003Cpre>{{ $medusa }}\u003C/pre>\n  \u003C/div>\n\u003C/template>\n",[85,1680,1681,1701,1719,1727,1731,1739,1747,1755,1773,1781],{"__ignoreMap":83},[88,1682,1683,1685,1687,1689,1691,1693,1695,1697,1699],{"class":90,"line":91},[88,1684,581],{"class":383},[88,1686,710],{"class":390},[88,1688,714],{"class":713},[88,1690,717],{"class":713},[88,1692,720],{"class":383},[88,1694,723],{"class":383},[88,1696,726],{"class":98},[88,1698,723],{"class":383},[88,1700,587],{"class":383},[88,1702,1703,1705,1707,1710,1712,1714,1717],{"class":90,"line":387},[88,1704,735],{"class":713},[88,1706,417],{"class":383},[88,1708,1709],{"class":379}," $medusa ",[88,1711,466],{"class":383},[88,1713,745],{"class":383},[88,1715,1716],{"class":330}," useNuxtApp",[88,1718,1520],{"class":379},[88,1720,1721,1723,1725],{"class":90,"line":409},[88,1722,631],{"class":383},[88,1724,710],{"class":390},[88,1726,587],{"class":383},[88,1728,1729],{"class":90,"line":432},[88,1730,767],{"emptyLinePlaceholder":766},[88,1732,1733,1735,1737],{"class":90,"line":443},[88,1734,581],{"class":383},[88,1736,584],{"class":390},[88,1738,587],{"class":383},[88,1740,1741,1743,1745],{"class":90,"line":457},[88,1742,592],{"class":383},[88,1744,663],{"class":390},[88,1746,587],{"class":383},[88,1748,1749,1751,1753],{"class":90,"line":463},[88,1750,602],{"class":383},[88,1752,672],{"class":390},[88,1754,608],{"class":383},[88,1756,1757,1759,1761,1764,1766,1769,1771],{"class":90,"line":819},[88,1758,602],{"class":383},[88,1760,78],{"class":390},[88,1762,1763],{"class":383},">{{",[88,1765,1709],{"class":379},[88,1767,1768],{"class":383},"}}\u003C/",[88,1770,78],{"class":390},[88,1772,587],{"class":383},[88,1774,1775,1777,1779],{"class":90,"line":830},[88,1776,622],{"class":383},[88,1778,663],{"class":390},[88,1780,587],{"class":383},[88,1782,1783,1785,1787],{"class":90,"line":840},[88,1784,631],{"class":383},[88,1786,584],{"class":390},[88,1788,587],{"class":383},[19,1790,1791],{},[22,1792],{},[107,1794,1795],{},[15,1796,1797],{},"At the time of writing this article, we observe an error if we start your Nuxt app saying",[107,1799,1800],{},[78,1801,1802],{"className":80,"code":83,"language":82,"meta":83,"style":83},[85,1803,1804],{"__ignoreMap":83},[88,1805],{"class":90,"line":91},[15,1807,1808,1811,1812,1811,1815,1811,1818,1821],{},[88,1809,1810],{},"nuxt"," ",[88,1813,1814],{},"request error",[88,1816,1817],{},"unhandled",[88,1819,1820],{},"500"," Cannot find module './stringify'",[78,1823,1826],{"className":1824,"code":1825,"language":183},[181],"\n> To solve this, you should install [qs](https://github.com/ljharb/qs) library.\n\n> ```bash\npnpm add qs\n",[85,1827,1825],{"__ignoreMap":83},[19,1829,1830],{},[22,1831],{},[15,1833,1834],{},"Let's restart our app, and you should see now all the Medusa SDK methods and properties displayed !",[54,1836],{},[10,1838,1840],{"id":1839},"conclusion","Conclusion",[15,1842,1843],{},"Congratulations! You’ve successfully installed and configured both Medusa and Nuxt for your storefront. Your environment is now ready for further development, where we’ll focus on building features, styling components, and connecting the frontend to the backend. In the next steps, we’ll dive deeper into creating dynamic pages and leveraging Medusa’s API for product and cart management.",[1845,1846,1847],"style",{},"html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}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 .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}",{"title":83,"searchDepth":387,"depth":387,"links":1849},[1850,1851,1855,1860,1869,1874],{"id":12,"depth":387,"text":13},{"id":58,"depth":387,"text":59,"children":1852},[1853,1854],{"id":72,"depth":409,"text":73},{"id":142,"depth":409,"text":143},{"id":158,"depth":387,"text":159,"children":1856},[1857,1858,1859],{"id":165,"depth":409,"text":166},{"id":195,"depth":409,"text":196},{"id":249,"depth":409,"text":250},{"id":281,"depth":387,"text":282,"children":1861},[1862,1863,1864,1865,1866,1867,1868],{"id":294,"depth":409,"text":295},{"id":336,"depth":409,"text":337},{"id":475,"depth":409,"text":476},{"id":535,"depth":409,"text":536},{"id":547,"depth":409,"text":548},{"id":559,"depth":409,"text":560},{"id":1257,"depth":409,"text":1258},{"id":1287,"depth":387,"text":1288,"children":1870},[1871,1872,1873],{"id":1291,"depth":409,"text":1292},{"id":1325,"depth":409,"text":1326},{"id":1412,"depth":409,"text":1413},{"id":1839,"depth":387,"text":1840},"2025-01-12","A hands-on guide to connecting Nuxt 3 with Medusa 2: installation, CORS setup, SDK integration and building your first headless storefront.","md",{},"/en/articles/how-to-set-up-a-nuxt-3-storefront-with-medusa-2",{"title":5,"description":1876},"en/articles/how-to-set-up-a-nuxt-3-storefront-with-medusa-2","comment-creer-un-storefront-nuxt-3-avec-medusa-2","ptVpMq3lA8kpHTE1-tKM3FjxF_sIVYXNGkLevVtn9l4",1765834534790]