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