[{"data":1,"prerenderedAt":780},["ShallowReactive",2],{"navigation_docs":3,"-providers-directus":192,"-providers-directus-surround":775},[4,26,43,179],{"title":5,"path":6,"stem":7,"children":8,"page":25},"Get Started","/get-started","1.get-started",[9,13,17,21],{"title":10,"path":11,"stem":12},"Installation","/get-started/installation","1.get-started/1.installation",{"title":14,"path":15,"stem":16},"Configuration","/get-started/configuration","1.get-started/2.configuration",{"title":18,"path":19,"stem":20},"Providers","/get-started/providers","1.get-started/3.providers",{"title":22,"path":23,"stem":24},"Contributing","/get-started/contributing","1.get-started/4.contributing",false,{"title":27,"path":28,"stem":29,"children":30,"page":25},"Usage","/usage","2.usage",[31,35,39],{"title":32,"path":33,"stem":34},"\u003CNuxtImg>","/usage/nuxt-img","2.usage/1.nuxt-img",{"title":36,"path":37,"stem":38},"\u003CNuxtPicture>","/usage/nuxt-picture","2.usage/2.nuxt-picture",{"title":40,"path":41,"stem":42},"useImage()","/usage/use-image","2.usage/3.use-image",{"title":18,"path":44,"stem":45,"children":46,"page":25},"/providers","3.providers",[47,51,55,59,63,67,71,75,79,83,87,91,95,99,103,107,111,115,119,123,127,131,135,139,143,147,151,155,159,163,167,171,175],{"title":48,"path":49,"stem":50},"Aliyun","/providers/aliyun","3.providers/aliyun",{"title":52,"path":53,"stem":54},"AWS Amplify","/providers/aws-amplify","3.providers/aws-amplify",{"title":56,"path":57,"stem":58},"Bunny","/providers/bunny","3.providers/bunny",{"title":60,"path":61,"stem":62},"Caisy","/providers/caisy","3.providers/caisy",{"title":64,"path":65,"stem":66},"Cloudflare","/providers/cloudflare","3.providers/cloudflare",{"title":68,"path":69,"stem":70},"Cloudimage","/providers/cloudimage","3.providers/cloudimage",{"title":72,"path":73,"stem":74},"Cloudinary","/providers/cloudinary","3.providers/cloudinary",{"title":76,"path":77,"stem":78},"Contentful","/providers/contentful","3.providers/contentful",{"title":80,"path":81,"stem":82},"Directus","/providers/directus","3.providers/directus",{"title":84,"path":85,"stem":86},"Fastly","/providers/fastly","3.providers/fastly",{"title":88,"path":89,"stem":90},"Filerobot","/providers/filerobot","3.providers/filerobot",{"title":92,"path":93,"stem":94},"GitHub","/providers/github","3.providers/github",{"title":96,"path":97,"stem":98},"Glide","/providers/glide","3.providers/glide",{"title":100,"path":101,"stem":102},"Gumlet","/providers/gumlet","3.providers/gumlet",{"title":104,"path":105,"stem":106},"Hygraph","/providers/hygraph","3.providers/hygraph",{"title":108,"path":109,"stem":110},"ImageEngine","/providers/imageengine","3.providers/imageengine",{"title":112,"path":113,"stem":114},"ImageKit","/providers/imagekit","3.providers/imagekit",{"title":116,"path":117,"stem":118},"Imgix","/providers/imgix","3.providers/imgix",{"title":120,"path":121,"stem":122},"IPX","/providers/ipx","3.providers/ipx",{"title":124,"path":125,"stem":126},"Netlify","/providers/netlify","3.providers/netlify",{"title":128,"path":129,"stem":130},"None","/providers/none","3.providers/none",{"title":132,"path":133,"stem":134},"Prepr","/providers/prepr","3.providers/prepr",{"title":136,"path":137,"stem":138},"Prismic","/providers/prismic","3.providers/prismic",{"title":140,"path":141,"stem":142},"Sanity","/providers/sanity","3.providers/sanity",{"title":144,"path":145,"stem":146},"Shopify","/providers/shopify","3.providers/shopify",{"title":148,"path":149,"stem":150},"Sirv","/providers/sirv","3.providers/sirv",{"title":152,"path":153,"stem":154},"Storyblok","/providers/storyblok","3.providers/storyblok",{"title":156,"path":157,"stem":158},"Strapi","/providers/strapi","3.providers/strapi",{"title":160,"path":161,"stem":162},"Twicpics","/providers/twicpics","3.providers/twicpics",{"title":164,"path":165,"stem":166},"Unsplash","/providers/unsplash","3.providers/unsplash",{"title":168,"path":169,"stem":170},"Uploadcare","/providers/uploadcare","3.providers/uploadcare",{"title":172,"path":173,"stem":174},"Vercel","/providers/vercel","3.providers/vercel",{"title":176,"path":177,"stem":178},"Weserv","/providers/weserv","3.providers/weserv",{"title":180,"path":181,"stem":182,"children":183,"page":25},"Advanced","/advanced","4.advanced",[184,188],{"title":185,"path":186,"stem":187},"Custom Provider","/advanced/custom-provider","4.advanced/1.custom-provider",{"title":189,"path":190,"stem":191},"Static Images","/advanced/static-images","4.advanced/2.static-images",{"id":193,"title":80,"body":194,"description":763,"extension":764,"links":765,"meta":771,"navigation":772,"path":81,"seo":773,"stem":82,"__hash__":774},"docs/3.providers/directus.md",{"type":195,"value":196,"toc":760},"minimark",[197,208,211,315,318,457,462,471,595,611,732,756],[198,199,200,201,207],"p",{},"Integration between ",[202,203,80],"a",{"href":204,"rel":205},"https://directus.io",[206],"nofollow"," and the image module.",[198,209,210],{},"To use this provider you just need to specify the base URL of your project.",[212,213,219],"pre",{"className":214,"code":215,"filename":216,"language":217,"meta":218,"style":218},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","export default defineNuxtConfig({\n  image: {\n    directus: {\n      // This URL needs to include the final `assets/` directory\n      baseURL: 'http://localhost:8055/assets'\n    }\n  }\n})\n","nuxt.config.ts","ts","",[220,221,222,246,259,269,276,294,300,306],"code",{"__ignoreMap":218},[223,224,227,231,234,238,242],"span",{"class":225,"line":226},"line",1,[223,228,230],{"class":229},"s7zQu","export",[223,232,233],{"class":229}," default",[223,235,237],{"class":236},"s2Zo4"," defineNuxtConfig",[223,239,241],{"class":240},"sTEyZ","(",[223,243,245],{"class":244},"sMK4o","{\n",[223,247,249,253,256],{"class":225,"line":248},2,[223,250,252],{"class":251},"swJcz","  image",[223,254,255],{"class":244},":",[223,257,258],{"class":244}," {\n",[223,260,262,265,267],{"class":225,"line":261},3,[223,263,264],{"class":251},"    directus",[223,266,255],{"class":244},[223,268,258],{"class":244},[223,270,272],{"class":225,"line":271},4,[223,273,275],{"class":274},"sHwdD","      // This URL needs to include the final `assets/` directory\n",[223,277,279,282,284,287,291],{"class":225,"line":278},5,[223,280,281],{"class":251},"      baseURL",[223,283,255],{"class":244},[223,285,286],{"class":244}," '",[223,288,290],{"class":289},"sfazB","http://localhost:8055/assets",[223,292,293],{"class":244},"'\n",[223,295,297],{"class":225,"line":296},6,[223,298,299],{"class":244},"    }\n",[223,301,303],{"class":225,"line":302},7,[223,304,305],{"class":244},"  }\n",[223,307,309,312],{"class":225,"line":308},8,[223,310,311],{"class":244},"}",[223,313,314],{"class":240},")\n",[198,316,317],{},"You can easily override default options:",[212,319,321],{"className":214,"code":320,"filename":216,"language":217,"meta":218,"style":218},"export default defineNuxtConfig({\n  image: {\n    directus: {\n      baseURL: 'http://mydirectus-domain.com/assets',\n      modifiers: {\n        withoutEnlargement: 'true',\n        transforms: [['blur', 4], ['negate']]\n      }\n    }\n  }\n})\n",[220,322,323,335,343,351,368,377,393,435,440,445,450],{"__ignoreMap":218},[223,324,325,327,329,331,333],{"class":225,"line":226},[223,326,230],{"class":229},[223,328,233],{"class":229},[223,330,237],{"class":236},[223,332,241],{"class":240},[223,334,245],{"class":244},[223,336,337,339,341],{"class":225,"line":248},[223,338,252],{"class":251},[223,340,255],{"class":244},[223,342,258],{"class":244},[223,344,345,347,349],{"class":225,"line":261},[223,346,264],{"class":251},[223,348,255],{"class":244},[223,350,258],{"class":244},[223,352,353,355,357,359,362,365],{"class":225,"line":271},[223,354,281],{"class":251},[223,356,255],{"class":244},[223,358,286],{"class":244},[223,360,361],{"class":289},"http://mydirectus-domain.com/assets",[223,363,364],{"class":244},"'",[223,366,367],{"class":244},",\n",[223,369,370,373,375],{"class":225,"line":278},[223,371,372],{"class":251},"      modifiers",[223,374,255],{"class":244},[223,376,258],{"class":244},[223,378,379,382,384,386,389,391],{"class":225,"line":296},[223,380,381],{"class":251},"        withoutEnlargement",[223,383,255],{"class":244},[223,385,286],{"class":244},[223,387,388],{"class":289},"true",[223,390,364],{"class":244},[223,392,367],{"class":244},[223,394,395,398,400,403,405,408,410,413,417,420,422,425,427,430,432],{"class":225,"line":302},[223,396,397],{"class":251},"        transforms",[223,399,255],{"class":244},[223,401,402],{"class":240}," [[",[223,404,364],{"class":244},[223,406,407],{"class":289},"blur",[223,409,364],{"class":244},[223,411,412],{"class":244},",",[223,414,416],{"class":415},"sbssI"," 4",[223,418,419],{"class":240},"]",[223,421,412],{"class":244},[223,423,424],{"class":240}," [",[223,426,364],{"class":244},[223,428,429],{"class":289},"negate",[223,431,364],{"class":244},[223,433,434],{"class":240},"]]\n",[223,436,437],{"class":225,"line":308},[223,438,439],{"class":244},"      }\n",[223,441,443],{"class":225,"line":442},9,[223,444,299],{"class":244},[223,446,448],{"class":225,"line":447},10,[223,449,305],{"class":244},[223,451,453,455],{"class":225,"line":452},11,[223,454,311],{"class":244},[223,456,314],{"class":240},[458,459,461],"h2",{"id":460},"modifiers","Modifiers",[198,463,464,465,470],{},"All the default modifiers from ",[202,466,469],{"href":467,"rel":468},"https://docs.directus.io/reference/files.html#requesting-a-thumbnail",[206],"Directus documentation"," are available.",[212,472,476],{"className":473,"code":474,"language":475,"meta":218,"style":218},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003CNuxtImg\n  provider=\"directus\"\n  src=\"ad514db1-eb90-4523-8183-46781437e7ee\"\n  height=\"512\"\n  fit=\"inside\"\n  quality=\"20\"\n  :modifiers=\"{ withoutEnlargement: 'true' }\"\n/>\n","vue",[220,477,478,486,504,518,532,546,560,590],{"__ignoreMap":218},[223,479,480,483],{"class":225,"line":226},[223,481,482],{"class":244},"\u003C",[223,484,485],{"class":251},"NuxtImg\n",[223,487,488,492,495,498,501],{"class":225,"line":248},[223,489,491],{"class":490},"spNyl","  provider",[223,493,494],{"class":244},"=",[223,496,497],{"class":244},"\"",[223,499,500],{"class":289},"directus",[223,502,503],{"class":244},"\"\n",[223,505,506,509,511,513,516],{"class":225,"line":261},[223,507,508],{"class":490},"  src",[223,510,494],{"class":244},[223,512,497],{"class":244},[223,514,515],{"class":289},"ad514db1-eb90-4523-8183-46781437e7ee",[223,517,503],{"class":244},[223,519,520,523,525,527,530],{"class":225,"line":271},[223,521,522],{"class":490},"  height",[223,524,494],{"class":244},[223,526,497],{"class":244},[223,528,529],{"class":289},"512",[223,531,503],{"class":244},[223,533,534,537,539,541,544],{"class":225,"line":278},[223,535,536],{"class":490},"  fit",[223,538,494],{"class":244},[223,540,497],{"class":244},[223,542,543],{"class":289},"inside",[223,545,503],{"class":244},[223,547,548,551,553,555,558],{"class":225,"line":296},[223,549,550],{"class":490},"  quality",[223,552,494],{"class":244},[223,554,497],{"class":244},[223,556,557],{"class":289},"20",[223,559,503],{"class":244},[223,561,562,565,567,569,571,574,577,579,581,583,585,588],{"class":225,"line":302},[223,563,564],{"class":244},"  :",[223,566,460],{"class":490},[223,568,494],{"class":244},[223,570,497],{"class":244},[223,572,573],{"class":244},"{",[223,575,576],{"class":251}," withoutEnlargement",[223,578,255],{"class":244},[223,580,286],{"class":244},[223,582,388],{"class":289},[223,584,364],{"class":244},[223,586,587],{"class":244}," }",[223,589,503],{"class":244},[223,591,592],{"class":225,"line":308},[223,593,594],{"class":240},"/>\n",[198,596,597,598,603,604,607,608,610],{},"Since Directus exposes the full ",[202,599,602],{"href":600,"rel":601},"https://sharp.pixelplumbing.com/api-operation",[206],"sharp API"," through the ",[220,605,606],{},"transforms"," parameter, we can use it inside our ",[220,609,460],{}," prop:",[212,612,614],{"className":473,"code":613,"language":475,"meta":218,"style":218},"\u003CNuxtImg\n  provider=\"directus\"\n  src=\"ad514db1-eb90-4523-8183-46781437e7ee\"\n  :modifiers=\"{\n    height: '512',\n    withoutEnlargement: 'true',\n    transforms: [['blur', 4], ['negate']]\n  }\"\n/>\n",[220,615,616,622,634,646,658,673,688,721,728],{"__ignoreMap":218},[223,617,618,620],{"class":225,"line":226},[223,619,482],{"class":244},[223,621,485],{"class":251},[223,623,624,626,628,630,632],{"class":225,"line":248},[223,625,491],{"class":490},[223,627,494],{"class":244},[223,629,497],{"class":244},[223,631,500],{"class":289},[223,633,503],{"class":244},[223,635,636,638,640,642,644],{"class":225,"line":261},[223,637,508],{"class":490},[223,639,494],{"class":244},[223,641,497],{"class":244},[223,643,515],{"class":289},[223,645,503],{"class":244},[223,647,648,650,652,654,656],{"class":225,"line":271},[223,649,564],{"class":244},[223,651,460],{"class":490},[223,653,494],{"class":244},[223,655,497],{"class":244},[223,657,245],{"class":244},[223,659,660,663,665,667,669,671],{"class":225,"line":278},[223,661,662],{"class":251},"    height",[223,664,255],{"class":244},[223,666,286],{"class":244},[223,668,529],{"class":289},[223,670,364],{"class":244},[223,672,367],{"class":244},[223,674,675,678,680,682,684,686],{"class":225,"line":296},[223,676,677],{"class":251},"    withoutEnlargement",[223,679,255],{"class":244},[223,681,286],{"class":244},[223,683,388],{"class":289},[223,685,364],{"class":244},[223,687,367],{"class":244},[223,689,690,693,695,697,699,701,703,705,707,709,711,713,715,717,719],{"class":225,"line":302},[223,691,692],{"class":251},"    transforms",[223,694,255],{"class":244},[223,696,402],{"class":240},[223,698,364],{"class":244},[223,700,407],{"class":289},[223,702,364],{"class":244},[223,704,412],{"class":244},[223,706,416],{"class":415},[223,708,419],{"class":240},[223,710,412],{"class":244},[223,712,424],{"class":240},[223,714,364],{"class":244},[223,716,429],{"class":289},[223,718,364],{"class":244},[223,720,434],{"class":240},[223,722,723,726],{"class":225,"line":308},[223,724,725],{"class":244},"  }",[223,727,503],{"class":244},[223,729,730],{"class":225,"line":442},[223,731,594],{"class":240},[733,734,735,736,738,739,743,744,751,752,755],"note",{},"Note that the ",[220,737,606],{}," parameter, as stated in the ",[202,740,469],{"href":741,"rel":742},"https://docs.directus.io/reference/files.html#advanced-transformations",[206],", is basically a list of lists. This is to facilitate the use of those sharp functions, like ",[202,745,748],{"href":746,"rel":747},"https://sharp.pixelplumbing.com/api-operation#normalise",[206],[220,749,750],{},"normalise",", that would need multiple values in input: ",[220,753,754],{},"transforms: [['normalise', 1, 99], ['blur', 4], ['negate']]",".",[757,758,759],"style",{},"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 .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}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 .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":218,"searchDepth":248,"depth":248,"links":761},[762],{"id":460,"depth":248,"text":461},"Nuxt Image with Directus integration.","md",[766],{"label":767,"icon":768,"to":769,"size":770},"Source","i-simple-icons-github","https://github.com/nuxt/image/blob/main/src/runtime/providers/directus.ts","xs",{},true,{"title":80,"description":763},"YVQi9JhWcvVDGIrvaiaoDrAxvMOzcPpOzHdxjYmZaI4",[776,778],{"title":76,"path":77,"stem":78,"description":777,"children":-1},"Nuxt Image has first class integration with Contentful.",{"title":84,"path":85,"stem":86,"description":779,"children":-1},"Nuxt Image has first class integration with Fastly.",1762265120425]