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 conditionv-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 thecreateUploadWidget
method from the Cloudinary instance - Created another method called
openCloudinaryWidget
that references thecreateCloudinaryWidget
and triggers the widget whenever it’s called - Added an
@click="openCloudinaryWidget"
to the Upload button to triggeropenCloudinaryWidget
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.