{"_path":"/providers/vercel","_draft":false,"_partial":false,"_empty":false,"title":"Vercel","description":"Optimize images at Vercel's Edge Network","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When deploying your nuxt applications to "},{"type":"element","tag":"a","props":{"href":"https://vercel.com/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Vercel"}]},{"type":"text","value":" platform, image module can use Vercel's "},{"type":"element","tag":"a","props":{"href":"https://vercel.com/docs/edge-network/overview","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Edge Network"}]},{"type":"text","value":" to optimize images on demand."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This provider will be enabled by default in vercel deployments."}]},{"type":"element","tag":"h2","props":{"id":"domains"},"children":[{"type":"text","value":"Domains"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To use external URLs (images not in "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"static/"}]},{"type":"text","value":" directory), hostnames should be whitelisted."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Example:"}]}]},{"type":"element","tag":"code","props":{"code":"export default {\n  image: {\n    domains: [\n      'avatars0.githubusercontent.com'\n    ]\n  }\n}\n","filename":"nuxt.config","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"export default {\n  image: {\n    domains: [\n      'avatars0.githubusercontent.com'\n    ]\n  }\n}\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"sizes"},"children":[{"type":"text","value":"Sizes"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Specify any custom "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"width"}]},{"type":"text","value":" property you use in "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"<nuxt-img>"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"<nuxt-picture>"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"$img"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If a width is not defined, image will fallback to closest possible width."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Example:"}]}]},{"type":"element","tag":"code","props":{"code":"export default {\n  image: {\n    screens: {\n      icon: 40,\n      avatar: 24\n    }\n  }\n}\n","filename":"nuxt.config","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"export default {\n  image: {\n    screens: {\n      icon: 40,\n      avatar: 24\n    }\n  }\n}\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When deploying your nuxt applications to "},{"type":"element","tag":"a","props":{"href":"https://vercel.com/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Vercel"}]},{"type":"text","value":" platform, image module can use Vercel's "},{"type":"element","tag":"a","props":{"href":"https://vercel.com/docs/edge-network/overview","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Edge Network"}]},{"type":"text","value":" to optimize images on demand."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This provider will be enabled by default in vercel deployments."}]},{"type":"element","tag":"h2","props":{"id":"domains"},"children":[{"type":"text","value":"Domains"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To use external URLs (images not in "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"static/"}]},{"type":"text","value":" directory), hostnames should be whitelisted."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Example:"}]}]},{"type":"element","tag":"code","props":{"code":"export default {\n  image: {\n    domains: [\n      'avatars0.githubusercontent.com'\n    ]\n  }\n}\n","filename":"nuxt.config","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f26558"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-137f86"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f26558"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-137f86"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-137f86"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-5d9cf1"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-137f86"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-137f86"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-5d9cf1"},"children":[{"type":"text","value":"domains"}]},{"type":"element","tag":"span","props":{"class":"ct-137f86"},"children":[{"type":"text","value":": ["}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-137f86"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-706a82"},"children":[{"type":"text","value":"'avatars0.githubusercontent.com'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-137f86"},"children":[{"type":"text","value":"    ]"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-137f86"},"children":[{"type":"text","value":"  }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-137f86"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"sizes"},"children":[{"type":"text","value":"Sizes"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Specify any custom "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"width"}]},{"type":"text","value":" property you use in "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"<nuxt-img>"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"<nuxt-picture>"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"$img"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If a width is not defined, image will fallback to closest possible width."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Example:"}]}]},{"type":"element","tag":"code","props":{"code":"export default {\n  image: {\n    screens: {\n      icon: 40,\n      avatar: 24\n    }\n  }\n}\n","filename":"nuxt.config","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f26558"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-137f86"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f26558"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-137f86"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-137f86"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-5d9cf1"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-137f86"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-137f86"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-5d9cf1"},"children":[{"type":"text","value":"screens"}]},{"type":"element","tag":"span","props":{"class":"ct-137f86"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-137f86"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-5d9cf1"},"children":[{"type":"text","value":"icon"}]},{"type":"element","tag":"span","props":{"class":"ct-137f86"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-2b3d40"},"children":[{"type":"text","value":"40"}]},{"type":"element","tag":"span","props":{"class":"ct-137f86"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-137f86"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-5d9cf1"},"children":[{"type":"text","value":"avatar"}]},{"type":"element","tag":"span","props":{"class":"ct-137f86"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-2b3d40"},"children":[{"type":"text","value":"24"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-137f86"},"children":[{"type":"text","value":"    }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-137f86"},"children":[{"type":"text","value":"  }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-137f86"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-2b3d40{color:#D19A66}.ct-706a82{color:#98C379}.ct-5d9cf1{color:#E06C75}.ct-137f86{color:#ABB2BF}.ct-f26558{color:#C678DD}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"domains","depth":2,"text":"Domains"},{"id":"sizes","depth":2,"text":"Sizes"}]}},"_type":"markdown","_id":"content:4.providers:vercel.md","_source":"content","_file":"4.providers/vercel.md","_extension":"md"}