[{"data":1,"prerenderedAt":706},["ShallowReactive",2],{"docs-\u002Fstoryblok":3},{"id":4,"title":5,"body":6,"description":699,"extension":700,"meta":701,"navigation":228,"path":702,"seo":703,"stem":704,"__hash__":705},"docs\u002Fdocs\u002Fstoryblok.md","Storyblok Integration",{"type":7,"value":8,"toc":685},"minimark",[9,13,17,20,25,28,34,45,50,56,72,75,81,83,87,94,141,148,163,165,169,172,195,200,344,348,359,374,410,414,417,553,555,559,563,579,583,586,592,595,601,605,608,681],[10,11,5],"h1",{"id":12},"storyblok-integration",[14,15,16],"p",{},"Cachely has first-class support for Storyblok. It handles all regional CDN variants and provides a response transformer that rewrites asset URLs in your Storyblok API responses.",[18,19],"hr",{},[21,22,24],"h2",{"id":23},"supported-url-patterns","Supported URL patterns",[14,26,27],{},"Storyblok serves assets from regional CDN hosts. Cachely handles all of them:",[14,29,30],{},[31,32,33],"strong",{},"Europe (default):",[35,36,41],"pre",{"className":37,"code":39,"language":40},[38],"language-text","https:\u002F\u002Fa.storyblok.com\u002Ff\u002F123456\u002F1920x1080\u002Fabc123def\u002Fphoto.jpg\n","text",[42,43,39],"code",{"__ignoreMap":44},"",[14,46,47],{},[31,48,49],{},"US:",[35,51,54],{"className":52,"code":53,"language":40},[38],"https:\u002F\u002Fa-us.storyblok.com\u002Ff\u002F123456\u002F1920x1080\u002Fabc123def\u002Fphoto.jpg\n",[42,55,53],{"__ignoreMap":44},[14,57,58,61,62,65,66,65,69],{},[31,59,60],{},"Other regions:"," ",[42,63,64],{},"a-ap.storyblok.com",", ",[42,67,68],{},"a-ca.storyblok.com",[42,70,71],{},"a2.storyblok.com",[14,73,74],{},"All are rewritten to your tenant URL:",[35,76,79],{"className":77,"code":78,"language":40},[38],"https:\u002F\u002Fyour-tenant.cmsassets.com\u002F1920x1080\u002Fabc123def\u002Fphoto.jpg\n",[42,80,78],{"__ignoreMap":44},[18,82],{},[21,84,86],{"id":85},"tenant-setup","Tenant setup",[14,88,89,90,93],{},"When creating your tenant, select ",[31,91,92],{},"Storyblok"," as the CMS type and provide your space ID:",[95,96,97,110],"table",{},[98,99,100],"thead",{},[101,102,103,107],"tr",{},[104,105,106],"th",{},"Field",[104,108,109],{},"Value",[111,112,113,121,131],"tbody",{},[101,114,115,119],{},[116,117,118],"td",{},"CMS",[116,120,92],{},[101,122,123,126],{},[116,124,125],{},"Space ID",[116,127,128],{},[42,129,130],{},"123456",[101,132,133,136],{},[116,134,135],{},"Website domain",[116,137,138],{},[42,139,140],{},"your-site.com",[14,142,143,144,147],{},"Your numeric space ID can be found in the Storyblok dashboard under ",[31,145,146],{},"Settings → General",".",[149,150,151],"blockquote",{},[14,152,153,156,157,160,161,147],{},[31,154,155],{},"Note:"," The space ID is the numeric identifier, not the space name. For example, if your asset URLs look like ",[42,158,159],{},"https:\u002F\u002Fa.storyblok.com\u002Ff\u002F123456\u002F...",", your space ID is ",[42,162,130],{},[18,164],{},[21,166,168],{"id":167},"response-transformer","Response transformer",[14,170,171],{},"Install the response transformer to automatically rewrite Storyblok asset URLs in your API responses:",[35,173,177],{"className":174,"code":175,"language":176,"meta":44,"style":44},"language-bash shiki shiki-themes github-dark","npm install @synchronized-studio\u002Fresponse-transformer\n","bash",[42,178,179],{"__ignoreMap":44},[180,181,184,188,192],"span",{"class":182,"line":183},"line",1,[180,185,187],{"class":186},"svObZ","npm",[180,189,191],{"class":190},"sU2Wk"," install",[180,193,194],{"class":190}," @synchronized-studio\u002Fresponse-transformer\n",[196,197,199],"h3",{"id":198},"basic-usage","Basic usage",[35,201,205],{"className":202,"code":203,"language":204,"meta":44,"style":44},"language-typescript shiki shiki-themes github-dark","import { transformCmsAssetUrls } from \"@synchronized-studio\u002Fresponse-transformer\"\n\nconst response = await fetch(`https:\u002F\u002Fapi.storyblok.com\u002Fv2\u002Fcdn\u002Fstories?token=${token}`)\nconst data = await response.json()\n\nconst transformed = transformCmsAssetUrls(data, {\n  cms: \"storyblok\",\n  identifier: \"123456\",\n  cmsAssetsUrl: \"https:\u002F\u002Fyour-tenant.cmsassets.com\"\n})\n","typescript",[42,206,207,223,230,264,285,290,306,318,329,338],{"__ignoreMap":44},[180,208,209,213,217,220],{"class":182,"line":183},[180,210,212],{"class":211},"snl16","import",[180,214,216],{"class":215},"s95oV"," { transformCmsAssetUrls } ",[180,218,219],{"class":211},"from",[180,221,222],{"class":190}," \"@synchronized-studio\u002Fresponse-transformer\"\n",[180,224,226],{"class":182,"line":225},2,[180,227,229],{"emptyLinePlaceholder":228},true,"\n",[180,231,233,236,240,243,246,249,252,255,258,261],{"class":182,"line":232},3,[180,234,235],{"class":211},"const",[180,237,239],{"class":238},"sDLfK"," response",[180,241,242],{"class":211}," =",[180,244,245],{"class":211}," await",[180,247,248],{"class":186}," fetch",[180,250,251],{"class":215},"(",[180,253,254],{"class":190},"`https:\u002F\u002Fapi.storyblok.com\u002Fv2\u002Fcdn\u002Fstories?token=${",[180,256,257],{"class":215},"token",[180,259,260],{"class":190},"}`",[180,262,263],{"class":215},")\n",[180,265,267,269,272,274,276,279,282],{"class":182,"line":266},4,[180,268,235],{"class":211},[180,270,271],{"class":238}," data",[180,273,242],{"class":211},[180,275,245],{"class":211},[180,277,278],{"class":215}," response.",[180,280,281],{"class":186},"json",[180,283,284],{"class":215},"()\n",[180,286,288],{"class":182,"line":287},5,[180,289,229],{"emptyLinePlaceholder":228},[180,291,293,295,298,300,303],{"class":182,"line":292},6,[180,294,235],{"class":211},[180,296,297],{"class":238}," transformed",[180,299,242],{"class":211},[180,301,302],{"class":186}," transformCmsAssetUrls",[180,304,305],{"class":215},"(data, {\n",[180,307,309,312,315],{"class":182,"line":308},7,[180,310,311],{"class":215},"  cms: ",[180,313,314],{"class":190},"\"storyblok\"",[180,316,317],{"class":215},",\n",[180,319,321,324,327],{"class":182,"line":320},8,[180,322,323],{"class":215},"  identifier: ",[180,325,326],{"class":190},"\"123456\"",[180,328,317],{"class":215},[180,330,332,335],{"class":182,"line":331},9,[180,333,334],{"class":215},"  cmsAssetsUrl: ",[180,336,337],{"class":190},"\"https:\u002F\u002Fyour-tenant.cmsassets.com\"\n",[180,339,341],{"class":182,"line":340},10,[180,342,343],{"class":215},"})\n",[196,345,347],{"id":346},"using-an-environment-variable","Using an environment variable",[14,349,350,351,354,355,358],{},"Set ",[42,352,353],{},"CMS_ASSETS_URL"," in your environment and omit the ",[42,356,357],{},"cmsAssetsUrl"," option:",[35,360,362],{"className":174,"code":361,"language":176,"meta":44,"style":44},"CMS_ASSETS_URL=https:\u002F\u002Fyour-tenant.cmsassets.com\n",[42,363,364],{"__ignoreMap":44},[180,365,366,368,371],{"class":182,"line":183},[180,367,353],{"class":215},[180,369,370],{"class":211},"=",[180,372,373],{"class":190},"https:\u002F\u002Fyour-tenant.cmsassets.com\n",[35,375,377],{"className":202,"code":376,"language":204,"meta":44,"style":44},"const transformed = transformCmsAssetUrls(data, {\n  cms: \"storyblok\",\n  identifier: \"123456\"\n})\n",[42,378,379,391,399,406],{"__ignoreMap":44},[180,380,381,383,385,387,389],{"class":182,"line":183},[180,382,235],{"class":211},[180,384,297],{"class":238},[180,386,242],{"class":211},[180,388,302],{"class":186},[180,390,305],{"class":215},[180,392,393,395,397],{"class":182,"line":225},[180,394,311],{"class":215},[180,396,314],{"class":190},[180,398,317],{"class":215},[180,400,401,403],{"class":182,"line":232},[180,402,323],{"class":215},[180,404,405],{"class":190},"\"123456\"\n",[180,407,408],{"class":182,"line":266},[180,409,343],{"class":215},[196,411,413],{"id":412},"nuxt-ssr-integration","Nuxt \u002F SSR integration",[14,415,416],{},"For Nuxt or other SSR frameworks, wrap your Storyblok data layer:",[35,418,420],{"className":202,"code":419,"language":204,"meta":44,"style":44},"\u002F\u002F composables\u002FuseStoryblokData.ts\nimport { transformCmsAssetUrls } from \"@synchronized-studio\u002Fresponse-transformer\"\n\nexport async function useStoryblokData(slug: string) {\n  const data = await storyblokApi.get(`cdn\u002Fstories\u002F${slug}`)\n\n  return transformCmsAssetUrls(data, {\n    cms: \"storyblok\",\n    identifier: \"123456\",\n    cmsAssetsUrl: useRuntimeConfig().public.cmsAssetsUrl\n  })\n}\n",[42,421,422,428,438,442,471,499,503,512,521,530,541,547],{"__ignoreMap":44},[180,423,424],{"class":182,"line":183},[180,425,427],{"class":426},"sAwPA","\u002F\u002F composables\u002FuseStoryblokData.ts\n",[180,429,430,432,434,436],{"class":182,"line":225},[180,431,212],{"class":211},[180,433,216],{"class":215},[180,435,219],{"class":211},[180,437,222],{"class":190},[180,439,440],{"class":182,"line":232},[180,441,229],{"emptyLinePlaceholder":228},[180,443,444,447,450,453,456,458,462,465,468],{"class":182,"line":266},[180,445,446],{"class":211},"export",[180,448,449],{"class":211}," async",[180,451,452],{"class":211}," function",[180,454,455],{"class":186}," useStoryblokData",[180,457,251],{"class":215},[180,459,461],{"class":460},"s9osk","slug",[180,463,464],{"class":211},":",[180,466,467],{"class":238}," string",[180,469,470],{"class":215},") {\n",[180,472,473,476,478,480,482,485,488,490,493,495,497],{"class":182,"line":287},[180,474,475],{"class":211},"  const",[180,477,271],{"class":238},[180,479,242],{"class":211},[180,481,245],{"class":211},[180,483,484],{"class":215}," storyblokApi.",[180,486,487],{"class":186},"get",[180,489,251],{"class":215},[180,491,492],{"class":190},"`cdn\u002Fstories\u002F${",[180,494,461],{"class":215},[180,496,260],{"class":190},[180,498,263],{"class":215},[180,500,501],{"class":182,"line":292},[180,502,229],{"emptyLinePlaceholder":228},[180,504,505,508,510],{"class":182,"line":308},[180,506,507],{"class":211},"  return",[180,509,302],{"class":186},[180,511,305],{"class":215},[180,513,514,517,519],{"class":182,"line":320},[180,515,516],{"class":215},"    cms: ",[180,518,314],{"class":190},[180,520,317],{"class":215},[180,522,523,526,528],{"class":182,"line":331},[180,524,525],{"class":215},"    identifier: ",[180,527,326],{"class":190},[180,529,317],{"class":215},[180,531,532,535,538],{"class":182,"line":340},[180,533,534],{"class":215},"    cmsAssetsUrl: ",[180,536,537],{"class":186},"useRuntimeConfig",[180,539,540],{"class":215},"().public.cmsAssetsUrl\n",[180,542,544],{"class":182,"line":543},11,[180,545,546],{"class":215},"  })\n",[180,548,550],{"class":182,"line":549},12,[180,551,552],{"class":215},"}\n",[18,554],{},[21,556,558],{"id":557},"advanced-options","Advanced options",[196,560,562],{"id":561},"regional-cdn-handling","Regional CDN handling",[14,564,565,566,65,569,65,572,65,574,65,576,578],{},"If your Storyblok space is hosted in a specific region, Cachely automatically handles all regional CDN variants. No additional configuration is required — the edge worker matches URLs from any Storyblok CDN host (",[42,567,568],{},"a.storyblok.com",[42,570,571],{},"a-us.storyblok.com",[42,573,64],{},[42,575,68],{},[42,577,71],{},").",[196,580,582],{"id":581},"image-optimization","Image optimization",[14,584,585],{},"Storyblok supports image transformations via URL parameters:",[35,587,590],{"className":588,"code":589,"language":40},[38],"https:\u002F\u002Fa.storyblok.com\u002Ff\u002F123456\u002F1920x1080\u002Fabc123\u002Fphoto.jpg\u002Fm\u002F600x400\u002Ffilters:quality(80)\n",[42,591,589],{"__ignoreMap":44},[14,593,594],{},"These transformation paths are preserved through the proxy:",[35,596,599],{"className":597,"code":598,"language":40},[38],"https:\u002F\u002Fyour-tenant.cmsassets.com\u002F1920x1080\u002Fabc123\u002Fphoto.jpg\u002Fm\u002F600x400\u002Ffilters:quality(80)\n",[42,600,598],{"__ignoreMap":44},[196,602,604],{"id":603},"error-handling","Error handling",[14,606,607],{},"By default, transform errors are logged as warnings and the original data is returned unchanged. You can provide a custom error handler:",[35,609,611],{"className":202,"code":610,"language":204,"meta":44,"style":44},"const transformed = transformCmsAssetUrls(data, {\n  cms: \"storyblok\",\n  identifier: \"123456\",\n  onError: (error) => {\n    Sentry.captureException(error)\n  }\n})\n",[42,612,613,625,633,641,661,672,677],{"__ignoreMap":44},[180,614,615,617,619,621,623],{"class":182,"line":183},[180,616,235],{"class":211},[180,618,297],{"class":238},[180,620,242],{"class":211},[180,622,302],{"class":186},[180,624,305],{"class":215},[180,626,627,629,631],{"class":182,"line":225},[180,628,311],{"class":215},[180,630,314],{"class":190},[180,632,317],{"class":215},[180,634,635,637,639],{"class":182,"line":232},[180,636,323],{"class":215},[180,638,326],{"class":190},[180,640,317],{"class":215},[180,642,643,646,649,652,655,658],{"class":182,"line":266},[180,644,645],{"class":186},"  onError",[180,647,648],{"class":215},": (",[180,650,651],{"class":460},"error",[180,653,654],{"class":215},") ",[180,656,657],{"class":211},"=>",[180,659,660],{"class":215}," {\n",[180,662,663,666,669],{"class":182,"line":287},[180,664,665],{"class":215},"    Sentry.",[180,667,668],{"class":186},"captureException",[180,670,671],{"class":215},"(error)\n",[180,673,674],{"class":182,"line":292},[180,675,676],{"class":215},"  }\n",[180,678,679],{"class":182,"line":308},[180,680,343],{"class":215},[682,683,684],"style",{},"html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}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 pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}html pre.shiki code .s9osk, html code.shiki .s9osk{--shiki-default:#FFAB70}",{"title":44,"searchDepth":225,"depth":225,"links":686},[687,688,689,694],{"id":23,"depth":225,"text":24},{"id":85,"depth":225,"text":86},{"id":167,"depth":225,"text":168,"children":690},[691,692,693],{"id":198,"depth":232,"text":199},{"id":346,"depth":232,"text":347},{"id":412,"depth":232,"text":413},{"id":557,"depth":225,"text":558,"children":695},[696,697,698],{"id":561,"depth":232,"text":562},{"id":581,"depth":232,"text":582},{"id":603,"depth":232,"text":604},"Proxy Storyblok assets and API requests through your own edge domain with global caching and automatic image URL rewriting.","md",{},"\u002Fdocs\u002Fstoryblok",{"title":5,"description":699},"docs\u002Fstoryblok","LM-3MjBUsdT0i-de0OcQ1Ivst_YJuuW7K8xMCfYlpfE",1777579477896]