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