{"id":27854,"date":"2022-07-07T06:00:41","date_gmt":"2022-07-07T06:00:41","guid":{"rendered":"http:\/\/optimize-and-deliver-hosted-images-in-nuxtjs"},"modified":"2022-07-07T06:00:41","modified_gmt":"2022-07-07T06:00:41","slug":"optimize-and-deliver-hosted-images-in-nuxtjs","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/optimize-and-deliver-hosted-images-in-nuxtjs\/","title":{"rendered":"Optimize and Deliver Hosted Images in NuxtJS"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><h1>Introduction<\/h1>\n<p>Images are an essential part of a web application. Most times, there is a need to transform, optimize, and deliver a version of an image. Often, these images are hosted on a remote server which aids reusability.<\/p>\n<p>This article will look at how to fetch, transform, and optimize hosted images in Nuxt.js using <a href=\"https:\/\/cloudinary.com\/\">C<\/a><a href=\"https:\/\/cloudinary.com\/\">loudinary<\/a>.<\/p>\n<h1>Prerequisites<\/h1>\n<p>Understanding this article requires the following:<\/p>\n<ul>\n<li>Installation of Node.js<\/li>\n<li>Basic knowledge of JavaScript<\/li>\n<li>Familiarity with Nuxt.js<\/li>\n<li>A Cloudinary account (sign up for a free account <a href=\"https:\/\/cloudinary.com\/signup\"><\/a><a href=\"https:\/\/cloudinary.com\/signup\">here<\/a>).<\/li>\n<\/ul>\n<h1>Repository<\/h1>\n<p>This article\u2019s source code is available on GitHub:<\/p>\n<p><a href=\"https:\/\/github.com\/folucode\/nuxtjs-image-optimizations\">https:\/\/github.com\/folucode\/nuxtjs-image-optimizations<\/a><\/p>\n<h1>Sandbox<\/h1>\n<p>The completed project is on <a href=\"https:\/\/codesandbox.io\/s\/implement-static-maps-image-embed-with-google-maps-in-next-js-tuv6d4\">CodeS<\/a><a href=\"https:\/\/codesandbox.io\/s\/optimize-and-deliver-hosted-images-on-the-fly-in-nuxtjs-hl7jwl\">andbox<\/a>. Fork it and run the code.<\/p>\n<\/div>\n  \n  <div class=\"wp-block-cloudinary-code-sandbox \">\n    <iframe\n      src=\"https:\/\/codesandbox.io\/embed\/optimize-and-deliver-hosted-images-in-nuxtjs-hl7jwl?theme=dark&amp;codemirror=1&amp;highlights=&amp;editorsize=50&amp;fontsize=14&amp;expanddevtools=0&amp;hidedevtools=0&amp;eslint=0&amp;forcerefresh=0&amp;hidenavigation=0&amp;initialpath=%2F&amp;module=&amp;moduleview=0&amp;previewwindow=&amp;view=&amp;runonclick=1\"\n      height=\"500\"\n      style=\"width: 100%;\"\n      title=\"Create a bar chart in Nuxt.js\"\n      loading=\"lazy\"\n      allow=\"accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking\"\n      sandbox=\"allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts\"\n    ><\/iframe>\n  <\/div>\n\n  <div class=\"wp-block-cloudinary-markdown \"><h1>Creating a Nuxt.js Project<\/h1>\n<p>Use <code>npx create-nuxt-app &lt;project-name&gt;<\/code> to create a new Nuxt.js project. The process of scaffolding the project would provide a list of options, which should look like this:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_2319C81EFEDA2BE82A9667E393AF278DDA26F5AA53CEFDDC2F73AE6DA0FED3D2_1655822880976_TDd2Ya7g.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1364\" height=\"954\"\/><\/p>\n<p>After successful project creation, we will navigate into our directory and start our application by running the following command:<\/p>\n<pre><code>$ cd &lt;project name&gt;\n$ npm run dev\n<\/code><\/pre>\n<p>Nuxt.js will, in turn, start a hot-reloading development environment that is accessible by default at <a href=\"http:\/\/localhost:4000\"><\/a><a href=\"http:\/\/localhost:4000\">http:\/\/localhost:<\/a><a href=\"http:\/\/localhost:3000\">3000<\/a>.<\/p>\n<h1>Allow Image Fetching on Cloudinary<\/h1>\n<p>To fetch images using our Cloudinary account, we ensure that fetched URLs are unrestricted by unchecking the <strong>Fetched URL<\/strong> box in the <strong>Restricted media types<\/strong> section of the <strong>Security<\/strong> tab in our Cloudinary account settings.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-res.cloudinary.com\/image\/upload\/bo_1px_solid_gray\/f_auto\/q_auto\/c_scale,w_400,dpr_2.0\/c_limit,w_2000\/f_auto\/q_auto\/docs\/allow_fetched_images.png\" alt=\"Allow fetched images setting\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"800\" height=\"366\"\/><\/p>\n<h1><strong>Configuring Cloudinary<\/strong><\/h1>\n<p>To use Cloudinary in our Nuxt.js application, we will need to install the <a href=\"https:\/\/cloudinary.nuxtjs.org\/\">Cloudinary Nuxt SDK<\/a> in our project.<\/p>\n<pre><code> npm install @nuxtjs\/cloudinary\n<\/code><\/pre>\n<h2>Configuring <code>nuxt.config<\/code> for Cloudinary<\/h2>\n<p>We need to configure our Nuxt.js application in the <code>nuxt.config<\/code> file before we can use Cloudinary.<\/p>\n<p>To do this, we will need to perform the following steps:<\/p>\n<ol>\n<li>\n<p>Create a <code>.env<\/code> file in the root of our Nuxt.js project and add our Cloudinary <strong>Cloud<\/strong> <strong>name<\/strong>***.*** We can find this by navigating to the <a href=\"https:\/\/cloudinary.com\/console\/\">Cloudinary dashboard<\/a>.<\/p>\n<\/li>\n<li>\n<p>Register the property in our <code>.env<\/code> file like so:<\/p>\n<p>cloudName=\u2019***\u2019<\/p>\n<\/li>\n<li>\n<p>Register the Cloudinary component for global use in the <code>nuxt.config.js<\/code> file by adding <code>'@nuxtjs\/cloudinary'<\/code> in the <code>modules<\/code> section:<\/p>\n<p>modules: [ \u2018@nuxtjs\/cloudinary\u2019 ],<\/p>\n<\/li>\n<li>\n<p>Add a <code>cloudinary<\/code> section in the <code>nuxt.config.js<\/code> like so:<\/p>\n<p>cloudinary: {\ncloudName: process.env.cloudName, \/sandbox\/pages\/index.vue\nuseComponent: true,\n},<\/p>\n<\/li>\n<\/ol>\n<p>The <code>useComponent<\/code> attribute is needed to make Cloudinary components like the <code>cldimage<\/code> and <code>cldtransformation<\/code> available in Nuxt.js.<\/p>\n<p><strong>N****ote<\/strong>: <em>R<strong>eplace all occurrences of \u201c<\/strong><\/em>\u201c with the correct values.*<\/p>\n<h1>Using Fetch URL<\/h1>\n<p>We will use the fetch-url feature provided by Cloudinary to deliver the hosted image. In the <code>components<\/code> folder, we create a new file called <code>Car.vue<\/code> and add the following code to display the hosted image.<\/p>\n<p>This is the image we would be using: <a href=\"https:\/\/cdn.luxe.digital\/media\/20220127155206\/fastest-cars-world-2022-luxe-digital-1-1200x600.jpg.webp\">https:\/\/cdn.luxe.digital\/media\/20220127155206\/fastest-cars-world-2022-luxe-digital-1-1200&#215;600.jpg.webp<\/a>.<\/p>\n<pre><code>&lt;template&gt;\n  &lt;div&gt;\n    &lt;cld-image\n      :public-id=&quot;publicId&quot;\n      type=&quot;fetch&quot;\n      alt=&quot;An image of a car&quot;\n      height=&quot;400&quot;\n      width=&quot;700&quot;\n    &gt;\n    &lt;\/cld-image&gt;\n  &lt;\/div&gt;\n&lt;\/template&gt;\n\n&lt;script&gt;\nexport default {\n  data() {\n    return {\n      publicId:\n        &quot;https:\/\/cdn.luxe.digital\/media\/20220127155206\/fastest-cars-world-2022-luxe-digital-1-1200x600.jpg.webp&quot;,\n    };\n  },\n};\n&lt;\/script&gt;\n<\/code><\/pre>\n<p>The above code snippet uses Cloudinary\u2019s <code>cld-image<\/code> component to display our image and takes several attributes. Since we\u2019re delivering a hosted image, we set the <code>type<\/code> to \u2018fetch.\u2019<\/p>\n<p>We should see the image below in our browser:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_2319C81EFEDA2BE82A9667E393AF278DDA26F5AA53CEFDDC2F73AE6DA0FED3D2_1655908831146_fastest-cars-world-2022-luxe-digital-1-1200x600.jpg.webp\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1200\" height=\"600\"\/><\/p>\n<h1>Applying Transformations to a Hosted Image<\/h1>\n<p>We want to add transformations to the image we just delivered. In the <code>Car.vue<\/code> file, in-between the <code>cld-image<\/code> tag, add the following code snippet:<\/p>\n<pre><code>&lt;template&gt;\n  ...\n      &lt;cld-transformation radius=&quot;80&quot; \/&gt;\n      &lt;cld-transformation effect=&quot;grayscale&quot; \/&gt;\n      &lt;cld-transformation\n        overlay=&quot;text:arial_60:Rimac Nevera C Two&quot;\n        gravity=&quot;south&quot;\n        y=&quot;20&quot;\n      \/&gt;\n  ...\n&lt;\/template&gt;\n<\/code><\/pre>\n<p>The code above rounds the corners of the image, applies a grayscale effect and adds text to the bottom of the resized image.<\/p>\n<p>The resulting image in our browser should look like this:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_2319C81EFEDA2BE82A9667E393AF278DDA26F5AA53CEFDDC2F73AE6DA0FED3D2_1655909943039_greeyyes.webp\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1200\" height=\"600\"\/><\/p>\n<h1>Applying Optimizations to a Hosted Image<\/h1>\n<p>Similar to the image transformation steps, we will add optimization effects to an image.<\/p>\n<p>To do this, let\u2019s create a new file in the components folder called <code>BeachHut.vue<\/code> and then add the code below to it:<\/p>\n<pre><code>&lt;template&gt;\n  &lt;div&gt;\n    &lt;cld-image\n      :public-id=&quot;publicId&quot;\n      type=&quot;fetch&quot;\n      alt=&quot;An image of a cat&quot;\n      height=&quot;400&quot;\n      width=&quot;700&quot;\n    &gt;\n      &lt;cld-transformation effect=&quot;vectorize&quot; \/&gt;\n      &lt;cld-transformation format=&quot;auto&quot; \/&gt;\n      &lt;cld-transformation quality=&quot;100&quot; \/&gt;\n    &lt;\/cld-image&gt;\n  &lt;\/div&gt;\n&lt;\/template&gt;\n&lt;script&gt;\nexport default {\n  data() {\n    return {\n      publicId: &quot;https:\/\/res.cloudinary.com\/demo\/image\/upload\/beach_huts.jpg&quot;,\n    };\n  },\n};\n&lt;\/script&gt;\n<\/code><\/pre>\n<p>And then update the <code>index.vue<\/code> file to accommodate the <code>BeachHut<\/code> component like so:<\/p>\n<pre><code>&lt;template&gt;\n  &lt;div&gt;\n    &lt;Car \/&gt;\n    &lt;BeachHut \/&gt;\n  &lt;\/div&gt;\n&lt;\/template&gt;\n\n&lt;script&gt;\nimport Car from &quot;..\/components\/Car.vue&quot;;\nimport BeachHut from &quot;..\/components\/BeachHut.vue&quot;;\n\nexport default {\n  name: &quot;IndexPage&quot;,\n  components: { Car, BeachHut },\n};\n&lt;\/script&gt;\n<\/code><\/pre>\n<p>The original looks likes this:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_2319C81EFEDA2BE82A9667E393AF278DDA26F5AA53CEFDDC2F73AE6DA0FED3D2_1656885047035_beach_huts_original.jpeg\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"2000\" height=\"1286\"\/><\/p>\n<p>The resulting image after applying the optimization should look like this:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_2319C81EFEDA2BE82A9667E393AF278DDA26F5AA53CEFDDC2F73AE6DA0FED3D2_1655922563178_beach_huts.jpeg\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"2000\" height=\"1286\"\/><\/p>\n<h1>Conclusion<\/h1>\n<p>This article discussed transforming and optimizing images by applying Cloudinary transformation and optimization parameters.<\/p>\n<h1>Further Reading<\/h1>\n<pre><code>- [Cloudinary VueJS documentation](https:\/\/cloudinary.com\/documentation\/vue_integration)\n- [Image transformations](https:\/\/cloudinary.com\/documentation\/vue_image_manipulation)\n- [Cloudinary NuxtJS documentation](https:\/\/cloudinary.nuxtjs.org\/)\n<\/code><\/pre>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":27855,"comment_status":"","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[134,370,372,371,315],"class_list":["post-27854","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-guest-post","tag-image","tag-nuxtjs","tag-under-review","tag-vue"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.6 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Optimize and Deliver Hosted Images in NuxtJS<\/title>\n<meta name=\"description\" content=\"This article will look at how to fetch, transform, and optimize hosted images in Nuxt.js using cloudinary\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/guest_post\/optimize-and-deliver-hosted-images-in-nuxtjs\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Optimize and Deliver Hosted Images in NuxtJS\" \/>\n<meta property=\"og:description\" content=\"This article will look at how to fetch, transform, and optimize hosted images in Nuxt.js using cloudinary\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/guest_post\/optimize-and-deliver-hosted-images-in-nuxtjs\/\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-07-07T06:00:41+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926093\/Web_Assets\/blog\/978036552f6ceeade51cff5fc0c2cd68a7195da8-2560x1440-1_278552f50f\/978036552f6ceeade51cff5fc0c2cd68a7195da8-2560x1440-1_278552f50f.png?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"2560\" \/>\n\t<meta property=\"og:image:height\" content=\"1440\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/optimize-and-deliver-hosted-images-in-nuxtjs\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/optimize-and-deliver-hosted-images-in-nuxtjs\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Optimize and Deliver Hosted Images in NuxtJS\",\"datePublished\":\"2022-07-07T06:00:41+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/optimize-and-deliver-hosted-images-in-nuxtjs\/\"},\"wordCount\":7,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/optimize-and-deliver-hosted-images-in-nuxtjs\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926093\/Web_Assets\/blog\/978036552f6ceeade51cff5fc0c2cd68a7195da8-2560x1440-1_278552f50f\/978036552f6ceeade51cff5fc0c2cd68a7195da8-2560x1440-1_278552f50f.png?_i=AA\",\"keywords\":[\"Guest Post\",\"Image\",\"NuxtJS\",\"Under Review\",\"Vue\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2022\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/optimize-and-deliver-hosted-images-in-nuxtjs\/\",\"url\":\"https:\/\/cloudinary.com\/blog\/guest_post\/optimize-and-deliver-hosted-images-in-nuxtjs\/\",\"name\":\"Optimize and Deliver Hosted Images in NuxtJS\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/optimize-and-deliver-hosted-images-in-nuxtjs\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/optimize-and-deliver-hosted-images-in-nuxtjs\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926093\/Web_Assets\/blog\/978036552f6ceeade51cff5fc0c2cd68a7195da8-2560x1440-1_278552f50f\/978036552f6ceeade51cff5fc0c2cd68a7195da8-2560x1440-1_278552f50f.png?_i=AA\",\"datePublished\":\"2022-07-07T06:00:41+00:00\",\"description\":\"This article will look at how to fetch, transform, and optimize hosted images in Nuxt.js using cloudinary\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/optimize-and-deliver-hosted-images-in-nuxtjs\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/guest_post\/optimize-and-deliver-hosted-images-in-nuxtjs\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/optimize-and-deliver-hosted-images-in-nuxtjs\/#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926093\/Web_Assets\/blog\/978036552f6ceeade51cff5fc0c2cd68a7195da8-2560x1440-1_278552f50f\/978036552f6ceeade51cff5fc0c2cd68a7195da8-2560x1440-1_278552f50f.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926093\/Web_Assets\/blog\/978036552f6ceeade51cff5fc0c2cd68a7195da8-2560x1440-1_278552f50f\/978036552f6ceeade51cff5fc0c2cd68a7195da8-2560x1440-1_278552f50f.png?_i=AA\",\"width\":2560,\"height\":1440},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/optimize-and-deliver-hosted-images-in-nuxtjs\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Optimize and Deliver Hosted Images in NuxtJS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Optimize and Deliver Hosted Images in NuxtJS","description":"This article will look at how to fetch, transform, and optimize hosted images in Nuxt.js using cloudinary","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/guest_post\/optimize-and-deliver-hosted-images-in-nuxtjs\/","og_locale":"en_US","og_type":"article","og_title":"Optimize and Deliver Hosted Images in NuxtJS","og_description":"This article will look at how to fetch, transform, and optimize hosted images in Nuxt.js using cloudinary","og_url":"https:\/\/cloudinary.com\/blog\/guest_post\/optimize-and-deliver-hosted-images-in-nuxtjs\/","og_site_name":"Cloudinary Blog","article_published_time":"2022-07-07T06:00:41+00:00","og_image":[{"width":2560,"height":1440,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926093\/Web_Assets\/blog\/978036552f6ceeade51cff5fc0c2cd68a7195da8-2560x1440-1_278552f50f\/978036552f6ceeade51cff5fc0c2cd68a7195da8-2560x1440-1_278552f50f.png?_i=AA","type":"image\/png"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/optimize-and-deliver-hosted-images-in-nuxtjs\/#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/optimize-and-deliver-hosted-images-in-nuxtjs\/"},"author":{"name":"","@id":""},"headline":"Optimize and Deliver Hosted Images in NuxtJS","datePublished":"2022-07-07T06:00:41+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/optimize-and-deliver-hosted-images-in-nuxtjs\/"},"wordCount":7,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/optimize-and-deliver-hosted-images-in-nuxtjs\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926093\/Web_Assets\/blog\/978036552f6ceeade51cff5fc0c2cd68a7195da8-2560x1440-1_278552f50f\/978036552f6ceeade51cff5fc0c2cd68a7195da8-2560x1440-1_278552f50f.png?_i=AA","keywords":["Guest Post","Image","NuxtJS","Under Review","Vue"],"inLanguage":"en-US","copyrightYear":"2022","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/optimize-and-deliver-hosted-images-in-nuxtjs\/","url":"https:\/\/cloudinary.com\/blog\/guest_post\/optimize-and-deliver-hosted-images-in-nuxtjs\/","name":"Optimize and Deliver Hosted Images in NuxtJS","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/optimize-and-deliver-hosted-images-in-nuxtjs\/#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/optimize-and-deliver-hosted-images-in-nuxtjs\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926093\/Web_Assets\/blog\/978036552f6ceeade51cff5fc0c2cd68a7195da8-2560x1440-1_278552f50f\/978036552f6ceeade51cff5fc0c2cd68a7195da8-2560x1440-1_278552f50f.png?_i=AA","datePublished":"2022-07-07T06:00:41+00:00","description":"This article will look at how to fetch, transform, and optimize hosted images in Nuxt.js using cloudinary","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/optimize-and-deliver-hosted-images-in-nuxtjs\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/guest_post\/optimize-and-deliver-hosted-images-in-nuxtjs\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/optimize-and-deliver-hosted-images-in-nuxtjs\/#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926093\/Web_Assets\/blog\/978036552f6ceeade51cff5fc0c2cd68a7195da8-2560x1440-1_278552f50f\/978036552f6ceeade51cff5fc0c2cd68a7195da8-2560x1440-1_278552f50f.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926093\/Web_Assets\/blog\/978036552f6ceeade51cff5fc0c2cd68a7195da8-2560x1440-1_278552f50f\/978036552f6ceeade51cff5fc0c2cd68a7195da8-2560x1440-1_278552f50f.png?_i=AA","width":2560,"height":1440},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/optimize-and-deliver-hosted-images-in-nuxtjs\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Optimize and Deliver Hosted Images in NuxtJS"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":""}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926093\/Web_Assets\/blog\/978036552f6ceeade51cff5fc0c2cd68a7195da8-2560x1440-1_278552f50f\/978036552f6ceeade51cff5fc0c2cd68a7195da8-2560x1440-1_278552f50f.png?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/27854","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=27854"}],"version-history":[{"count":0,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/27854\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/27855"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=27854"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=27854"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=27854"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}