{"id":28147,"date":"2022-03-23T21:57:46","date_gmt":"2022-03-23T21:57:46","guid":{"rendered":"http:\/\/Create-Image-Loading-Placeholders-in-NuxtJS"},"modified":"2025-02-21T15:58:54","modified_gmt":"2025-02-21T23:58:54","slug":"create-image-loading-placeholders-in-nuxtjs","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/create-image-loading-placeholders-in-nuxtjs\/","title":{"rendered":"Create Image Loading Placeholders"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>In today\u2019s world, where optimization and loading time is crucial for websites, loading placeholders are developed to improve the waiting experience of users on a webpage.<\/p>\n<p>This article will discuss how to create a loading placeholder image that shows a lightweight version of an image, whether pixelated, blurry etc., before the target or original image is displayed.<\/p>\n<p>We will be using <a href=\"https:\/\/nuxtjs.org\">NuxtJS<\/a>, an open-source front-end framework built on top of Vue that features file-system routing, and it delivers both static-site generation (SSG) and on-demand server rendering.<\/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_C86D8408189356C0CDD465B96EAD4211A002BA68297D80A71EAE4F65339137C7_1642924869132_image+loading+placeholder.png\" alt=\"placeholder image\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"2000\" height=\"1050\"\/><\/p>\n<h2>Sandbox<\/h2>\n<p>You can fork and run the completed application in <a href=\"https:\/\/codesandbox.io\/s\/image-placeholder-with-nuxt-situv\">CodeSandbox<\/a>.<\/p>\n<\/div>\n  \n  <div class=\"wp-block-cloudinary-code-sandbox \">\n    <iframe\n      src=\"https:\/\/codesandbox.io\/embed\/image-placeholder-with-nuxt-situv?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=\"image-placehodler-with-nuxt\"\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 \"><p>The source code for this project is available on <a href=\"https:\/\/github.com\/Terieyenike\/nuxt-image-placeholders-with-cloudinary\">GitHub<\/a>.<\/p>\n<h2>Prerequisites<\/h2>\n<p>The requirement for completing this tutorial is experience building with Vue.js and Nuxt.js. To follow through the steps, we need to do the following:<\/p>\n<ul>\n<li>Have <a href=\"https:\/\/nodejs.org\/en\/\">node.js<\/a> installed on our computer. <code>npm<\/code> will be available for installing dependencies with the installation done.<\/li>\n<li>A Cloudinary account for storing and uploading our media assets. Signup for a free account, <a href=\"https:\/\/cloudinary.com\/users\/register\/free\">here<\/a>.<\/li>\n<li>A text editor of our choice.<\/li>\n<\/ul>\n<h2>Dependency installation<\/h2>\n<p>We scaffold a nuxt app in a folder called image-placeholders, using the following terminal command:<\/p>\n<pre><code>`npm init nuxt-app image-placeholders`\n<\/code><\/pre>\n<p>The command above will trigger a set of prompts. And we can choose the following as shown below:<\/p>\n<pre><code>`Project name: accept the default, Press Enter`\n\n\n`Programming language: JAVASCRIPT`\n\n\n`Package manager: Npm`\n\n\n`UI framework: Tailwind CSS`\n\n\n`Nuxt.js modules: N\/A`\n\n\n`Linting tools: N\/A`\n\n\n`Testing framework: None`\n\n\n`Rendering mode: Universal (SSR \/ SSG)`\n\n\n`Deployment target: Static (Static\/Jamstack hosting)`\n\n\n`Development tools: jsconfig.json`\n\n\n`What is your GitHub username? &lt;github-username&gt;`\n\n\n`Version control system: GIT`\n<\/code><\/pre>\n<p>The above command created our project, <strong>image-placeholders.<\/strong> We will be using Tailwind CSS for styling, a utility-based CSS framework that helps build modern websites packed with classes used directly in our markup.<\/p>\n<p>In the project directory, we run the following command to spin up a development server on port 3000.<\/p>\n<pre><code>`npm run dev`\n<\/code><\/pre>\n<h2>Cloudinary Account Details<\/h2>\n<p>We require the cloud name, API key, and API secret to configure Cloudinary in Nuxt. This is retrieved from our Cloudinary dashboard.<\/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_C86D8408189356C0CDD465B96EAD4211A002BA68297D80A71EAE4F65339137C7_1642946017446_Screen+Shot+2022-01-23+at+14.32.29.png\" alt=\"cloudinary dashboard\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1229\" height=\"630\"\/><\/p>\n<h2>Cloudinary configuration<\/h2>\n<p>We require the <code>@nuxtjs\/cloudinary<\/code> module and we install it with the command below:<\/p>\n<p><code>npm install @nuxtjs\/cloudinary<\/code><\/p>\n<p>The nuxtjs\/cloudinary module provides a robust development kit allowing us seamlessly use Cloudinary in Nuxt.js apps.<\/p>\n<p>In the <code>nuxt.config.js<\/code>  file, add  <code>@nuxtjs\/cloudinary<\/code> as a module in the <code>modules<\/code> section.<\/p>\n<p><strong>nuxt.config.js<\/strong><\/p>\n<pre><code>modules: [\n  &quot;@nuxtjs\/cloudinary&quot;\n]\n<\/code><\/pre>\n<p>After that, we need to set configurations for the Cloudinary module within <code>nuxt.config.js<\/code> and add the cloudinary section.<\/p>\n<p><strong>nuxt.config.js<\/strong><\/p>\n<pre><code>modules: [\n  &quot;@nuxtjs\/cloudinary&quot;\n],\n\n\/\/ add this section\ncloudinary: {\n  cloudName: &quot;&lt;your-cloud-name&gt;&quot;,\n  apiKey: &quot;&lt;API-Key&gt;&quot;,\n  apiSecret: &quot;&lt;API-Secret&gt;&quot;,\n  useComponent: true,\n}\n<\/code><\/pre>\n<p>The <code>useComponent<\/code> key set to true lets us use Vue components for images and videos embedded with Cloudinary functionalities.<\/p>\n<h2>Environment Variables<\/h2>\n<p>We create a file <code>.env<\/code> in the root of the folder. Add the variable\u2019s name within the file and set the value to the API key and secret retrieved from our Cloudinary dashboard. This protects critical information from exposure in the codebase.<\/p>\n<p><strong>.env<\/strong><\/p>\n<pre class=\"js-syntax-highlighted\"><code>    NUXT_API_KEY=&lt;insert api key without quotes&gt;\n    NUXT_API_SECRET=&lt;insert api secret without quotes&gt;\n<\/code><\/pre>\n<p>Next, we include the value and name set in the <code>.env<\/code> file into <code>nuxt.config.js<\/code><\/p>\n<p><strong>nuxt.config.js<\/strong><\/p>\n<pre class=\"js-syntax-highlighted\"><code>    modules: [\n      &quot;@nuxtjs\/cloudinary&quot;\n    ],\n  \n    cloudinary: {\n      cloudName: &quot;&lt;your-cloud-name&gt;&quot;,\n      apiKey: process.env.NUXT_API_KEY,\n      apiSecret: process.env.NUXT_API_SECRET,\n      useComponent: true,\n    }\n<\/code><\/pre>\n<h2>Display Image with a placeholder<\/h2>\n<p>First, we upload a sample image to a folder called <code>image-placeholders<\/code> on Cloudinary.<\/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_C86D8408189356C0CDD465B96EAD4211A002BA68297D80A71EAE4F65339137C7_1642955503413_teri.png\" alt=\"uploaded image in cloudinary\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1280\" height=\"398\"\/><\/p>\n<p>Here is the final result of the saved image asset.<\/p>\n<p>With the image stored in Cloudinary, we go to the <code>index.vue<\/code> component and add the following code snippet.<\/p>\n<p><strong>pages\/index.vue<\/strong><\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\">    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">template<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"lg:flex items-center h-screen\"<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"w-full px-8\"<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"md:text-5xl lg:text-4xl font-bold text-stone-800\"<\/span>&gt;<\/span>\n            IMAGE LOADING <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"block\"<\/span>&gt;<\/span>PLACEHOLDER<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">span<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h2<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"md:mb-4 lg:mt-3 text-blue-700\"<\/span>&gt;<\/span>using Cloudinary and Nuxt<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h2<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">cld-image<\/span>\n          <span class=\"hljs-attr\">:public-id<\/span>=<span class=\"hljs-string\">\"publicId\"<\/span>\n          <span class=\"hljs-attr\">loading<\/span>=<span class=\"hljs-string\">\"lazy\"<\/span>\n          <span class=\"hljs-attr\">gravity<\/span>=<span class=\"hljs-string\">\"auto:subject\"<\/span>\n          <span class=\"hljs-attr\">fetchFormat<\/span>=<span class=\"hljs-string\">\"auto\"<\/span>\n          <span class=\"hljs-attr\">quality<\/span>=<span class=\"hljs-string\">\"auto\"<\/span>\n          <span class=\"hljs-attr\">alt<\/span>=<span class=\"hljs-string\">\"Calm teri sitting\"<\/span>\n        &gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">cld-placeholder<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"pixelate\"<\/span> \/&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">cld-image<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">template<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\">\n    <span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> {\n      <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">\"IndexPage\"<\/span>,\n      data() {\n        <span class=\"hljs-keyword\">return<\/span> {\n          <span class=\"hljs-attr\">publicId<\/span>: <span class=\"hljs-string\">\"image-placeholders\/teri\"<\/span>,\n        };\n      },\n    };\n    <\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">style<\/span>&gt;<\/span><span class=\"css\">\n    <span class=\"hljs-selector-class\">.cld-image<\/span> {\n      <span class=\"hljs-attribute\">object-fit<\/span>: cover;\n      <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">10px<\/span>;\n    }\n    <\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">style<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>From the above snippet of code, we did the following:<\/p>\n<ul>\n<li>We included classes in the markup using Tailwind CSS.<\/li>\n<li>Configured the <code>cld-image<\/code> component to deliver and transform our image. The loading attribute is set to lazy load the image and we passed the publicId of the Cloudinary as a prop to the component. Also, in the component, we added the <code>gravity<\/code>, <code>quality<\/code>, <code>fetchFormat<\/code> transformation properties on the image.<\/li>\n<li>Configured the <code>cld-placeholder<\/code> component to display a lightweight image version of the target image with type attributes to define the kind of placeholder the image will use. The different placeholder types are:\n<ul>\n<li>pixelate<\/li>\n<li>vectorize<\/li>\n<li>blur<\/li>\n<li>predominant-color\n<img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_C86D8408189356C0CDD465B96EAD4211A002BA68297D80A71EAE4F65339137C7_1643061603775_Screen+Shot+2022-01-24+at+22.42.13.png\" alt=\"image loading placeholder with pixelate type attribute\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1007\" height=\"514\"\/>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\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_C86D8408189356C0CDD465B96EAD4211A002BA68297D80A71EAE4F65339137C7_1643061667787_Screen+Shot+2022-01-24+at+23.00.44.png\" alt=\"final result: image placeholder\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1269\" height=\"624\"\/><\/p>\n<h2>Conclusion<\/h2>\n<p>In this post, we used the <code>@nuxtjs\/cloudinary<\/code> module to render a pixelated version of an image, while lazy loading the image. This technique provides immense user experience benefits.<\/p>\n<h2>Further Reading<\/h2>\n<ul>\n<li>\n<a href=\"https:\/\/cloudinary.nuxtjs.org\/usage\/vue-components\/\">Vue Cloudinary Components<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/documentation\/vue_image_manipulation\">Image transformations<\/a>\n<\/li>\n<\/ul>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":28148,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[134,186,372,374,371,315],"class_list":["post-28147","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-guest-post","tag-lazy-loading","tag-nuxtjs","tag-performance","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>Create Image Loading Placeholders<\/title>\n<meta name=\"description\" content=\"Image placeholders are a lightweight version of an image that gives the user the impression of a load time, which comes in different forms whether it is pixelated, vectorized, and so on before the target or original image is displayed.\" \/>\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\/create-image-loading-placeholders-in-nuxtjs\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create Image Loading Placeholders\" \/>\n<meta property=\"og:description\" content=\"Image placeholders are a lightweight version of an image that gives the user the impression of a load time, which comes in different forms whether it is pixelated, vectorized, and so on before the target or original image is displayed.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/guest_post\/create-image-loading-placeholders-in-nuxtjs\/\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-03-23T21:57:46+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-21T23:58:54+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1681925300\/Web_Assets\/blog\/e0c4deb00721e48dbb66715fc165b73f27d136fa-1279x717-1_2814879024\/e0c4deb00721e48dbb66715fc165b73f27d136fa-1279x717-1_2814879024-png?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"1279\" \/>\n\t<meta property=\"og:image:height\" content=\"717\" \/>\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\/create-image-loading-placeholders-in-nuxtjs\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-image-loading-placeholders-in-nuxtjs\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Create Image Loading Placeholders\",\"datePublished\":\"2022-03-23T21:57:46+00:00\",\"dateModified\":\"2025-02-21T23:58:54+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-image-loading-placeholders-in-nuxtjs\/\"},\"wordCount\":4,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-image-loading-placeholders-in-nuxtjs\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925300\/Web_Assets\/blog\/e0c4deb00721e48dbb66715fc165b73f27d136fa-1279x717-1_2814879024\/e0c4deb00721e48dbb66715fc165b73f27d136fa-1279x717-1_2814879024.png?_i=AA\",\"keywords\":[\"Guest Post\",\"Lazy Loading\",\"NuxtJS\",\"Performance\",\"Under Review\",\"Vue\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2022\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-image-loading-placeholders-in-nuxtjs\/\",\"url\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-image-loading-placeholders-in-nuxtjs\/\",\"name\":\"Create Image Loading Placeholders\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-image-loading-placeholders-in-nuxtjs\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-image-loading-placeholders-in-nuxtjs\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925300\/Web_Assets\/blog\/e0c4deb00721e48dbb66715fc165b73f27d136fa-1279x717-1_2814879024\/e0c4deb00721e48dbb66715fc165b73f27d136fa-1279x717-1_2814879024.png?_i=AA\",\"datePublished\":\"2022-03-23T21:57:46+00:00\",\"dateModified\":\"2025-02-21T23:58:54+00:00\",\"description\":\"Image placeholders are a lightweight version of an image that gives the user the impression of a load time, which comes in different forms whether it is pixelated, vectorized, and so on before the target or original image is displayed.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-image-loading-placeholders-in-nuxtjs\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/guest_post\/create-image-loading-placeholders-in-nuxtjs\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-image-loading-placeholders-in-nuxtjs\/#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925300\/Web_Assets\/blog\/e0c4deb00721e48dbb66715fc165b73f27d136fa-1279x717-1_2814879024\/e0c4deb00721e48dbb66715fc165b73f27d136fa-1279x717-1_2814879024.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925300\/Web_Assets\/blog\/e0c4deb00721e48dbb66715fc165b73f27d136fa-1279x717-1_2814879024\/e0c4deb00721e48dbb66715fc165b73f27d136fa-1279x717-1_2814879024.png?_i=AA\",\"width\":1279,\"height\":717},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-image-loading-placeholders-in-nuxtjs\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Create Image Loading Placeholders\"}]},{\"@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":"Create Image Loading Placeholders","description":"Image placeholders are a lightweight version of an image that gives the user the impression of a load time, which comes in different forms whether it is pixelated, vectorized, and so on before the target or original image is displayed.","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\/create-image-loading-placeholders-in-nuxtjs\/","og_locale":"en_US","og_type":"article","og_title":"Create Image Loading Placeholders","og_description":"Image placeholders are a lightweight version of an image that gives the user the impression of a load time, which comes in different forms whether it is pixelated, vectorized, and so on before the target or original image is displayed.","og_url":"https:\/\/cloudinary.com\/blog\/guest_post\/create-image-loading-placeholders-in-nuxtjs\/","og_site_name":"Cloudinary Blog","article_published_time":"2022-03-23T21:57:46+00:00","article_modified_time":"2025-02-21T23:58:54+00:00","og_image":[{"width":1279,"height":717,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1681925300\/Web_Assets\/blog\/e0c4deb00721e48dbb66715fc165b73f27d136fa-1279x717-1_2814879024\/e0c4deb00721e48dbb66715fc165b73f27d136fa-1279x717-1_2814879024-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\/create-image-loading-placeholders-in-nuxtjs\/#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-image-loading-placeholders-in-nuxtjs\/"},"author":{"name":"","@id":""},"headline":"Create Image Loading Placeholders","datePublished":"2022-03-23T21:57:46+00:00","dateModified":"2025-02-21T23:58:54+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-image-loading-placeholders-in-nuxtjs\/"},"wordCount":4,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-image-loading-placeholders-in-nuxtjs\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925300\/Web_Assets\/blog\/e0c4deb00721e48dbb66715fc165b73f27d136fa-1279x717-1_2814879024\/e0c4deb00721e48dbb66715fc165b73f27d136fa-1279x717-1_2814879024.png?_i=AA","keywords":["Guest Post","Lazy Loading","NuxtJS","Performance","Under Review","Vue"],"inLanguage":"en-US","copyrightYear":"2022","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-image-loading-placeholders-in-nuxtjs\/","url":"https:\/\/cloudinary.com\/blog\/guest_post\/create-image-loading-placeholders-in-nuxtjs\/","name":"Create Image Loading Placeholders","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-image-loading-placeholders-in-nuxtjs\/#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-image-loading-placeholders-in-nuxtjs\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925300\/Web_Assets\/blog\/e0c4deb00721e48dbb66715fc165b73f27d136fa-1279x717-1_2814879024\/e0c4deb00721e48dbb66715fc165b73f27d136fa-1279x717-1_2814879024.png?_i=AA","datePublished":"2022-03-23T21:57:46+00:00","dateModified":"2025-02-21T23:58:54+00:00","description":"Image placeholders are a lightweight version of an image that gives the user the impression of a load time, which comes in different forms whether it is pixelated, vectorized, and so on before the target or original image is displayed.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-image-loading-placeholders-in-nuxtjs\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/guest_post\/create-image-loading-placeholders-in-nuxtjs\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-image-loading-placeholders-in-nuxtjs\/#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925300\/Web_Assets\/blog\/e0c4deb00721e48dbb66715fc165b73f27d136fa-1279x717-1_2814879024\/e0c4deb00721e48dbb66715fc165b73f27d136fa-1279x717-1_2814879024.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925300\/Web_Assets\/blog\/e0c4deb00721e48dbb66715fc165b73f27d136fa-1279x717-1_2814879024\/e0c4deb00721e48dbb66715fc165b73f27d136fa-1279x717-1_2814879024.png?_i=AA","width":1279,"height":717},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-image-loading-placeholders-in-nuxtjs\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Create Image Loading Placeholders"}]},{"@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":""}]}},"parsely":{"version":"1.1.0","canonical_url":"https:\/\/cloudinary.com\/blog\/guest_post\/create-image-loading-placeholders-in-nuxtjs\/","smart_links":{"inbound":0,"outbound":0},"traffic_boost_suggestions_count":0,"meta":{"@context":"https:\/\/schema.org","@type":"NewsArticle","headline":"Create Image Loading Placeholders","url":"https:\/\/cloudinary.com\/blog\/guest_post\/create-image-loading-placeholders-in-nuxtjs\/","mainEntityOfPage":{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-image-loading-placeholders-in-nuxtjs\/"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925300\/Web_Assets\/blog\/e0c4deb00721e48dbb66715fc165b73f27d136fa-1279x717-1_2814879024\/e0c4deb00721e48dbb66715fc165b73f27d136fa-1279x717-1_2814879024.png?_i=AA&w=150&h=150&crop=1","image":{"@type":"ImageObject","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925300\/Web_Assets\/blog\/e0c4deb00721e48dbb66715fc165b73f27d136fa-1279x717-1_2814879024\/e0c4deb00721e48dbb66715fc165b73f27d136fa-1279x717-1_2814879024.png?_i=AA"},"articleSection":"Uncategorized","author":[],"creator":[],"publisher":{"@type":"Organization","name":"Cloudinary Blog","logo":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA"},"keywords":["guest post","lazy loading","nuxtjs","performance","under review","vue"],"dateCreated":"2022-03-23T21:57:46Z","datePublished":"2022-03-23T21:57:46Z","dateModified":"2025-02-21T23:58:54Z"},"rendered":"<meta name=\"parsely-title\" content=\"Create Image Loading Placeholders\" \/>\n<meta name=\"parsely-link\" content=\"https:\/\/cloudinary.com\/blog\/guest_post\/create-image-loading-placeholders-in-nuxtjs\/\" \/>\n<meta name=\"parsely-type\" content=\"post\" \/>\n<meta name=\"parsely-image-url\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925300\/Web_Assets\/blog\/e0c4deb00721e48dbb66715fc165b73f27d136fa-1279x717-1_2814879024\/e0c4deb00721e48dbb66715fc165b73f27d136fa-1279x717-1_2814879024.png?_i=AA&w=150&amp;h=150&amp;crop=1\" \/>\n<meta name=\"parsely-pub-date\" content=\"2022-03-23T21:57:46Z\" \/>\n<meta name=\"parsely-section\" content=\"Uncategorized\" \/>\n<meta name=\"parsely-tags\" content=\"guest post,lazy loading,nuxtjs,performance,under review,vue\" \/>","tracker_url":"https:\/\/cdn.parsely.com\/keys\/cloudinary.com\/p.js"},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925300\/Web_Assets\/blog\/e0c4deb00721e48dbb66715fc165b73f27d136fa-1279x717-1_2814879024\/e0c4deb00721e48dbb66715fc165b73f27d136fa-1279x717-1_2814879024.png?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28147","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=28147"}],"version-history":[{"count":1,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28147\/revisions"}],"predecessor-version":[{"id":36929,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28147\/revisions\/36929"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/28148"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=28147"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=28147"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=28147"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}