[{"data":1,"prerenderedAt":1612},["ShallowReactive",2],{"article-fr-comment-creer-un-storefront-nuxt-3-avec-medusa-2":3},{"id":4,"title":5,"body":6,"date":1603,"description":1604,"extension":1605,"meta":1606,"navigation":753,"path":1607,"published":753,"seo":1608,"stem":1609,"translationSlug":1610,"__hash__":1611},"articles_fr/fr/articles/comment-creer-un-storefront-nuxt-3-avec-medusa-2.md","Comment Configurer un Storefront Nuxt 3 avec Medusa 2",{"type":7,"value":8,"toc":1576},"minimark",[9,14,18,53,56,60,69,74,77,103,106,112,120,127,140,144,147,149,153,156,160,171,179,186,190,202,240,244,254,264,266,270,279,283,305,308,321,325,345,460,464,472,477,520,524,532,536,544,548,557,623,631,678,686,843,851,952,956,971,974,976,980,984,990,996,999,1013,1017,1023,1029,1042,1047,1101,1105,1114,1117,1144,1150,1364,1367,1372,1485,1560,1563,1565,1569,1572],[10,11,13],"h2",{"id":12},"prérequis","Prérequis",[15,16,17],"p",{},"Avant de commencer, assurez-vous d'avoir les outils suivants installés sur votre 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],{},"Un gestionnaire de paquets : ",[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},"installer-medusa","Installer Medusa",[15,61,62,63,68],{},"Suivez le ",[25,64,67],{"href":65,"rel":66},"https://docs.medusajs.com/learn/installation",[29],"guide d'installation Medusa"," pour des instructions détaillées. Voici une version simplifiée :",[70,71,73],"h3",{"id":72},"créer-une-application-medusa","Créer une Application Medusa",[15,75,76],{},"Exécutez la commande suivante pour créer une nouvelle application Medusa :",[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],{},"Lorsqu'on vous demande :",[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],{},"Choisissez ",[116,117,118],"strong",{},"No",". Pour ce tutoriel, nous utiliserons notre storefront Nuxt personnalisé à la place.",[15,121,122,123,126],{},"Attendez que la configuration soit terminée. Une fois fait, votre application Medusa devrait automatiquement ouvrir une page dans votre navigateur, vous permettant de vous connecter à l'interface du tableau de bord Admin à ",[85,124,125],{},"http://localhost:9000/app",".",[19,128,129,134],{},[22,130,131,132],{},"L'interface du tableau de bord Admin : ",[85,133,125],{},[22,135,136,137],{},"Routes API : ",[85,138,139],{},"http://localhost:9000",[70,141,143],{"id":142},"créer-un-utilisateur-admin","Créer un Utilisateur Admin",[15,145,146],{},"Lorsque l'interface du tableau de bord Admin se charge, remplissez le formulaire d'inscription pour créer votre premier utilisateur Admin.",[54,148],{},[10,150,152],{"id":151},"configurer-votre-application-medusa","Configurer Votre Application Medusa",[15,154,155],{},"Ce tutoriel n'est pas centré sur la configuration Medusa, mais nous couvrirons la configuration de base nécessaire pour l'intégration avec notre application Nuxt.",[70,157,159],{"id":158},"mettre-à-jour-la-configuration-cors","Mettre à Jour la Configuration CORS",[15,161,162,163,166,167,170],{},"Ouvrez le fichier ",[85,164,165],{},".env"," dans votre dossier d'application Medusa et mettez à jour la clé ",[85,168,169],{},"STORE_CORS"," pour inclure l'URL par défaut de votre application Nuxt :",[78,172,177],{"className":173,"code":175,"language":176},[174],"language-text","STORE_CORS=http://localhost:3000\n","text",[85,178,175],{"__ignoreMap":83},[15,180,181,182,185],{},"Cela permet à Medusa d'accepter les requêtes API depuis ",[85,183,184],{},"http://localhost:3000",", qui est l'URL par défaut pour une application Nuxt en local.",[70,187,189],{"id":188},"ajouter-une-nouvelle-région","Ajouter une Nouvelle Région",[15,191,192,193,201],{},"Naviguez vers ",[116,194,195,196],{},"Store Settings > ",[25,197,200],{"href":198,"rel":199},"http://localhost:9000/app/settings/regions",[29],"Regions"," dans le tableau de bord Admin.",[203,204,205,211],"ol",{},[22,206,207,208,126],{},"Cliquez sur ",[116,209,210],{},"Create",[22,212,213,214],{},"Remplissez les détails pour une nouvelle région, comme :\n",[19,215,216,222,228,234],{},[22,217,218,221],{},[116,219,220],{},"Name",": France",[22,223,224,227],{},[116,225,226],{},"Currency",": EUR",[22,229,230,233],{},[116,231,232],{},"Country",": FR",[22,235,236,239],{},[116,237,238],{},"Payment Provider",": Option par défaut (ex : Stripe si configuré)",[70,241,243],{"id":242},"créer-une-collection-et-ajouter-des-produits","Créer une Collection et Ajouter des Produits",[15,245,192,246,126],{},[116,247,248,249],{},"Products > ",[25,250,253],{"href":251,"rel":252},"http://localhost:9000/app/collections",[29],"Collections",[203,255,256,261],{},[22,257,207,258,260],{},[116,259,210],{}," pour ajouter une nouvelle collection (ex : \"Nouveautés\").",[22,262,263],{},"Ajoutez des produits à la collection. Vous pouvez sélectionner les 3 premiers produits comme exemple.",[54,265],{},[10,267,269],{"id":268},"installer-nuxt-v3-avec-compatibilité-v4","Installer Nuxt v3 avec Compatibilité v4",[15,271,272,273,278],{},"Pour des instructions détaillées, visitez ",[25,274,277],{"href":275,"rel":276},"https://nuxt.com/docs/getting-started/installation",[29],"le guide d'installation Nuxt",". Voici un résumé de ce que nous allons faire :",[70,280,282],{"id":281},"créer-une-application-nuxt","Créer une Application Nuxt",[78,284,286],{"className":80,"code":285,"language":82,"meta":83,"style":83},"pnpm dlx nuxi@latest init nuxt-medusa\n",[85,287,288],{"__ignoreMap":83},[88,289,290,293,296,299,302],{"class":90,"line":91},[88,291,292],{"class":94},"pnpm",[88,294,295],{"class":98}," dlx",[88,297,298],{"class":98}," nuxi@latest",[88,300,301],{"class":98}," init",[88,303,304],{"class":98}," nuxt-medusa\n",[15,306,307],{},"Naviguez vers votre dossier d'application :",[78,309,311],{"className":80,"code":310,"language":82,"meta":83,"style":83},"cd nuxt-medusa\n",[85,312,313],{"__ignoreMap":83},[88,314,315,319],{"class":90,"line":91},[88,316,318],{"class":317},"s2Zo4","cd",[88,320,304],{"class":98},[70,322,324],{"id":323},"ajouter-la-compatibilité-avec-nuxt-v4","Ajouter la Compatibilité avec Nuxt v4",[203,326,327,338],{},[22,328,329,330,333,334,337],{},"Créez un dossier ",[85,331,332],{},"/app"," et déplacez ",[85,335,336],{},"app.vue"," dans ce dossier.",[22,339,340,341,344],{},"Mettez à jour le fichier ",[85,342,343],{},"nuxt.config.ts"," :",[78,346,350],{"className":347,"code":348,"language":349,"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,351,352,372,394,417,428,442,448],{"__ignoreMap":83},[88,353,354,358,361,364,368],{"class":90,"line":91},[88,355,357],{"class":356},"s7zQu","export",[88,359,360],{"class":356}," default",[88,362,363],{"class":317}," defineNuxtConfig",[88,365,367],{"class":366},"sTEyZ","(",[88,369,371],{"class":370},"sMK4o","{\n",[88,373,375,379,382,385,388,391],{"class":90,"line":374},2,[88,376,378],{"class":377},"swJcz","  compatibilityDate",[88,380,381],{"class":370},":",[88,383,384],{"class":370}," '",[88,386,387],{"class":98},"2024-11-01",[88,389,390],{"class":370},"'",[88,392,393],{"class":370},",\n",[88,395,397,400,402,405,408,410,414],{"class":90,"line":396},3,[88,398,399],{"class":377},"  devtools",[88,401,381],{"class":370},[88,403,404],{"class":370}," {",[88,406,407],{"class":377}," enabled",[88,409,381],{"class":370},[88,411,413],{"class":412},"sfNiH"," true",[88,415,416],{"class":370}," },\n",[88,418,420,423,425],{"class":90,"line":419},4,[88,421,422],{"class":377},"  future",[88,424,381],{"class":370},[88,426,427],{"class":370}," {\n",[88,429,431,434,436,440],{"class":90,"line":430},5,[88,432,433],{"class":377},"    compatibilityVersion",[88,435,381],{"class":370},[88,437,439],{"class":438},"sbssI"," 4",[88,441,393],{"class":370},[88,443,445],{"class":90,"line":444},6,[88,446,447],{"class":370},"  },\n",[88,449,451,454,457],{"class":90,"line":450},7,[88,452,453],{"class":370},"}",[88,455,456],{"class":366},")",[88,458,459],{"class":370},";\n",[70,461,463],{"id":462},"ajouter-eslint-avec-configuration-stylistic","Ajouter ESLint avec Configuration Stylistic",[15,465,62,466,471],{},[25,467,470],{"href":468,"rel":469},"https://eslint.nuxt.com/packages/module",[29],"guide d'installation ESLint",". Je recommande d'activer le formatage stylistic :",[15,473,474,475,344],{},"Ajoutez la clé ESLint à votre fichier ",[85,476,343],{},[78,478,480],{"className":347,"code":479,"language":349,"meta":83,"style":83},"eslint: {\n  config: {\n    stylistic: true,\n  },\n},\n",[85,481,482,491,500,511,515],{"__ignoreMap":83},[88,483,484,487,489],{"class":90,"line":91},[88,485,486],{"class":94},"eslint",[88,488,381],{"class":370},[88,490,427],{"class":370},[88,492,493,496,498],{"class":90,"line":374},[88,494,495],{"class":94},"  config",[88,497,381],{"class":370},[88,499,427],{"class":370},[88,501,502,505,507,509],{"class":90,"line":396},[88,503,504],{"class":94},"    stylistic",[88,506,381],{"class":370},[88,508,413],{"class":412},[88,510,393],{"class":370},[88,512,513],{"class":90,"line":419},[88,514,447],{"class":370},[88,516,517],{"class":90,"line":430},[88,518,519],{"class":370},"},\n",[70,521,523],{"id":522},"ajouter-nuxt-ui-v3","Ajouter Nuxt UI v3",[15,525,526,527,126],{},"Nuxt UI v3 est une bibliothèque basée sur Reka UI (anciennement Radix-Vue) et sert d'excellente alternative puisque la bibliothèque UI de Medusa (basée sur Radix Primitives) est uniquement React. Pour les détails d'installation, visitez ",[25,528,531],{"href":529,"rel":530},"https://ui3.nuxt.dev/getting-started/installation/nuxt",[29],"la documentation Nuxt UI v3",[70,533,535],{"id":534},"ajouter-nuxt-image","Ajouter Nuxt Image",[15,537,538,539,126],{},"Les applications e-commerce nécessitent une gestion optimisée des images. Utilisez Nuxt Image pour cela. Les instructions d'installation sont disponibles ",[25,540,543],{"href":541,"rel":542},"https://image.nuxt.com/get-started/installation",[29],"ici",[70,545,547],{"id":546},"configuration-du-style-nuxt","Configuration du Style Nuxt",[203,549,550],{},[22,551,552,553,556],{},"Remplacez ",[85,554,555],{},"/app/app.vue"," par le suivant :",[78,558,562],{"className":559,"code":560,"language":561,"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,563,564,575,585,596,605,614],{"__ignoreMap":83},[88,565,566,569,572],{"class":90,"line":91},[88,567,568],{"class":370},"\u003C",[88,570,571],{"class":377},"template",[88,573,574],{"class":370},">\n",[88,576,577,580,583],{"class":90,"line":374},[88,578,579],{"class":370},"  \u003C",[88,581,582],{"class":377},"UApp",[88,584,574],{"class":370},[88,586,587,590,593],{"class":90,"line":396},[88,588,589],{"class":370},"    \u003C",[88,591,592],{"class":377},"NuxtRouteAnnouncer",[88,594,595],{"class":370}," />\n",[88,597,598,600,603],{"class":90,"line":419},[88,599,589],{"class":370},[88,601,602],{"class":377},"NuxtPage",[88,604,595],{"class":370},[88,606,607,610,612],{"class":90,"line":430},[88,608,609],{"class":370},"  \u003C/",[88,611,582],{"class":377},[88,613,574],{"class":370},[88,615,616,619,621],{"class":90,"line":444},[88,617,618],{"class":370},"\u003C/",[88,620,571],{"class":377},[88,622,574],{"class":370},[203,624,625],{"start":374},[22,626,627,628,344],{},"Créez une page index ",[85,629,630],{},"/app/pages/index.vue",[78,632,634],{"className":559,"code":633,"language":561,"meta":83,"style":83},"\u003Ctemplate>\n  \u003Cdiv>\n    \u003CAppHero />\n  \u003C/div>\n\u003C/template>\n",[85,635,636,644,653,662,670],{"__ignoreMap":83},[88,637,638,640,642],{"class":90,"line":91},[88,639,568],{"class":370},[88,641,571],{"class":377},[88,643,574],{"class":370},[88,645,646,648,651],{"class":90,"line":374},[88,647,579],{"class":370},[88,649,650],{"class":377},"div",[88,652,574],{"class":370},[88,654,655,657,660],{"class":90,"line":396},[88,656,589],{"class":370},[88,658,659],{"class":377},"AppHero",[88,661,595],{"class":370},[88,663,664,666,668],{"class":90,"line":419},[88,665,609],{"class":370},[88,667,650],{"class":377},[88,669,574],{"class":370},[88,671,672,674,676],{"class":90,"line":430},[88,673,618],{"class":370},[88,675,571],{"class":377},[88,677,574],{"class":370},[203,679,680],{"start":396},[22,681,682,683,344],{},"Créez un composant Hero ",[85,684,685],{},"/app/components/hero.vue",[78,687,689],{"className":559,"code":688,"language":561,"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,690,691,718,741,749,755,763,784,804,815,825,834],{"__ignoreMap":83},[88,692,693,695,698,702,705,708,711,714,716],{"class":90,"line":91},[88,694,568],{"class":370},[88,696,697],{"class":377},"script",[88,699,701],{"class":700},"spNyl"," setup",[88,703,704],{"class":700}," lang",[88,706,707],{"class":370},"=",[88,709,710],{"class":370},"\"",[88,712,713],{"class":98},"ts",[88,715,710],{"class":370},[88,717,574],{"class":370},[88,719,720,723,725,728,730,733,736,739],{"class":90,"line":374},[88,721,722],{"class":700},"const",[88,724,404],{"class":370},[88,726,727],{"class":366}," title ",[88,729,453],{"class":370},[88,731,732],{"class":370}," =",[88,734,735],{"class":317}," useAppConfig",[88,737,738],{"class":366},"()",[88,740,459],{"class":370},[88,742,743,745,747],{"class":90,"line":396},[88,744,618],{"class":370},[88,746,697],{"class":377},[88,748,574],{"class":370},[88,750,751],{"class":90,"line":419},[88,752,754],{"emptyLinePlaceholder":753},true,"\n",[88,756,757,759,761],{"class":90,"line":430},[88,758,568],{"class":370},[88,760,571],{"class":377},[88,762,574],{"class":370},[88,764,765,767,770,773,775,777,780,782],{"class":90,"line":444},[88,766,579],{"class":370},[88,768,769],{"class":377},"UContainer",[88,771,772],{"class":700}," class",[88,774,707],{"class":370},[88,776,710],{"class":370},[88,778,779],{"class":98},"flex items-center justify-center h-screen bg-neutral-100",[88,781,710],{"class":370},[88,783,574],{"class":370},[88,785,786,788,791,793,795,797,800,802],{"class":90,"line":450},[88,787,589],{"class":370},[88,789,790],{"class":377},"h1",[88,792,772],{"class":700},[88,794,707],{"class":370},[88,796,710],{"class":370},[88,798,799],{"class":98},"text-3xl text-primary-500 font-semibold",[88,801,710],{"class":370},[88,803,574],{"class":370},[88,805,807,810,812],{"class":90,"line":806},8,[88,808,809],{"class":370},"      {{",[88,811,727],{"class":366},[88,813,814],{"class":370},"}}\n",[88,816,818,821,823],{"class":90,"line":817},9,[88,819,820],{"class":370},"    \u003C/",[88,822,790],{"class":377},[88,824,574],{"class":370},[88,826,828,830,832],{"class":90,"line":827},10,[88,829,609],{"class":370},[88,831,769],{"class":377},[88,833,574],{"class":370},[88,835,837,839,841],{"class":90,"line":836},11,[88,838,618],{"class":370},[88,840,571],{"class":377},[88,842,574],{"class":370},[203,844,845],{"start":419},[22,846,847,848,344],{},"Ajoutez ",[85,849,850],{},"/app/app.config.ts",[78,852,854],{"className":347,"code":853,"language":349,"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,855,856,869,885,894,903,919,935,940,944],{"__ignoreMap":83},[88,857,858,860,862,865,867],{"class":90,"line":91},[88,859,357],{"class":356},[88,861,360],{"class":356},[88,863,864],{"class":317}," defineAppConfig",[88,866,367],{"class":366},[88,868,371],{"class":370},[88,870,871,874,876,878,881,883],{"class":90,"line":374},[88,872,873],{"class":377},"  title",[88,875,381],{"class":370},[88,877,384],{"class":370},[88,879,880],{"class":98},"Nuxt Medusa Storefront",[88,882,390],{"class":370},[88,884,393],{"class":370},[88,886,887,890,892],{"class":90,"line":396},[88,888,889],{"class":377},"  ui",[88,891,381],{"class":370},[88,893,427],{"class":370},[88,895,896,899,901],{"class":90,"line":419},[88,897,898],{"class":377},"    colors",[88,900,381],{"class":370},[88,902,427],{"class":370},[88,904,905,908,910,912,915,917],{"class":90,"line":430},[88,906,907],{"class":377},"      primary",[88,909,381],{"class":370},[88,911,384],{"class":370},[88,913,914],{"class":98},"blue",[88,916,390],{"class":370},[88,918,393],{"class":370},[88,920,921,924,926,928,931,933],{"class":90,"line":444},[88,922,923],{"class":377},"      neutral",[88,925,381],{"class":370},[88,927,384],{"class":370},[88,929,930],{"class":98},"zinc",[88,932,390],{"class":370},[88,934,393],{"class":370},[88,936,937],{"class":90,"line":450},[88,938,939],{"class":370},"    },\n",[88,941,942],{"class":90,"line":806},[88,943,447],{"class":370},[88,945,946,948,950],{"class":90,"line":817},[88,947,453],{"class":370},[88,949,456],{"class":366},[88,951,459],{"class":370},[70,953,955],{"id":954},"démarrer-votre-application","Démarrer Votre Application",[78,957,959],{"className":80,"code":958,"language":82,"meta":83,"style":83},"pnpm run dev\n",[85,960,961],{"__ignoreMap":83},[88,962,963,965,968],{"class":90,"line":91},[88,964,292],{"class":94},[88,966,967],{"class":98}," run",[88,969,970],{"class":98}," dev\n",[15,972,973],{},"Vous devriez voir votre application Nuxt fonctionner avec le thème configuré.",[54,975],{},[10,977,979],{"id":978},"connecter-nuxt-avec-medusa","Connecter Nuxt avec Medusa",[70,981,983],{"id":982},"mettre-à-jour-la-configuration-cors-de-medusa","Mettre à Jour la Configuration CORS de Medusa",[15,985,162,986,166,988,344],{},[85,987,165],{},[85,989,169],{},[78,991,994],{"className":992,"code":993,"language":176},[174],"STORE_CORS=http://localhost:8000,http://localhost:3000,https://docs.medusajs.com\n",[85,995,993],{"__ignoreMap":83},[15,997,998],{},"Redémarrez le serveur :",[78,1000,1002],{"className":80,"code":1001,"language":82,"meta":83,"style":83},"npm run dev\n",[85,1003,1004],{"__ignoreMap":83},[88,1005,1006,1009,1011],{"class":90,"line":91},[88,1007,1008],{"class":94},"npm",[88,1010,967],{"class":98},[88,1012,970],{"class":98},[70,1014,1016],{"id":1015},"ajouter-la-clé-publishable-medusa-à-nuxt","Ajouter la Clé Publishable Medusa à Nuxt",[15,1018,1019,1020,1022],{},"Créez un fichier ",[85,1021,165],{}," dans votre projet Nuxt :",[78,1024,1027],{"className":1025,"code":1026,"language":176},[174],"NUXT_PUBLIC_MEDUSA_BACKEND_URL=http://localhost:9000\nNUXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY=pk_your_key\n",[85,1028,1026],{"__ignoreMap":83},[15,1030,552,1031,1034,1035,126],{},[85,1032,1033],{},"pk_your_key"," par votre Clé Publishable Medusa, que vous pouvez trouver sous ",[116,1036,195,1037],{},[25,1038,1041],{"href":1039,"rel":1040},"http://localhost:9000/app/settings/publishable-api-keys",[29],"Publishable Key",[15,1043,1044,1045,344],{},"Mettez à jour ",[85,1046,343],{},[78,1048,1050],{"className":347,"code":1049,"language":349,"meta":83,"style":83},"runtimeConfig: {\n  public: {\n    medusaBackendUrl: '',\n    medusaPublishableKey: '',\n  },\n},\n",[85,1051,1052,1061,1070,1082,1093,1097],{"__ignoreMap":83},[88,1053,1054,1057,1059],{"class":90,"line":91},[88,1055,1056],{"class":94},"runtimeConfig",[88,1058,381],{"class":370},[88,1060,427],{"class":370},[88,1062,1063,1066,1068],{"class":90,"line":374},[88,1064,1065],{"class":94},"  public",[88,1067,381],{"class":370},[88,1069,427],{"class":370},[88,1071,1072,1075,1077,1080],{"class":90,"line":396},[88,1073,1074],{"class":94},"    medusaBackendUrl",[88,1076,381],{"class":370},[88,1078,1079],{"class":370}," ''",[88,1081,393],{"class":370},[88,1083,1084,1087,1089,1091],{"class":90,"line":419},[88,1085,1086],{"class":94},"    medusaPublishableKey",[88,1088,381],{"class":370},[88,1090,1079],{"class":370},[88,1092,393],{"class":370},[88,1094,1095],{"class":90,"line":430},[88,1096,447],{"class":370},[88,1098,1099],{"class":90,"line":444},[88,1100,519],{"class":370},[70,1102,1104],{"id":1103},"créer-un-plugin-medusa","Créer un Plugin Medusa",[15,1106,1107,1108,1113],{},"Créons maintenant un plugin qui nous permet d'utiliser le ",[25,1109,1112],{"href":1110,"rel":1111},"https://docs.medusajs.com/resources/js-sdk",[29],"SDK Medusa"," partout dans notre application.",[15,1115,1116],{},"D'abord, installons le SDK Medusa :",[78,1118,1120],{"className":80,"code":1119,"language":82,"meta":83,"style":83},"pnpm add @medusajs/js-sdk\npnpm add -D @medusajs/types\n",[85,1121,1122,1132],{"__ignoreMap":83},[88,1123,1124,1126,1129],{"class":90,"line":91},[88,1125,292],{"class":94},[88,1127,1128],{"class":98}," add",[88,1130,1131],{"class":98}," @medusajs/js-sdk\n",[88,1133,1134,1136,1138,1141],{"class":90,"line":374},[88,1135,292],{"class":94},[88,1137,1128],{"class":98},[88,1139,1140],{"class":98}," -D",[88,1142,1143],{"class":98}," @medusajs/types\n",[15,1145,1146,1147,344],{},"Créez votre plugin Nuxt Medusa ",[85,1148,1149],{},"/app/plugins/medusa.ts",[78,1151,1153],{"className":347,"code":1152,"language":349,"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,1154,1155,1174,1178,1196,1212,1216,1235,1256,1288,1308,1316,1320,1328,1338,1346,1351,1357],{"__ignoreMap":83},[88,1156,1157,1160,1163,1166,1168,1171],{"class":90,"line":91},[88,1158,1159],{"class":356},"import",[88,1161,1162],{"class":366}," Medusa ",[88,1164,1165],{"class":356},"from",[88,1167,384],{"class":370},[88,1169,1170],{"class":98},"@medusajs/js-sdk",[88,1172,1173],{"class":370},"'\n",[88,1175,1176],{"class":90,"line":374},[88,1177,754],{"emptyLinePlaceholder":753},[88,1179,1180,1182,1184,1187,1189,1191,1194],{"class":90,"line":396},[88,1181,357],{"class":356},[88,1183,360],{"class":356},[88,1185,1186],{"class":317}," defineNuxtPlugin",[88,1188,367],{"class":366},[88,1190,738],{"class":370},[88,1192,1193],{"class":700}," =>",[88,1195,427],{"class":370},[88,1197,1198,1201,1204,1206,1209],{"class":90,"line":419},[88,1199,1200],{"class":700},"  const",[88,1202,1203],{"class":366}," config",[88,1205,732],{"class":370},[88,1207,1208],{"class":317}," useRuntimeConfig",[88,1210,1211],{"class":377},"()\n",[88,1213,1214],{"class":90,"line":430},[88,1215,754],{"emptyLinePlaceholder":753},[88,1217,1218,1220,1223,1225,1228,1231,1233],{"class":90,"line":444},[88,1219,1200],{"class":700},[88,1221,1222],{"class":366}," medusa",[88,1224,732],{"class":370},[88,1226,1227],{"class":370}," new",[88,1229,1230],{"class":317}," Medusa",[88,1232,367],{"class":377},[88,1234,371],{"class":370},[88,1236,1237,1240,1242,1244,1246,1249,1251,1254],{"class":90,"line":450},[88,1238,1239],{"class":377},"    baseUrl",[88,1241,381],{"class":370},[88,1243,1203],{"class":366},[88,1245,126],{"class":370},[88,1247,1248],{"class":366},"public",[88,1250,126],{"class":370},[88,1252,1253],{"class":366},"medusaBackendUrl",[88,1255,393],{"class":370},[88,1257,1258,1261,1263,1266,1268,1271,1273,1276,1279,1281,1284,1286],{"class":90,"line":806},[88,1259,1260],{"class":377},"    debug",[88,1262,381],{"class":370},[88,1264,1265],{"class":366}," process",[88,1267,126],{"class":370},[88,1269,1270],{"class":366},"env",[88,1272,126],{"class":370},[88,1274,1275],{"class":366},"NODE_ENV",[88,1277,1278],{"class":370}," ===",[88,1280,384],{"class":370},[88,1282,1283],{"class":98},"development",[88,1285,390],{"class":370},[88,1287,393],{"class":370},[88,1289,1290,1293,1295,1297,1299,1301,1303,1306],{"class":90,"line":817},[88,1291,1292],{"class":377},"    publishableKey",[88,1294,381],{"class":370},[88,1296,1203],{"class":366},[88,1298,126],{"class":370},[88,1300,1248],{"class":366},[88,1302,126],{"class":370},[88,1304,1305],{"class":366},"medusaPublishableKey",[88,1307,393],{"class":370},[88,1309,1310,1313],{"class":90,"line":827},[88,1311,1312],{"class":370},"  }",[88,1314,1315],{"class":377},")\n",[88,1317,1318],{"class":90,"line":836},[88,1319,754],{"emptyLinePlaceholder":753},[88,1321,1323,1326],{"class":90,"line":1322},12,[88,1324,1325],{"class":356},"  return",[88,1327,427],{"class":370},[88,1329,1331,1334,1336],{"class":90,"line":1330},13,[88,1332,1333],{"class":377},"    provide",[88,1335,381],{"class":370},[88,1337,427],{"class":370},[88,1339,1341,1344],{"class":90,"line":1340},14,[88,1342,1343],{"class":366},"      medusa",[88,1345,393],{"class":370},[88,1347,1349],{"class":90,"line":1348},15,[88,1350,939],{"class":370},[88,1352,1354],{"class":90,"line":1353},16,[88,1355,1356],{"class":370},"  }\n",[88,1358,1360,1362],{"class":90,"line":1359},17,[88,1361,453],{"class":370},[88,1363,1315],{"class":366},[15,1365,1366],{},"Testons maintenant notre intégration.",[15,1368,1369,1370,556],{},"Pour cela, remplacez simplement votre ",[85,1371,630],{},[78,1373,1375],{"className":559,"code":1374,"language":561,"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,1376,1377,1397,1415,1423,1427,1435,1443,1451,1469,1477],{"__ignoreMap":83},[88,1378,1379,1381,1383,1385,1387,1389,1391,1393,1395],{"class":90,"line":91},[88,1380,568],{"class":370},[88,1382,697],{"class":377},[88,1384,701],{"class":700},[88,1386,704],{"class":700},[88,1388,707],{"class":370},[88,1390,710],{"class":370},[88,1392,713],{"class":98},[88,1394,710],{"class":370},[88,1396,574],{"class":370},[88,1398,1399,1401,1403,1406,1408,1410,1413],{"class":90,"line":374},[88,1400,722],{"class":700},[88,1402,404],{"class":370},[88,1404,1405],{"class":366}," $medusa ",[88,1407,453],{"class":370},[88,1409,732],{"class":370},[88,1411,1412],{"class":317}," useNuxtApp",[88,1414,1211],{"class":366},[88,1416,1417,1419,1421],{"class":90,"line":396},[88,1418,618],{"class":370},[88,1420,697],{"class":377},[88,1422,574],{"class":370},[88,1424,1425],{"class":90,"line":419},[88,1426,754],{"emptyLinePlaceholder":753},[88,1428,1429,1431,1433],{"class":90,"line":430},[88,1430,568],{"class":370},[88,1432,571],{"class":377},[88,1434,574],{"class":370},[88,1436,1437,1439,1441],{"class":90,"line":444},[88,1438,579],{"class":370},[88,1440,650],{"class":377},[88,1442,574],{"class":370},[88,1444,1445,1447,1449],{"class":90,"line":450},[88,1446,589],{"class":370},[88,1448,659],{"class":377},[88,1450,595],{"class":370},[88,1452,1453,1455,1457,1460,1462,1465,1467],{"class":90,"line":806},[88,1454,589],{"class":370},[88,1456,78],{"class":377},[88,1458,1459],{"class":370},">{{",[88,1461,1405],{"class":366},[88,1463,1464],{"class":370},"}}\u003C/",[88,1466,78],{"class":377},[88,1468,574],{"class":370},[88,1470,1471,1473,1475],{"class":90,"line":817},[88,1472,609],{"class":370},[88,1474,650],{"class":377},[88,1476,574],{"class":370},[88,1478,1479,1481,1483],{"class":90,"line":827},[88,1480,618],{"class":370},[88,1482,571],{"class":377},[88,1484,574],{"class":370},[107,1486,1487,1490,1538,1546],{},[15,1488,1489],{},"Au moment de la rédaction de cet article, nous observons une erreur si nous démarrons l'application Nuxt disant :",[78,1491,1493],{"className":80,"code":1492,"language":82,"meta":83,"style":83},"[nuxt] [request error] [unhandled] [500] Cannot find module './stringify'\n",[85,1494,1495],{"__ignoreMap":83},[88,1496,1497,1500,1503,1506,1509,1512,1514,1516,1519,1521,1523,1526,1528,1531,1533,1536],{"class":90,"line":91},[88,1498,1499],{"class":370},"[",[88,1501,1502],{"class":366},"nuxt",[88,1504,1505],{"class":370},"]",[88,1507,1508],{"class":370}," [",[88,1510,1511],{"class":366},"request error",[88,1513,1505],{"class":370},[88,1515,1508],{"class":370},[88,1517,1518],{"class":366},"unhandled",[88,1520,1505],{"class":370},[88,1522,1508],{"class":370},[88,1524,1525],{"class":366},"500",[88,1527,1505],{"class":370},[88,1529,1530],{"class":366}," Cannot find module ",[88,1532,390],{"class":370},[88,1534,1535],{"class":98},"./stringify",[88,1537,1173],{"class":370},[15,1539,1540,1541,126],{},"Pour résoudre cela, vous devez installer la bibliothèque ",[25,1542,1545],{"href":1543,"rel":1544},"https://github.com/ljharb/qs",[29],"qs",[78,1547,1549],{"className":80,"code":1548,"language":82,"meta":83,"style":83},"pnpm add qs\n",[85,1550,1551],{"__ignoreMap":83},[88,1552,1553,1555,1557],{"class":90,"line":91},[88,1554,292],{"class":94},[88,1556,1128],{"class":98},[88,1558,1559],{"class":98}," qs\n",[15,1561,1562],{},"Redémarrons notre application, et vous devriez maintenant voir toutes les méthodes et propriétés du SDK Medusa affichées !",[54,1564],{},[10,1566,1568],{"id":1567},"conclusion","Conclusion",[15,1570,1571],{},"Félicitations ! Vous avez installé et configuré avec succès Medusa et Nuxt pour votre storefront. Votre environnement est maintenant prêt pour le développement ultérieur, où nous nous concentrerons sur la création de fonctionnalités, le style des composants et la connexion du frontend au backend. Dans les prochaines étapes, nous approfondirons la création de pages dynamiques et l'exploitation de l'API Medusa pour la gestion des produits et du panier.",[1573,1574,1575],"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}",{"title":83,"searchDepth":374,"depth":374,"links":1577},[1578,1579,1583,1588,1597,1602],{"id":12,"depth":374,"text":13},{"id":58,"depth":374,"text":59,"children":1580},[1581,1582],{"id":72,"depth":396,"text":73},{"id":142,"depth":396,"text":143},{"id":151,"depth":374,"text":152,"children":1584},[1585,1586,1587],{"id":158,"depth":396,"text":159},{"id":188,"depth":396,"text":189},{"id":242,"depth":396,"text":243},{"id":268,"depth":374,"text":269,"children":1589},[1590,1591,1592,1593,1594,1595,1596],{"id":281,"depth":396,"text":282},{"id":323,"depth":396,"text":324},{"id":462,"depth":396,"text":463},{"id":522,"depth":396,"text":523},{"id":534,"depth":396,"text":535},{"id":546,"depth":396,"text":547},{"id":954,"depth":396,"text":955},{"id":978,"depth":374,"text":979,"children":1598},[1599,1600,1601],{"id":982,"depth":396,"text":983},{"id":1015,"depth":396,"text":1016},{"id":1103,"depth":396,"text":1104},{"id":1567,"depth":374,"text":1568},"2025-01-12","Guide pratique pour connecter Nuxt 3 à Medusa 2 : installation, configuration CORS, SDK et création de votre premier storefront headless.","md",{},"/fr/articles/comment-creer-un-storefront-nuxt-3-avec-medusa-2",{"title":5,"description":1604},"fr/articles/comment-creer-un-storefront-nuxt-3-avec-medusa-2","how-to-set-up-a-nuxt-3-storefront-with-medusa-2","XCpnwrGFL4Zck7jmipJHyhWQgAqvJVEClZmHArSg7mU",1765834537511]