Customers of modern e-commerce systems anticipate custom-made products and the ability to preview their purchases before making a purchase.

This tutorial will utilize Nuxt to make a product image zoom lens that lets us zoom in on a product image while keeping the expected look and feel after purchase.

The completed project is on Codesandbox. Fork it to get started quickly.

GitHub Repository

https://github.com/Olanetsoft/product-image-zoom-with-nuxt

The knowledge of JavaScript and Vue.js is needed for this post. The knowledge of Nuxt is not required but preferred.

Nuxt provides the bedrock of our Vue.js project, providing structure and flexibility while allowing us to scale the application with confidence.

It is extensible, with a robust module ecosystem and hooks engine that makes it simple to integrate REST or GraphQL endpoints, favorite CMS, CSS frameworks, and other third-party applications.

To create a new project, we will use the command below to scaffold a new project:

    npx create-nuxt-app <project-name>
Code language: HTML, XML (xml)

A series of prompts will appear, and we recommend the following defaults:

Next, we need to navigate the project directory and start the development server using the command below.

    cd <project name> && yarn dev
Code language: HTML, XML (xml)

Nuxt.js will start a hot-reloading development environment accessible by default at http://localhost:3000

Next, we will install the vue-product-zoomer dependency with

    yarn add vue-product-zoomer

To use Vue plugins, we must first create a Nuxt plugin.

In the root directory, we’ll create a plugins folder and a file titled vue-product-zoomer.js with the following code snippet below. This creates a custom plugin in Nuxt.

    import Vue from "vue";
    import ProductZoomer from "vue-product-zoomer";
    
    Vue.use(ProductZoomer);
Code language: JavaScript (javascript)

We will need sample hosted images for our product zoom in different sizes. Here are example image links for thumbs , normal_size, and large_size, respectively.

    thumbs:
    "https://res.cloudinary.com/olanetsoft/image/upload/v1647642978/h1-r3.jpg",
    "https://res.cloudinary.com/olanetsoft/image/upload/v1647644372/h3-r3.jpg",
    "https://res.cloudinary.com/olanetsoft/image/upload/v1647644758/h4-r3.jpg"
    
    normal_size: 
    "https://res.cloudinary.com/olanetsoft/image/upload/v1647642886/h1-r2.jpg",
    "https://res.cloudinary.com/olanetsoft/image/upload/v1647644372/h3-r2.jpg",
    "https://res.cloudinary.com/olanetsoft/image/upload/v1647644758/h4-r2.jpg",
    
    large_size: 
    "https://res.cloudinary.com/olanetsoft/image/upload/v1647642886/h1-r1.jpg",
    "https://res.cloudinary.com/olanetsoft/image/upload/v1647644372/h3-r1.jpg",
    "https://res.cloudinary.com/olanetsoft/image/upload/v1647644758/h4-r1.jpg",
Code language: JavaScript (javascript)

With our project fully set up and configured, we can start building the product image zoom lens.

We’ll create a new file called ProductImage.vue in the component folder and update it with the code snippet below.

    <template>
    <div>
      <p class="text-center text-4xl text-gray-900 font-bold mt-8 pt-8">
        E-commerce product image zoom lens in Nuxtjs
      </p>
    </div>
    </template>
    
    <script>
    export default {
      name: "ProductImage",
      data() {
        return {}
      },
    };
    </script>
Code language: HTML, XML (xml)

Next, we will import the ProductImage component into the pages/index.vue file with the code snippet below.

    <template>
      <ProductImage/>
    </template>
    
    <script>
    export default {
      name: 'IndexPage'
    }
    </script>
Code language: HTML, XML (xml)

Let’s open our browser, and we should see something similar to the image below.

Let us update components/ProductImage.vue with the following GitHub Gist to configure the product image zoomer options.

https://gist.github.com/Chuloo/53ab0d02c9bed53a3fc025be68323b2c

https://gist.github.com/Chuloo/53ab0d02c9bed53a3fc025be68323b2c

In the code snippet above, we

• Added sample image links and returned images data which comprises the thumbs, normal_size, and large_size.
• Configured zoomer options by setting individual configurations required for product image zoom

We can now use the configured zoomer package in the same file with the following snippet below.

    <template>
    <div>
      // ...
      <div
        class="relative flex items-top justify-center mt-16 sm:items-center sm:pt-0"
      >
        <ProductZoomer :base-images="images" :base-zoomer-options="zoomerOptions" />
      </div>
    </div>
    </template>
    
    <script>
    export default {
      name: "ProductImage",
      data() {
        return {
          // ...
        }
      },
    };
    </script>

Code language: HTML, XML (xml)

After testing our application, we should get something similar to what we have below.

https://www.loom.com/share/02fe71663f2941b28badb5f687bac579

This article addressed how to build an e-commerce product image zoom lens in Nuxtjs.

We may find these resources helpful.

• Vue Product Image Zoomer
• Nuxtjs