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