[{"data":1,"prerenderedAt":1478},["ShallowReactive",2],{"navigation_docs":3,"-medias":49,"-medias-surround":1473},[4,9,14,19,24,29,34,39,44],{"title":5,"path":6,"stem":7,"icon":8},"Introduction","\u002Fintroduction","1.introduction","i-lucide-monitor",{"title":10,"path":11,"stem":12,"icon":13},"Setup","\u002Fsetup","2.setup","i-lucide-play",{"title":15,"path":16,"stem":17,"icon":18},"Git Providers","\u002Fgit-providers","3.git-providers","i-lucide-git-branch",{"title":20,"path":21,"stem":22,"icon":23},"Auth Providers","\u002Fauth-providers","4.auth-providers","i-lucide-shield-check",{"title":25,"path":26,"stem":27,"icon":28},"Content Editors","\u002Fcontent","5.content","i-lucide-pen-tool",{"title":30,"path":31,"stem":32,"icon":33},"Media Library","\u002Fmedias","6.medias","i-lucide-image",{"title":35,"path":36,"stem":37,"icon":38},"AI Features","\u002Fai","7.ai","i-lucide-sparkles",{"title":40,"path":41,"stem":42,"icon":43},"Roadmap","\u002Froadmap","8.roadmap","i-lucide-map",{"title":45,"path":46,"stem":47,"icon":48},"Advanced","\u002Fadvanced","9.advanced","i-lucide-settings",{"id":50,"title":51,"body":52,"description":1464,"extension":1465,"links":1466,"meta":1467,"navigation":1468,"path":31,"seo":1469,"stem":32,"__hash__":1472},"docs\u002F6.medias.md","Manage and integrate Medias in Nuxt Content Studio CMS",{"type":53,"value":54,"toc":1448},"minimark",[55,60,74,80,83,87,90,138,142,145,165,169,252,260,266,269,273,286,294,299,794,799,803,814,921,925,928,931,1136,1138,1444],[56,57,59],"h2",{"id":58},"browse","Browse",[61,62,63,64,68,69,73],"p",{},"All medias located in the ",[65,66,67],"code",{},"\u002Fpublic"," directory are available in the ",[70,71,72],"strong",{},"Media"," tab of the Studio interface.",[61,75,76,77,79],{},"It's an intuitive interface for non-technical users to manage their ",[65,78,67],{}," directory or external storage if set.",[61,81,82],{},"Users can easily browse folders, upload new media at any level, and drag and drop files, making media organization straightforward.",[56,84,86],{"id":85},"editor-integration","Editor integration",[61,88,89],{},"The TipTap visual editor provides seamless media integration:",[91,92,93,104,118,132],"ul",{},[94,95,96,99,100],"li",{},[70,97,98],{},"Drag and drop"," - Simply drag and drop images directly into the editor. An upload modal will open to let you choose the destination folder ",[101,102,103],"badge",{},"Coming Soon",[94,105,106,109,110,113,114,117],{},[70,107,108],{},"Slash commands"," - Type ",[65,111,112],{},"\u002F"," and search for ",[65,115,116],{},"Image"," to quickly insert a media. A modal will open to let you choose the media from your library",[94,119,120,123,124,131],{},[70,121,122],{},"Alt text support"," - From the media modal, you can set the ",[125,126,130],"a",{"href":127,"rel":128},"https:\u002F\u002Fwww.w3schools.com\u002Ftags\u002Fatt_img_alt.asp",[129],"nofollow","alt attribute"," for SEO and accessibility",[94,133,134,137],{},[70,135,136],{},"Attributes support"," - From the media modal, you can set additional attributes like width, height, and custom properties for advanced use cases.",[56,139,141],{"id":140},"supported-file-types","Supported file types",[61,143,144],{},"The media library supports the following file types:",[91,146,147,153,159],{},[94,148,149,152],{},[70,150,151],{},"Images",": PNG, JPG\u002FJPEG, SVG, WebP, AVIF, ICO, GIF",[94,154,155,158],{},[70,156,157],{},"Videos",": MP4, MOV, AVI, MKV, WebM, OGG",[94,160,161,164],{},[70,162,163],{},"Audio",": MP3, WAV, AAC, M4A",[56,166,168],{"id":167},"storage-comparison","Storage Comparison",[170,171,172,188],"table",{},[173,174,175],"thead",{},[176,177,178,182,185],"tr",{},[179,180,181],"th",{},"Feature",[179,183,184],{},"Default storage",[179,186,187],{},"External storage",[189,190,191,206,219,230,241],"tbody",{},[176,192,193,196,199],{},[194,195,10],"td",{},[194,197,198],{},"Zero configuration",[194,200,201,202,205],{},"Requires ",[65,203,204],{},"@nuxthub\u002Fcore"," with blob storage enabled",[176,207,208,211,216],{},[194,209,210],{},"Storage location",[194,212,213,215],{},[65,214,67],{}," directory",[194,217,218],{},"Cloudflare R2, Vercel Blob, or S3-compatible",[176,220,221,224,227],{},[194,222,223],{},"Git commits",[194,225,226],{},"Files committed to Git",[194,228,229],{},"Only URLs referenced",[176,231,232,235,238],{},[194,233,234],{},"Repository size",[194,236,237],{},"Grows with media",[194,239,240],{},"Stays small",[176,242,243,246,249],{},[194,244,245],{},"Best for",[194,247,248],{},"Small projects",[194,250,251],{},"Large media libraries",[56,253,255,256,259],{"id":254},"default-storage-public-folder","Default storage (",[65,257,258],{},"public"," folder)",[61,261,262,263,265],{},"By default, media files are stored in your ",[65,264,67],{}," directory and committed to Git when you publish. This works great for most projects and requires zero configuration.",[61,267,268],{},"Studio tracks all changes to the public folder as drafts in the browser until you publish. A service worker intercepts media requests to serve draft versions instantly, so you see your changes in the preview before they are committed.",[56,270,272],{"id":271},"external-storage","External Storage",[61,274,275,276,279,280,285],{},"For larger projects or teams with many media files, you can configure ",[70,277,278],{},"external storage"," to upload files directly to cloud storage. Studio uses ",[125,281,284],{"href":282,"rel":283},"https:\u002F\u002Fhub.nuxt.com\u002Fdocs\u002Fblob",[129],"NuxtHub Blob Storage"," which supports Vercel Blob, AWS S3 and other S3-compatible providers.",[287,288,289,290,293],"note",{},"Files uploaded to external storage are ",[70,291,292],{},"not committed to Git",". They are stored permanently in your cloud storage bucket and accessed via their public URL.",[295,296,298],"h3",{"id":297},"configuration","Configuration",[300,301,303,308,340,344,505,522,526,533],"steps",{"level":302},"4",[304,305,307],"h4",{"id":306},"install-the-nuxthub-module","Install the NuxtHub module",[309,310,316],"pre",{"className":311,"code":312,"filename":313,"language":314,"meta":315,"style":315},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","npx nuxi module add hub\n","Terminal","bash","",[65,317,318],{"__ignoreMap":315},[319,320,323,327,331,334,337],"span",{"class":321,"line":322},"line",1,[319,324,326],{"class":325},"sBMFI","npx",[319,328,330],{"class":329},"sfazB"," nuxi",[319,332,333],{"class":329}," module",[319,335,336],{"class":329}," add",[319,338,339],{"class":329}," hub\n",[304,341,343],{"id":342},"enable-blob-storage-and-studio-external-media","Enable blob storage and Studio external media:",[309,345,350],{"className":346,"code":347,"filename":348,"language":349,"meta":315,"style":315},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","export default defineNuxtConfig({\n  modules: ['@nuxthub\u002Fcore', 'nuxt-studio'],\n\n  hub: {\n    blob: true,\n  },\n\n  studio: {\n    media: {\n      external: true,\n    },\n  },\n})\n","nuxt.config.ts","ts",[65,351,352,373,410,417,428,442,448,453,463,473,485,491,496],{"__ignoreMap":315},[319,353,354,358,361,365,369],{"class":321,"line":322},[319,355,357],{"class":356},"s7zQu","export",[319,359,360],{"class":356}," default",[319,362,364],{"class":363},"s2Zo4"," defineNuxtConfig",[319,366,368],{"class":367},"sTEyZ","(",[319,370,372],{"class":371},"sMK4o","{\n",[319,374,376,380,383,386,389,391,393,396,399,402,404,407],{"class":321,"line":375},2,[319,377,379],{"class":378},"swJcz","  modules",[319,381,382],{"class":371},":",[319,384,385],{"class":367}," [",[319,387,388],{"class":371},"'",[319,390,204],{"class":329},[319,392,388],{"class":371},[319,394,395],{"class":371},",",[319,397,398],{"class":371}," '",[319,400,401],{"class":329},"nuxt-studio",[319,403,388],{"class":371},[319,405,406],{"class":367},"]",[319,408,409],{"class":371},",\n",[319,411,413],{"class":321,"line":412},3,[319,414,416],{"emptyLinePlaceholder":415},true,"\n",[319,418,420,423,425],{"class":321,"line":419},4,[319,421,422],{"class":378},"  hub",[319,424,382],{"class":371},[319,426,427],{"class":371}," {\n",[319,429,431,434,436,440],{"class":321,"line":430},5,[319,432,433],{"class":378},"    blob",[319,435,382],{"class":371},[319,437,439],{"class":438},"sfNiH"," true",[319,441,409],{"class":371},[319,443,445],{"class":321,"line":444},6,[319,446,447],{"class":371},"  },\n",[319,449,451],{"class":321,"line":450},7,[319,452,416],{"emptyLinePlaceholder":415},[319,454,456,459,461],{"class":321,"line":455},8,[319,457,458],{"class":378},"  studio",[319,460,382],{"class":371},[319,462,427],{"class":371},[319,464,466,469,471],{"class":321,"line":465},9,[319,467,468],{"class":378},"    media",[319,470,382],{"class":371},[319,472,427],{"class":371},[319,474,476,479,481,483],{"class":321,"line":475},10,[319,477,478],{"class":378},"      external",[319,480,382],{"class":371},[319,482,439],{"class":438},[319,484,409],{"class":371},[319,486,488],{"class":321,"line":487},11,[319,489,490],{"class":371},"    },\n",[319,492,494],{"class":321,"line":493},12,[319,495,447],{"class":371},[319,497,499,502],{"class":321,"line":498},13,[319,500,501],{"class":371},"}",[319,503,504],{"class":367},")\n",[506,507,508,510,511,514,515,517,518,521],"warning",{},[65,509,204],{}," must be listed ",[70,512,513],{},"before"," ",[65,516,401],{}," in the ",[65,519,520],{},"modules"," array.",[304,523,525],{"id":524},"set-a-driver","Set a driver",[287,527,528,529,532],{},"By default, if NuxtHub cannot detect a driver, files are stored locally in the ",[65,530,531],{},".data\u002Fblob"," directory.",[534,535,537,643,699],"tabs",{"sync":536},"blob-provider",[538,539,542,551,561,564,569],"tabs-item",{"icon":540,"label":541},"i-simple-icons-amazons3","S3 compatible storage",[61,543,544,545,550],{},"To configure ",[125,546,549],{"href":547,"rel":548},"https:\u002F\u002Faws.amazon.com\u002Fs3\u002F",[129],"Amazon S3"," or any other S3-compatible storage:",[552,553,554],"ol",{},[94,555,556,557,560],{},"Install the ",[65,558,559],{},"aws4fetch"," package",[562,563],"pm-install",{"name":559},[552,565,566],{"start":375},[94,567,568],{},"Set the following environment variables:",[309,570,573],{"className":311,"code":571,"filename":572,"language":314,"meta":315,"style":315},"S3_ACCESS_KEY_ID=your-access-key-id\nS3_SECRET_ACCESS_KEY=your-secret-access-key\nS3_BUCKET=your-bucket-name\nS3_REGION=your-region # (optional)\nS3_PUBLIC_URL=your-public-url # (optional, mandatory for Cloudflare R2 provider)\nS3_ENDPOINT=your-endpoint \n",".env",[65,574,575,586,596,606,620,633],{"__ignoreMap":315},[319,576,577,580,583],{"class":321,"line":322},[319,578,579],{"class":367},"S3_ACCESS_KEY_ID",[319,581,582],{"class":371},"=",[319,584,585],{"class":329},"your-access-key-id\n",[319,587,588,591,593],{"class":321,"line":375},[319,589,590],{"class":367},"S3_SECRET_ACCESS_KEY",[319,592,582],{"class":371},[319,594,595],{"class":329},"your-secret-access-key\n",[319,597,598,601,603],{"class":321,"line":412},[319,599,600],{"class":367},"S3_BUCKET",[319,602,582],{"class":371},[319,604,605],{"class":329},"your-bucket-name\n",[319,607,608,611,613,616],{"class":321,"line":419},[319,609,610],{"class":367},"S3_REGION",[319,612,582],{"class":371},[319,614,615],{"class":329},"your-region",[319,617,619],{"class":618},"sHwdD"," # (optional)\n",[319,621,622,625,627,630],{"class":321,"line":430},[319,623,624],{"class":367},"S3_PUBLIC_URL",[319,626,582],{"class":371},[319,628,629],{"class":329},"your-public-url",[319,631,632],{"class":618}," # (optional, mandatory for Cloudflare R2 provider)\n",[319,634,635,638,640],{"class":321,"line":444},[319,636,637],{"class":367},"S3_ENDPOINT",[319,639,582],{"class":371},[319,641,642],{"class":329},"your-endpoint\n",[538,644,647,654,661,663,685],{"icon":645,"label":646},"i-simple-icons-vercel","Vercel Blob",[61,648,544,649,382],{},[125,650,653],{"href":651,"rel":652},"https:\u002F\u002Fvercel.com\u002Fdocs\u002Fstorage\u002Fvercel-blob",[129],"Vercel Blob Storage",[552,655,656],{},[94,657,556,658,560],{},[65,659,660],{},"@vercel\u002Fblob",[562,662],{"name":660},[552,664,665,674],{"start":375},[94,666,667,668,673],{},"Assign a Vercel Blob Store to your project from the ",[125,669,672],{"href":670,"rel":671},"https:\u002F\u002Fvercel.com\u002F",[129],"Vercel dashboard"," -> Project -> Storage.",[94,675,676,677,680,681,684],{},"Use ",[65,678,679],{},"VERCEL_BLOB_READ_WRITE_TOKEN"," in ",[70,682,683],{},"local development"," to authenticate.",[309,686,688],{"className":311,"code":687,"filename":572,"language":314,"meta":315,"style":315},"VERCEL_BLOB_READ_WRITE_TOKEN=your-token\n",[65,689,690],{"__ignoreMap":315},[319,691,692,694,696],{"class":321,"line":322},[319,693,679],{"class":367},[319,695,582],{"class":371},[319,697,698],{"class":329},"your-token\n",[538,700,703,711,791],{"icon":701,"label":702},"i-simple-icons-cloudflare","Cloudflare R2",[61,704,705,706,710],{},"When deploying to Cloudflare, configure ",[125,707,702],{"href":708,"rel":709},"https:\u002F\u002Fdevelopers.cloudflare.com\u002Fr2\u002F",[129]," by providing the bucket name. NuxtHub auto-generates the wrangler bindings at build time.",[309,712,714],{"className":346,"code":713,"filename":348,"language":349,"meta":315,"style":315},"export default defineNuxtConfig({\n  hub: {\n    blob: {\n      driver: 'cloudflare-r2',\n      bucketName: '\u003Cbucket-name>'\n    }\n  }\n})\n",[65,715,716,728,736,744,760,775,780,785],{"__ignoreMap":315},[319,717,718,720,722,724,726],{"class":321,"line":322},[319,719,357],{"class":356},[319,721,360],{"class":356},[319,723,364],{"class":363},[319,725,368],{"class":367},[319,727,372],{"class":371},[319,729,730,732,734],{"class":321,"line":375},[319,731,422],{"class":378},[319,733,382],{"class":371},[319,735,427],{"class":371},[319,737,738,740,742],{"class":321,"line":412},[319,739,433],{"class":378},[319,741,382],{"class":371},[319,743,427],{"class":371},[319,745,746,749,751,753,756,758],{"class":321,"line":419},[319,747,748],{"class":378},"      driver",[319,750,382],{"class":371},[319,752,398],{"class":371},[319,754,755],{"class":329},"cloudflare-r2",[319,757,388],{"class":371},[319,759,409],{"class":371},[319,761,762,765,767,769,772],{"class":321,"line":430},[319,763,764],{"class":378},"      bucketName",[319,766,382],{"class":371},[319,768,398],{"class":371},[319,770,771],{"class":329},"\u003Cbucket-name>",[319,773,774],{"class":371},"'\n",[319,776,777],{"class":321,"line":444},[319,778,779],{"class":371},"    }\n",[319,781,782],{"class":321,"line":450},[319,783,784],{"class":371},"  }\n",[319,786,787,789],{"class":321,"line":455},[319,788,501],{"class":371},[319,790,504],{"class":367},[287,792,793],{},"To use Cloudflare R2 without hosting on Cloudflare Workers, use S3 compatible storage with the appropriate environment variables.",[795,796,798],"tip",{"to":797},"https:\u002F\u002Fhub.nuxt.com\u002Fdocs\u002Fstorage\u002Fblob","See the NuxtHub blob documentation for detailed provider setup and environment variable configuration.",[295,800,802],{"id":801},"options","Options",[287,804,805,806,809,810,813],{},"Studio only manages files stored under the configured prefix in your bucket. Files uploaded through the Studio interface are stored as ",[65,807,808],{},"\u003Cprefix>\u002F\u003Cpath>"," (default: ",[65,811,812],{},"studio\u002F\u003Cpath>",") and only those files are listed, browsed, or deleted from within Studio. Any other files already in your bucket are left untouched.",[170,815,816,832],{},[173,817,818],{},[176,819,820,823,826,829],{},[179,821,822],{},"Option",[179,824,825],{},"Type",[179,827,828],{},"Default",[179,830,831],{},"Description",[189,833,834,854,875,899],{},[176,835,836,841,846,851],{},[194,837,838],{},[65,839,840],{},"external",[194,842,843],{},[65,844,845],{},"boolean",[194,847,848],{},[65,849,850],{},"false",[194,852,853],{},"Enable external storage via NuxtHub blob",[176,855,856,861,866,872],{},[194,857,858],{},[65,859,860],{},"maxFileSize",[194,862,863],{},[65,864,865],{},"number",[194,867,868,871],{},[65,869,870],{},"10485760"," (10 MB)",[194,873,874],{},"Maximum upload size in bytes, enforced server-side",[176,876,877,882,887,892],{},[194,878,879],{},[65,880,881],{},"allowedTypes",[194,883,884],{},[65,885,886],{},"string[]",[194,888,889],{},[65,890,891],{},"['image\u002F*', 'video\u002F*', 'audio\u002F*']",[194,893,894,895,898],{},"Allowed MIME types. Wildcards supported (e.g. ",[65,896,897],{},"image\u002F*",")",[176,900,901,906,911,916],{},[194,902,903],{},[65,904,905],{},"prefix",[194,907,908],{},[65,909,910],{},"string",[194,912,913],{},[65,914,915],{},"'studio'",[194,917,918,919],{},"Bucket key prefix for uploaded files. Files are stored as ",[65,920,808],{},[56,922,924],{"id":923},"examples","Examples",[61,926,927],{},"List of examples for different storage providers.",[295,929,646],{"id":930},"vercel-blob",[300,932,933,937,970,974,988,992,1001,1005,1008,1024],{"level":302},[304,934,936],{"id":935},"create-a-blob-store","Create a Blob store",[552,938,939,952,963],{},[94,940,941,942,947,948,951],{},"Go to your ",[125,943,946],{"href":944,"rel":945},"https:\u002F\u002Fvercel.com\u002Fdashboard",[129],"Vercel Dashboard"," and open the ",[70,949,950],{},"Storage"," tab",[94,953,954,955,958,959,962],{},"Click ",[70,956,957],{},"Create Database",", select ",[70,960,961],{},"Blob",", and give it a name",[94,964,965,966,969],{},"Copy the ",[65,967,968],{},"BLOB_READ_WRITE_TOKEN"," value shown after creation",[304,971,973],{"id":972},"set-environment-variables","Set environment variables",[309,975,977],{"className":311,"code":976,"filename":572,"language":314,"meta":315,"style":315},"BLOB_READ_WRITE_TOKEN=vercel_blob_rw_************\n",[65,978,979],{"__ignoreMap":315},[319,980,981,983,985],{"class":321,"line":322},[319,982,968],{"class":367},[319,984,582],{"class":371},[319,986,987],{"class":329},"vercel_blob_rw_************\n",[304,989,991],{"id":990},"link-to-your-project-in-production","Link to your project in production",[61,993,994,995,997,998,1000],{},"From your Vercel project, go to ",[70,996,950],{}," and connect the blob store you just created. Vercel will automatically inject the ",[65,999,968],{}," environment variable at runtime.",[304,1002,1004],{"id":1003},"enable-and-configure-nuxthub","Enable and configure NuxtHub",[61,1006,1007],{},"Install the NuxtHub module and enable blob storage:",[309,1009,1010],{"className":311,"code":312,"filename":313,"language":314,"meta":315,"style":315},[65,1011,1012],{"__ignoreMap":315},[319,1013,1014,1016,1018,1020,1022],{"class":321,"line":322},[319,1015,326],{"class":325},[319,1017,330],{"class":329},[319,1019,333],{"class":329},[319,1021,336],{"class":329},[319,1023,339],{"class":329},[309,1025,1026],{"className":346,"code":347,"filename":348,"language":349,"meta":315,"style":315},[65,1027,1028,1040,1066,1070,1078,1088,1092,1096,1104,1112,1122,1126,1130],{"__ignoreMap":315},[319,1029,1030,1032,1034,1036,1038],{"class":321,"line":322},[319,1031,357],{"class":356},[319,1033,360],{"class":356},[319,1035,364],{"class":363},[319,1037,368],{"class":367},[319,1039,372],{"class":371},[319,1041,1042,1044,1046,1048,1050,1052,1054,1056,1058,1060,1062,1064],{"class":321,"line":375},[319,1043,379],{"class":378},[319,1045,382],{"class":371},[319,1047,385],{"class":367},[319,1049,388],{"class":371},[319,1051,204],{"class":329},[319,1053,388],{"class":371},[319,1055,395],{"class":371},[319,1057,398],{"class":371},[319,1059,401],{"class":329},[319,1061,388],{"class":371},[319,1063,406],{"class":367},[319,1065,409],{"class":371},[319,1067,1068],{"class":321,"line":412},[319,1069,416],{"emptyLinePlaceholder":415},[319,1071,1072,1074,1076],{"class":321,"line":419},[319,1073,422],{"class":378},[319,1075,382],{"class":371},[319,1077,427],{"class":371},[319,1079,1080,1082,1084,1086],{"class":321,"line":430},[319,1081,433],{"class":378},[319,1083,382],{"class":371},[319,1085,439],{"class":438},[319,1087,409],{"class":371},[319,1089,1090],{"class":321,"line":444},[319,1091,447],{"class":371},[319,1093,1094],{"class":321,"line":450},[319,1095,416],{"emptyLinePlaceholder":415},[319,1097,1098,1100,1102],{"class":321,"line":455},[319,1099,458],{"class":378},[319,1101,382],{"class":371},[319,1103,427],{"class":371},[319,1105,1106,1108,1110],{"class":321,"line":465},[319,1107,468],{"class":378},[319,1109,382],{"class":371},[319,1111,427],{"class":371},[319,1113,1114,1116,1118,1120],{"class":321,"line":475},[319,1115,478],{"class":378},[319,1117,382],{"class":371},[319,1119,439],{"class":438},[319,1121,409],{"class":371},[319,1123,1124],{"class":321,"line":487},[319,1125,490],{"class":371},[319,1127,1128],{"class":321,"line":493},[319,1129,447],{"class":371},[319,1131,1132,1134],{"class":321,"line":498},[319,1133,501],{"class":371},[319,1135,504],{"class":367},[295,1137,702],{"id":755},[300,1139,1140,1144,1182,1186,1220,1223,1230,1311,1314,1316,1332],{"level":302},[304,1141,1143],{"id":1142},"create-an-r2-bucket","Create an R2 bucket",[552,1145,1146,1158,1167],{},[94,1147,1148,1149,1154,1155],{},"Go to ",[125,1150,1153],{"href":1151,"rel":1152},"https:\u002F\u002Fdash.cloudflare.com",[129],"Cloudflare Dashboard"," and navigate to ",[70,1156,1157],{},"R2 Object Storage",[94,1159,954,1160,1163,1164,898],{},[70,1161,1162],{},"Create bucket"," and give it a name (e.g., ",[65,1165,1166],{},"my-studio-media",[94,1168,1169,1170,1173,1174,1177,1178,1181],{},"In your bucket ",[70,1171,1172],{},"Settings",", enable ",[70,1175,1176],{},"Public access"," (via an ",[65,1179,1180],{},"r2.dev"," subdomain or a custom domain) so uploaded files are publicly accessible",[304,1183,1185],{"id":1184},"create-an-r2-api-token","Create an R2 API token",[552,1187,1188,1200,1210],{},[94,1189,1190,1191,1196,1197],{},"From the ",[125,1192,1195],{"href":1193,"rel":1194},"https:\u002F\u002Fdash.cloudflare.com\u002F?to=\u002F:account\u002Fr2\u002Foverview",[129],"R2 overview"," page, click ",[70,1198,1199],{},"Manage R2 API Tokens",[94,1201,1202,1205,1206,1209],{},[70,1203,1204],{},"Create API token"," and set the permission to ",[70,1207,1208],{},"Object Read & Write"," — this allows Studio to read, write, and list objects",[94,1211,1212,1213,1216,1217,1219],{},"Under ",[70,1214,1215],{},"Specify bucket(s)",", select your bucket (e.g., ",[65,1218,1166],{},") to restrict the token's scope",[304,1221,973],{"id":1222},"set-environment-variables-1",[61,1224,1225,1226,1229],{},"Your ",[70,1227,1228],{},"Account ID"," is visible in the right sidebar of the R2 overview page or in your Cloudflare account URL.",[309,1231,1233],{"className":311,"code":1232,"filename":572,"language":314,"meta":315,"style":315},"S3_ACCESS_KEY_ID=\u003Cr2_access_key_id>\nS3_SECRET_ACCESS_KEY=\u003Cr2_secret_access_key>\nS3_ENDPOINT=https:\u002F\u002F\u003Caccount_id>.r2.cloudflarestorage.com\nS3_BUCKET=my-studio-media\nS3_PUBLIC_URL=https:\u002F\u002Fpub-\u003Chash>.r2.dev   # or your custom domain\n",[65,1234,1235,1248,1259,1280,1289],{"__ignoreMap":315},[319,1236,1237,1239,1242,1245],{"class":321,"line":322},[319,1238,579],{"class":367},[319,1240,1241],{"class":371},"=\u003C",[319,1243,1244],{"class":329},"r2_access_key_id",[319,1246,1247],{"class":371},">\n",[319,1249,1250,1252,1254,1257],{"class":321,"line":375},[319,1251,590],{"class":367},[319,1253,1241],{"class":371},[319,1255,1256],{"class":329},"r2_secret_access_key",[319,1258,1247],{"class":371},[319,1260,1261,1263,1265,1268,1271,1274,1277],{"class":321,"line":412},[319,1262,637],{"class":367},[319,1264,582],{"class":371},[319,1266,1267],{"class":329},"https:\u002F\u002F",[319,1269,1270],{"class":371},"\u003C",[319,1272,1273],{"class":329},"account_id",[319,1275,1276],{"class":371},">",[319,1278,1279],{"class":329},".r2.cloudflarestorage.com\n",[319,1281,1282,1284,1286],{"class":321,"line":419},[319,1283,600],{"class":367},[319,1285,582],{"class":371},[319,1287,1288],{"class":329},"my-studio-media\n",[319,1290,1291,1293,1295,1298,1300,1303,1305,1308],{"class":321,"line":430},[319,1292,624],{"class":367},[319,1294,582],{"class":371},[319,1296,1297],{"class":329},"https:\u002F\u002Fpub-",[319,1299,1270],{"class":371},[319,1301,1302],{"class":329},"hash",[319,1304,1276],{"class":371},[319,1306,1307],{"class":329},".r2.dev",[319,1309,1310],{"class":618},"   # or your custom domain\n",[304,1312,1004],{"id":1313},"enable-and-configure-nuxthub-1",[61,1315,1007],{},[309,1317,1318],{"className":311,"code":312,"filename":313,"language":314,"meta":315,"style":315},[65,1319,1320],{"__ignoreMap":315},[319,1321,1322,1324,1326,1328,1330],{"class":321,"line":322},[319,1323,326],{"class":325},[319,1325,330],{"class":329},[319,1327,333],{"class":329},[319,1329,336],{"class":329},[319,1331,339],{"class":329},[309,1333,1334],{"className":346,"code":347,"filename":348,"language":349,"meta":315,"style":315},[65,1335,1336,1348,1374,1378,1386,1396,1400,1404,1412,1420,1430,1434,1438],{"__ignoreMap":315},[319,1337,1338,1340,1342,1344,1346],{"class":321,"line":322},[319,1339,357],{"class":356},[319,1341,360],{"class":356},[319,1343,364],{"class":363},[319,1345,368],{"class":367},[319,1347,372],{"class":371},[319,1349,1350,1352,1354,1356,1358,1360,1362,1364,1366,1368,1370,1372],{"class":321,"line":375},[319,1351,379],{"class":378},[319,1353,382],{"class":371},[319,1355,385],{"class":367},[319,1357,388],{"class":371},[319,1359,204],{"class":329},[319,1361,388],{"class":371},[319,1363,395],{"class":371},[319,1365,398],{"class":371},[319,1367,401],{"class":329},[319,1369,388],{"class":371},[319,1371,406],{"class":367},[319,1373,409],{"class":371},[319,1375,1376],{"class":321,"line":412},[319,1377,416],{"emptyLinePlaceholder":415},[319,1379,1380,1382,1384],{"class":321,"line":419},[319,1381,422],{"class":378},[319,1383,382],{"class":371},[319,1385,427],{"class":371},[319,1387,1388,1390,1392,1394],{"class":321,"line":430},[319,1389,433],{"class":378},[319,1391,382],{"class":371},[319,1393,439],{"class":438},[319,1395,409],{"class":371},[319,1397,1398],{"class":321,"line":444},[319,1399,447],{"class":371},[319,1401,1402],{"class":321,"line":450},[319,1403,416],{"emptyLinePlaceholder":415},[319,1405,1406,1408,1410],{"class":321,"line":455},[319,1407,458],{"class":378},[319,1409,382],{"class":371},[319,1411,427],{"class":371},[319,1413,1414,1416,1418],{"class":321,"line":465},[319,1415,468],{"class":378},[319,1417,382],{"class":371},[319,1419,427],{"class":371},[319,1421,1422,1424,1426,1428],{"class":321,"line":475},[319,1423,478],{"class":378},[319,1425,382],{"class":371},[319,1427,439],{"class":438},[319,1429,409],{"class":371},[319,1431,1432],{"class":321,"line":487},[319,1433,490],{"class":371},[319,1435,1436],{"class":321,"line":493},[319,1437,447],{"class":371},[319,1439,1440,1442],{"class":321,"line":498},[319,1441,501],{"class":371},[319,1443,504],{"class":367},[1445,1446,1447],"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 .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 .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}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 .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":315,"searchDepth":375,"depth":375,"links":1449},[1450,1451,1452,1453,1454,1456,1460],{"id":58,"depth":375,"text":59},{"id":85,"depth":375,"text":86},{"id":140,"depth":375,"text":141},{"id":167,"depth":375,"text":168},{"id":254,"depth":375,"text":1455},"Default storage (public folder)",{"id":271,"depth":375,"text":272,"children":1457},[1458,1459],{"id":297,"depth":412,"text":298},{"id":801,"depth":412,"text":802},{"id":923,"depth":375,"text":924,"children":1461},[1462,1463],{"id":930,"depth":412,"text":646},{"id":755,"depth":412,"text":702},"Explore how to browse and manage media files, including external storage with NuxtHub blob storage, and integrate them into your projects.","md",null,{},{"title":30,"icon":33},{"title":1470,"description":1471},"Nuxt Studio Media Library and External Storage","Learn how to manage media files in Nuxt Studio, including external storage integration with NuxtHub blob storage and Cloudflare R2.","rlvCRyr-OrYrj2CVPK3gIzeuaj2UO7l-bJxSW04YrGM",[1474,1476],{"title":25,"path":26,"stem":27,"description":1475,"icon":28,"children":-1},"Discover and select your favorite way to manage your content between the visual or the code editor.",{"title":35,"path":36,"stem":37,"description":1477,"icon":38,"children":-1},"Learn how to enable and use AI-powered features in Nuxt Studio for intelligent content completion, transformation, and style guidance.",1778168235675]