Nowadays, no e-commerce site is complete without a healthy dose of customer feedback. Individual product reviews with an image can significantly impact the customer experience and conversion rate.

Product review with images allows customers to load images for their thoughts and will enable them to share their images.

In this post, we’ll learn how to create product reviews with images in Nuxt.js using Cloudinary as our image hosting service for image upload.

We completed this project in a CodeSandbox. Fork and run it to get started quickly.

https://github.com/Olanetsoft/product-review-nuxtjs

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

It is extensible, with a robust module ecosystem and hooks engine that makes it simple to integrate our 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 as a result of the command. Here are the defaults recommended:

The command creates a Nuxt.js project with TailwindCSS called product-review.

TailwindCSS is a CSS framework containing a lot of classes to help us style our website.

Next, we need to navigate into 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

We need to modify the nuxt.config.js file by adding Cloudinary CDNs to the script section, as shown below:

    head: {
          ...
        link: [
          ...
        ],
        script: [
          {
            src: "https://widget.cloudinary.com/v2.0/global/all.js",
          },
        ],
      },
Code language: JavaScript (javascript)

Next, we need to include Cloudinary’s cloud name and upload preset as an environment variable. To do this, we need to create a .env file in the root directory, and in this file, we need to add the following code:

    NUXT_ENV_CLOUDINARY_CLOUD_NAME=<YOUR CLOUD NAME HERE>
    NUXT_ENV_CLOUDINARY_UPLOAD_PRESET=<UPLOAD PRESET CODE HERE>
Code language: HTML, XML (xml)

We modify the index.vue file in the pages folder to the following code snippet, which contains the basic layout of our application:

https://gist.github.com/Olanetsoft/a306c0e0cf1d600d57f24ae258030381

https://gist.github.com/Olanetsoft/a306c0e0cf1d600d57f24ae258030381

Let’s head over to our browser. We should have something similar to what we have below:

Next, we will implement the upload functionality and submit both comments and images uploaded.

Note: In production, the image URL and comment would probably be stored in a database

Updating the index.vue file:

https://gist.github.com/Olanetsoft/00836c8e26b2e162a4303ccebb3a9cb8

https://gist.github.com/Olanetsoft/00836c8e26b2e162a4303ccebb3a9cb8

In the code snippet above: we

• Created a new div with the condition v-if= "preview" to only display whenever an image and comment is uploaded and submitted successfully
• Created a method called Submit to validate the data input submitted by users
• Created a method createCloudinaryWidget to handle image upload to Cloudinary using the createUploadWidget method from the Cloudinary instance
• Created another method called openCloudinaryWidget that references the createCloudinaryWidget and triggers the widget whenever it’s called
• Added an @click="openCloudinaryWidget" to the Upload button to trigger openCloudinaryWidget function OnClick

After testing our application, we should get something similar to what we have below after uploading an image and submitting a comment.

This post demonstrated how to create a product review with images in Nuxt.js.

We may also find these resources helpful.

• Cloudinary Documentation
• TailwindCSS