{"id":28518,"date":"2022-04-06T02:45:03","date_gmt":"2022-04-06T02:45:03","guid":{"rendered":"http:\/\/Build-an-e-commerce-product-customization-page-in-Nuxt.js"},"modified":"2022-04-06T02:45:03","modified_gmt":"2022-04-06T02:45:03","slug":"build-an-e-commerce-product-customization-page-in-nuxt-js","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/build-an-e-commerce-product-customization-page-in-nuxt-js\/","title":{"rendered":"E-commerce product customization page in NuxtJS"},"content":{"rendered":"

One of the super-powers of modern e-commerce applications is a meaningful user experience that allows customers to demand tailor-made products and the flexibility to customize such products.<\/p>\n

This post will discuss how to build a customizable product component using Nuxt.js<\/a> and Cloudinary<\/a>. At the end of this tutorial, we will learn how to use Cloudinary robust transformation properties to enhance product customization and experience.<\/p>\n

Nuxt.js is a vue-based frontend development framework that enables functionalities like server-side rendering, static site generation, file-system routing, components auto-import, and API endpoints for backend features.<\/p>\n

Cloudinary is a visual media service we use to upload, store, manage, transform, and deliver images and videos for websites and applications. The platform also offers a vast collection of software development kits (SDKs) for frontend frameworks and libraries.<\/p>\n

Sandbox<\/h2>\n

We completed this project in a CodeSan<\/a>d<\/a>box<\/a>, and you can fork it to run the code.<\/p>\n<\/div>\n \n

\n <\/iframe>\n <\/div>\n\n

Github link here<\/a>.<\/p>\n

Prerequisites<\/h2>\n

The following steps in this post require JavaScript and Vue.js experience. Experience with Nuxt.js isn\u2019t a requirement, but it\u2019s nice to have.<\/p>\n

We also need a Cloudinary account<\/a> to store and transform media assets. Signup<\/strong><\/a> is completely free<\/strong>.<\/p>\n

Getting Started<\/h2>\n

We need to create a Nuxt.js starter project by navigating to the desired directory and running the command below in our terminal.<\/p>\n

    npx create-nuxt-app e_corm_product && cd e_corm_product\n<\/code><\/pre>\n
This command will ask us some questions on how to configure our application. We can answer the questions as shown below:<\/p>\n
Ok to proceed? (y) < PRESS \"y\"<\/span> and<\/span> hit ENTER>\nproject name: <PRESS ENTER>\nprogramming langauge: <JAVASCRIPT>\npackage manager: <NPM>\nUI framework: <TAILWIND CSS>\nNuxt.js modules: <AXIOS - PROMISE BASED HTTP CLIENT>\nLinting tools: <ESLINT, PRETTIER>\nTesting framework: <NONE>\nRendering mode: <UNIVERSAL (SSR\/STATIC<\/span>)\n Deployment target: <STATIC<\/span>\/JAMSTACK HOSTING>\n Deployment tools: <JSCONFIG.JSON>\n Continous integration: <NONE>\n Version control system: <GIT>\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n
The command creates a Nuxt.js project with TailwindCSS called e_corm_product<\/code>, and navigates into the project directory.<\/p>\n
We proceed to install the @nuxtjs\/cloudinary<\/a> dependency with:<\/p>\n
npm install @nuxtjs\/cloudinary\n<\/code><\/pre>\n
Configuring Cloudinary in Nuxt.js<\/strong><\/p>\n
First, we need to modify the nuxt.config.js<\/code> file by adding @nuxtjs\/cloudinary<\/code> as a module in the  modules<\/code> section:<\/p>\n
    modules: [\n        '@nuxtjs\/cloudinary'<\/span>, \/\/add this<\/span>\n      ],\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Next, we need to configure Cloudinary by adding a cloudinary<\/code> section below the modules<\/code> section as shown below:<\/p>\n
    modules: [\n        '@nuxtjs\/cloudinary'<\/span>,\n      ],\n    \n    \/\/add this<\/span>\n    cloudinary<\/span>: {\n        cloudName<\/span>: '<your-cloud-name>'<\/span>,\n        useComponent<\/span>: true<\/span>,\n      },\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
The useComponent<\/code> flag set to true<\/code> lets us use the built-in Cloudinary components. Our cloud name is obtained from our Cloudinary dashboard.<\/p>\n
Image sourcing and upload to Cloudinary<\/h2>\n
Next, we need to upload sample images for products and overlays to create product customization.<\/p>\n
Product Image<\/strong><\/p>\n
TailwindCSS<\/a> is a utility-first CSS framework packed with classes to help us style our web page.<\/p>\n