{"id":28290,"date":"2022-03-24T21:11:23","date_gmt":"2022-03-24T21:11:23","guid":{"rendered":"http:\/\/build-a-robust-e-commerce-image-gallery-in-nuxtjs"},"modified":"2025-03-08T14:33:58","modified_gmt":"2025-03-08T22:33:58","slug":"build-a-robust-e-commerce-image-gallery-in-nuxtjs","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-robust-e-commerce-image-gallery-in-nuxtjs\/","title":{"rendered":"Build a robust e-commerce image gallery in NuxtJS"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>One of the key factors to high conversion rates on an e-commerce platform is the presence of high-quality product images. When customers can see your product with more precision on its finer details, they are more likely to purchase it.<\/p>\n<p>In this article, you will build a full-featured e-commerce product-image gallery with Nuxtjs and Cloudinary\u2019s Product Gallery widget.<\/p>\n<p><a href=\"http:\/\/\">Nuxtjs<\/a> is an open-source framework built on Vuejs that offers enhancements such as server-side rendering, zero configurations, and an ecosystem of modules that make for a better developer experience.<\/p>\n<h2>Sandbox &amp; GitHub Repo<\/h2>\n<p>Click the link below to view a complete demo of this article on CodeSanbox<\/p>\n<p><a href=\"https:\/\/codesandbox.io\/embed\/nuxtjs-product-zoom-rkso64?fontsize=14&amp;hidenavigation=1&amp;theme=dark\">https:\/\/codesandbox.io\/embed\/nuxtjs-product-zoom-rkso64?fontsize=14&amp;hidenavigation=1&amp;theme=dark<\/a><\/p>\n<\/div>\n\n\n  <div class=\"wp-block-cloudinary-code-sandbox \">\n    <iframe\n      src=\"https:\/\/codesandbox.io\/embed\/nuxtjs-product-zoom-rkso64?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=\"build a robus ecommerce image gallery in nextjs\"\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\n<div class=\"wp-block-cloudinary-markdown \"><p>To view the source code on GitHub, click <a href=\"https:\/\/github.com\/dpkreativ\/nuxtjs-product-zoom\">here<\/a><\/p>\n<h2>Pre-requisites<\/h2>\n<p>This article requires the following:<\/p>\n<ul>\n<li>Knowledge of JavaScript and Vuejs.<\/li>\n<li>A Cloudinary account to manage your product images &#8211; create a free one <a href=\"https:\/\/cloudinary.com\/console\">here<\/a>.<\/li>\n<li>\n<a href=\"https:\/\/classic.yarnpkg.com\/en\/docs\/install\">Yarn<\/a> package manager to handle the node packages used in this project. You\u2019ll need to install <a href=\"https:\/\/nodejs.org\">Nodejs<\/a> first, which comes with <a href=\"https:\/\/docs.npmjs.com\/downloading-and-installing-node-js-and-npm\">npm<\/a>.<\/li>\n<li>Knowing Nuxtjs isn\u2019t a strict requirement, but it\u2019ll be nice to have.<\/li>\n<\/ul>\n<h2>Getting started with <code>create-nuxt-app<\/code><\/h2>\n<p>In your terminal, navigate to the directory where you want to store your project and initialize it using the command <code>create-nuxt-app<\/code>:<\/p>\n<pre><code>npx create-nuxt-app nuxtjs-product-zoom\n<\/code><\/pre>\n<p>Read and respond to the prompts with the recommended options below:<\/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_3ED7C2ADE5A27CEF1FA41CE229211CF19665215DCF43AFCDC17EE51B04EF798D_1644930444325_image.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"944\" height=\"389\"\/><\/p>\n<p>With the project\u2019s successful setup, navigate into it and open it with your preferred code editor.<\/p>\n<h2>Setting up Cloudinary<\/h2>\n<p>On your <a href=\"https:\/\/cloudinary.com\/users\/login\">Cloudinary dashboard<\/a>, click on \u2018Media Library\u2019 and create a new folder named <code>product-images<\/code>:<\/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_3ED7C2ADE5A27CEF1FA41CE229211CF19665215DCF43AFCDC17EE51B04EF798D_1645023080484_Screenshot+2022-02-15+174119.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"742\" height=\"535\"\/><\/p>\n<p>Upload your images to the folder you\u2019ve created. You can use the ones provided for this demo:<\/p>\n<ul>\n<li>\n<a href=\"http:\/\/\">Product 1<\/a>\n<\/li>\n<li>\n<a href=\"http:\/\/\">Product 2<\/a>\n<\/li>\n<li>\n<a href=\"http:\/\/\">Product 3<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/res.cloudinary.com\/dpkreativ\/image\/upload\/v1644943389\/product-images\/pink_knwpns.jpg\">Product 4<\/a>\n<img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_3ED7C2ADE5A27CEF1FA41CE229211CF19665215DCF43AFCDC17EE51B04EF798D_1645023595478_Screenshot+2022-02-15+174548.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1001\" height=\"620\"\/>\n<\/li>\n<\/ul>\n<h2>Working with Cloudinary\u2019s Product Gallery<\/h2>\n<p><a href=\"https:\/\/cloudinary.com\/documentation\/product_gallery\">Product Gallery<\/a> is an interactive widget that enables you to display images on your website or application.\nIt does this using a <code>galleryWidget()<\/code> method that takes in an object with three key parameters:<\/p>\n<ul>\n<li>Your Cloudinary account cloud name<\/li>\n<li>The element that will contain the widget<\/li>\n<li>The media assets (your product images) for the widget.<\/li>\n<\/ul>\n<h3>Set tags<\/h3>\n<p>To specify which media assets to get from Cloudinary, you need to add tags to your product images so you can reference them by their tags.\nClick a product image, and on the sidebar that appears to the right, click on \u2018Metadata\u2019 and add your tag. Click on \u2018Save\u2019 to store the tag.\nIn the same way, you should add all the products you want to display, ensuring they have the same tag name. I recommend naming your tags in camelCase (the same way you name your variables).<\/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_3ED7C2ADE5A27CEF1FA41CE229211CF19665215DCF43AFCDC17EE51B04EF798D_1645187123087_Screenshot+2022-02-18+132511.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"844\" height=\"519\"\/><\/p>\n<h3>Enable client-side asset lists<\/h3>\n<p>To get your media assets from Cloudinary, Product Gallery needs access to your <strong>client-side asset lists<\/strong>. By default, this delivery type is disabled. To enable it, go to \u2018Settings\u2019 and click on the \u2018Security\u2019 tab, then scroll down to \u2018Restricted media types:\u2019<\/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_3ED7C2ADE5A27CEF1FA41CE229211CF19665215DCF43AFCDC17EE51B04EF798D_1645187712245_Screenshot+2022-02-18+133457.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1366\" height=\"622\"\/><\/p>\n<p>Ensure that \u2018Resource list\u2019 is unchecked, then scroll to the bottom of the page and click \u2018Save\u2019.<\/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_3ED7C2ADE5A27CEF1FA41CE229211CF19665215DCF43AFCDC17EE51B04EF798D_1645024108756_Screenshot+2022-02-16+160816.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"794\" height=\"329\"\/><\/p>\n<h3>Create a container for Product Gallery Widget<\/h3>\n<p>In your code editor, open <code>pages\/index.vue<\/code> and update <code>&lt;template&gt;<\/code> with the code below:<\/p>\n<pre><code>&lt;template&gt;\n  &lt;div class=&quot;mx-auto w-full max-w-lg p-5&quot;&gt;\n    &lt;div class=&quot;my-5&quot;&gt;\n      &lt;h2 class=&quot;font-bold text-xl&quot;&gt;Product Gallery Demo&lt;\/h2&gt;\n      &lt;p&gt;Click\/Tap on each image to zoom&lt;\/p&gt;\n    &lt;\/div&gt;\n    &lt;div id=&quot;product-gallery&quot;&gt;&lt;\/div&gt;\n  &lt;\/div&gt;\n&lt;\/template&gt;\n<\/code><\/pre>\n<p>Here, you set up the demo\u2019s UI layout. <code>&lt;div id=&quot;product-gallery&quot;&gt;&lt;\/div&gt;<\/code> is the element that will be referenced by JavaScript to contain our Product Gallery widget.<\/p>\n<h3>Initialize Product Gallery widget<\/h3>\n<p>In <code>static\/<\/code>, create a <code>js\/<\/code> folder with a <code>cloudinary.js<\/code> file and add the following content to it:<\/p>\n<pre><code>const cloudName = 'dpkreativ'\nconst productGallery = cloudinary.galleryWidget({\n  container: '#product-gallery',\n  cloudName: cloudName,\n  mediaAssets: [{ tag: 'handbag' }],\n})\nproductGallery.render()\n<\/code><\/pre>\n<p>In this code:<\/p>\n<ul>\n<li>\n<code>cloudName<\/code> takes the cloud name on your Cloudinary account as a variable<\/li>\n<li>You created a <code>productGallery<\/code> variable that instantiates a <code>cloudinary<\/code> class with a <code>galleryWidget<\/code> method.<\/li>\n<li>\n<code>cloudinary.galleryWidget<\/code> takes in at least three required parameters &#8211; <code>container<\/code>, <code>cloudName<\/code> and <code>mediaAssets<\/code>.<\/li>\n<li>\n<code>container<\/code> references your <code>id=``&quot;``product-gallery``&quot;<\/code> in <code>pages\/index.vue<\/code>\n<\/li>\n<li>\n<code>cloudName<\/code> takes in the value of the cloudName variable you created earlier<\/li>\n<li>\n<code>mediaAssets<\/code> contains an array of assets. <code>{ tag:<\/code> <code>'``handbag``'<\/code> <code>}<\/code> creates an object that contains all media with \u201chandbag\u201d as its tag.<\/li>\n<li>`productGallery.render()&#8220; renders the product gallery widget you\u2019ve just created<\/li>\n<\/ul>\n<h3>Include JavaScript files in <code>**nuxt.config.js**<\/code><\/h3>\n<p>Cloudinary provides a JavaScript file that contains all the functionality required for the Product Gallery widget to work; its URL is <code>https:\/\/product-gallery.cloudinary.com\/all.js<\/code>.\nNavigate to the root folder of your project, open <code>nuxt.config.js<\/code>, and update <code>head<\/code> with the code below:<\/p>\n<pre><code>  head: {\n    title: 'nuxtjs-product-zoom',\n    htmlAttrs: {\n      lang: 'en',\n    },\n    meta: [\n      { charset: 'utf-8' },\n      { name: 'viewport', content: 'width=device-width, initial-scale=1' },\n      { hid: 'description', name: 'description', content: '' },\n      { name: 'format-detection', content: 'telephone=no' },\n    ],\n    link: [{ rel: 'icon', type: 'image\/x-icon', href: '\/favicon.ico' }],\n    script: [\n      {\n        src: 'https:\/\/product-gallery.cloudinary.com\/all.js',\n      },\n      {\n        body: true,\n        src: '\/js\/cloudinary.js',\n      },\n    ],\n  },\n<\/code><\/pre>\n<p>In this code:<\/p>\n<ul>\n<li>You added the <code>script<\/code> property with <code>src<\/code> pointing to Cloudinary\u2019s Product Gallery JavaScript file.<\/li>\n<li>You added another <code>src<\/code> pointing to the <code>\/js\/cloudinary.js<\/code> file you created in your <code>static\/<\/code> folder. The object also contains <code>body: true<\/code>, which tells Nuxt to put the script tag below the body tag in your HTML file.<\/li>\n<\/ul>\n<h2>Run your code<\/h2>\n<p>In your terminal, run <code>yarn dev<\/code> to compile the code and view it on your browser at <code>localhost:3000<\/code><\/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_3ED7C2ADE5A27CEF1FA41CE229211CF19665215DCF43AFCDC17EE51B04EF798D_1645196287476_image.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"850\" height=\"620\"\/><\/p>\n<h2>Conclusion<\/h2>\n<p>In this article, you learned how to build a product image gallery in Nuxtjs using Cloudinary\u2019s Product Gallery widget.\nFor easier customizations on the widget, check out this <a href=\"https:\/\/demo.cloudinary.com\/product-gallery\/?editor\">Product Gallery Demo<\/a> offered by Cloudinary. You can make customizations using its GUI and copy the code for your needs.<\/p>\n<h2>Resources<\/h2>\n<ul>\n<li>\n<a href=\"https:\/\/cloudinary.com\/documentation\/product_gallery\">Cloudinary Product Gallery Documentation<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/support.cloudinary.com\/hc\/en-us\/community\/posts\/360010691299-Product-Gallery-Widget\">Getting images from folders using Cloudinary Product Gallery<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/documentation\/product_gallery_tutorial\">Cloudinary Product Gallery video tutorial<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/documentation\/product_gallery_reference\">Product Gallery API reference<\/a>\n<\/li>\n<\/ul>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":28291,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[134,370,372,371],"class_list":["post-28290","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-guest-post","tag-image","tag-nuxtjs","tag-under-review"],"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>Build a robust e-commerce image gallery in NuxtJS<\/title>\n<meta name=\"description\" content=\"In this article, you will build a full-featured e-commerce product-image gallery with Nuxtjs and Cloudinary\u2019s Product Gallery widget.\" \/>\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\/build-a-robust-e-commerce-image-gallery-in-nuxtjs\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Build a robust e-commerce image gallery in NuxtJS\" \/>\n<meta property=\"og:description\" content=\"In this article, you will build a full-featured e-commerce product-image gallery with Nuxtjs and Cloudinary\u2019s Product Gallery widget.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-robust-e-commerce-image-gallery-in-nuxtjs\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-03-24T21:11:23+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-03-08T22:33:58+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1681924912\/Web_Assets\/blog\/528d6c64a39d04cd612a2fc695e865f0619b05fe-1600x840-1_282914ca2d\/528d6c64a39d04cd612a2fc695e865f0619b05fe-1600x840-1_282914ca2d-png?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"1600\" \/>\n\t<meta property=\"og:image:height\" content=\"840\" \/>\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\/build-a-robust-e-commerce-image-gallery-in-nuxtjs#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-robust-e-commerce-image-gallery-in-nuxtjs\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Build a robust e-commerce image gallery in NuxtJS\",\"datePublished\":\"2022-03-24T21:11:23+00:00\",\"dateModified\":\"2025-03-08T22:33:58+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-robust-e-commerce-image-gallery-in-nuxtjs\/\"},\"wordCount\":8,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-robust-e-commerce-image-gallery-in-nuxtjs#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924912\/Web_Assets\/blog\/528d6c64a39d04cd612a2fc695e865f0619b05fe-1600x840-1_282914ca2d\/528d6c64a39d04cd612a2fc695e865f0619b05fe-1600x840-1_282914ca2d.png?_i=AA\",\"keywords\":[\"Guest Post\",\"Image\",\"NuxtJS\",\"Under Review\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2022\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-robust-e-commerce-image-gallery-in-nuxtjs\/\",\"url\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-robust-e-commerce-image-gallery-in-nuxtjs\",\"name\":\"Build a robust e-commerce image gallery in NuxtJS\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-robust-e-commerce-image-gallery-in-nuxtjs#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-robust-e-commerce-image-gallery-in-nuxtjs#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924912\/Web_Assets\/blog\/528d6c64a39d04cd612a2fc695e865f0619b05fe-1600x840-1_282914ca2d\/528d6c64a39d04cd612a2fc695e865f0619b05fe-1600x840-1_282914ca2d.png?_i=AA\",\"datePublished\":\"2022-03-24T21:11:23+00:00\",\"dateModified\":\"2025-03-08T22:33:58+00:00\",\"description\":\"In this article, you will build a full-featured e-commerce product-image gallery with Nuxtjs and Cloudinary\u2019s Product Gallery widget.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-robust-e-commerce-image-gallery-in-nuxtjs#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-robust-e-commerce-image-gallery-in-nuxtjs\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-robust-e-commerce-image-gallery-in-nuxtjs#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924912\/Web_Assets\/blog\/528d6c64a39d04cd612a2fc695e865f0619b05fe-1600x840-1_282914ca2d\/528d6c64a39d04cd612a2fc695e865f0619b05fe-1600x840-1_282914ca2d.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924912\/Web_Assets\/blog\/528d6c64a39d04cd612a2fc695e865f0619b05fe-1600x840-1_282914ca2d\/528d6c64a39d04cd612a2fc695e865f0619b05fe-1600x840-1_282914ca2d.png?_i=AA\",\"width\":1600,\"height\":840},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-robust-e-commerce-image-gallery-in-nuxtjs#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Build a robust e-commerce image gallery 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":"Build a robust e-commerce image gallery in NuxtJS","description":"In this article, you will build a full-featured e-commerce product-image gallery with Nuxtjs and Cloudinary\u2019s Product Gallery widget.","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\/build-a-robust-e-commerce-image-gallery-in-nuxtjs","og_locale":"en_US","og_type":"article","og_title":"Build a robust e-commerce image gallery in NuxtJS","og_description":"In this article, you will build a full-featured e-commerce product-image gallery with Nuxtjs and Cloudinary\u2019s Product Gallery widget.","og_url":"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-robust-e-commerce-image-gallery-in-nuxtjs","og_site_name":"Cloudinary Blog","article_published_time":"2022-03-24T21:11:23+00:00","article_modified_time":"2025-03-08T22:33:58+00:00","og_image":[{"width":1600,"height":840,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1681924912\/Web_Assets\/blog\/528d6c64a39d04cd612a2fc695e865f0619b05fe-1600x840-1_282914ca2d\/528d6c64a39d04cd612a2fc695e865f0619b05fe-1600x840-1_282914ca2d-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\/build-a-robust-e-commerce-image-gallery-in-nuxtjs#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-robust-e-commerce-image-gallery-in-nuxtjs\/"},"author":{"name":"","@id":""},"headline":"Build a robust e-commerce image gallery in NuxtJS","datePublished":"2022-03-24T21:11:23+00:00","dateModified":"2025-03-08T22:33:58+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-robust-e-commerce-image-gallery-in-nuxtjs\/"},"wordCount":8,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-robust-e-commerce-image-gallery-in-nuxtjs#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924912\/Web_Assets\/blog\/528d6c64a39d04cd612a2fc695e865f0619b05fe-1600x840-1_282914ca2d\/528d6c64a39d04cd612a2fc695e865f0619b05fe-1600x840-1_282914ca2d.png?_i=AA","keywords":["Guest Post","Image","NuxtJS","Under Review"],"inLanguage":"en-US","copyrightYear":"2022","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-robust-e-commerce-image-gallery-in-nuxtjs\/","url":"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-robust-e-commerce-image-gallery-in-nuxtjs","name":"Build a robust e-commerce image gallery in NuxtJS","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-robust-e-commerce-image-gallery-in-nuxtjs#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-robust-e-commerce-image-gallery-in-nuxtjs#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924912\/Web_Assets\/blog\/528d6c64a39d04cd612a2fc695e865f0619b05fe-1600x840-1_282914ca2d\/528d6c64a39d04cd612a2fc695e865f0619b05fe-1600x840-1_282914ca2d.png?_i=AA","datePublished":"2022-03-24T21:11:23+00:00","dateModified":"2025-03-08T22:33:58+00:00","description":"In this article, you will build a full-featured e-commerce product-image gallery with Nuxtjs and Cloudinary\u2019s Product Gallery widget.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-robust-e-commerce-image-gallery-in-nuxtjs#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/guest_post\/build-a-robust-e-commerce-image-gallery-in-nuxtjs"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-robust-e-commerce-image-gallery-in-nuxtjs#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924912\/Web_Assets\/blog\/528d6c64a39d04cd612a2fc695e865f0619b05fe-1600x840-1_282914ca2d\/528d6c64a39d04cd612a2fc695e865f0619b05fe-1600x840-1_282914ca2d.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924912\/Web_Assets\/blog\/528d6c64a39d04cd612a2fc695e865f0619b05fe-1600x840-1_282914ca2d\/528d6c64a39d04cd612a2fc695e865f0619b05fe-1600x840-1_282914ca2d.png?_i=AA","width":1600,"height":840},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-robust-e-commerce-image-gallery-in-nuxtjs#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Build a robust e-commerce image gallery 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\/v1681924912\/Web_Assets\/blog\/528d6c64a39d04cd612a2fc695e865f0619b05fe-1600x840-1_282914ca2d\/528d6c64a39d04cd612a2fc695e865f0619b05fe-1600x840-1_282914ca2d.png?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28290","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=28290"}],"version-history":[{"count":3,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28290\/revisions"}],"predecessor-version":[{"id":37155,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28290\/revisions\/37155"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/28291"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=28290"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=28290"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=28290"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}