{"id":28189,"date":"2021-12-21T19:20:06","date_gmt":"2021-12-21T19:20:06","guid":{"rendered":"http:\/\/Create-a-holiday-card-generator-in-Nuxt.js"},"modified":"2021-12-21T19:20:06","modified_gmt":"2021-12-21T19:20:06","slug":"create-a-holiday-card-generator-in-nuxt-js","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-holiday-card-generator-in-nuxt-js\/","title":{"rendered":"Create a holiday card generator in Nuxt.js"},"content":{"rendered":"

Greeting cards are pieces of stiff paper or thin cardboard with text, illustrations, or photos, given on special occasions such as birthdays, anniversaries, holidays, e.t.c.<\/p>\n

This post will discuss building a holiday card generator for the Harvest Month, Thanksgiving, and Diwali holidays using Cloudinary<\/a> and Nuxt.js<\/a>. At the end of this tutorial, we will learn how to create holiday cards from images we stored on Cloudinary.<\/p>\n

Cloudinary is a platform on which you can quickly and easily 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

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

Sandbox<\/h2>\n

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

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

GitHub: https:\/\/github.com\/Mr-Malomz\/holiday_card_nuxt<\/a><\/p>\n\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 the media files. 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 holiday_card_nuxt && cd holiday_card_nuxt\n<\/code><\/span><\/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
    project name: <PRESS ENTER>\n    programming langauge: <JAVASCRIPT>\n    package manager: <NPM>\n    UI framework: <TAILWIND CSS>\n    Nuxt.js modules: <AXIOS - PROMISE BASED HTTP CLIENT>\n    Linting tools: <ESLINT, PRETTIER>\n    Testing framework: <NONE>\n    Rendering 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 Next.js project with TailwindCSS called holiday_card_nuxt<\/code>, and navigates into the project directory.<\/p>\n
We proceed to install the @nuxtjs\/cloudinary<\/a> dependency with:<\/p>\n
    npm<\/span> install<\/span> @nuxtjs<\/span>\/cloudinary\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n
Configuring Cloudinary in Nuxt.js<\/strong>\nFirst, 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
\n    modules<\/span>: [\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
useComponent<\/code> flag set to true lets us use the built-in Cloudinary components. Our cloud name is obtained from our Cloudinary dashboard.<\/p>\n
Image sourceing and upload to Cloudinary<\/h2>\n
Next, we download sample images to create our holiday cards. We navigate to the URLs below and download the photos from Unsplash.<\/p>\n
Harvest Month Photos<\/strong><\/p>\n
TailwindCSS<\/a> is a utility-first CSS framework packed with classes to help us style our web page.<\/p>\n