DEV Community: Mayank

Google : Gemini CLI is Insane 🚀

Mayank — Sat, 28 Jun 2025 11:37:48 +0000

🚀 Building a Vue 3 App in Minutes with Gemini CLI — No Code, Just Prompts

Imagine building a full-featured Vue 3 application without writing a single line of code manually.

No boilerplate. No file setup. No endless npm install commands.

That’s exactly what I experienced using Gemini CLI — Google’s powerful new AI-powered command-line assistant.

With just a few conversational prompts, it scaffolded a clean, modular, and fully functional Vue app in minutes.

In this blog, I’ll walk you through:

✅ What Gemini CLI is and why it’s a game-changer for developers
⚙️ How I used it to build a real Vue 3 application
💬 The exact prompts I gave
🧩 A look at the generated code
🚀 How you can try it yourself

Whether you’re a frontend developer, a startup founder, or just curious about the future of AI-assisted development — this will open your eyes to what’s now possible.

👉 Skip the setup. Build faster, smarter, cleaner. Let’s dive in.

Check out this quick demo video:

Revolutionizing UI Component Generation: AI-Powered React Components with v0.dev (BETA)

Mayank — Fri, 15 Sep 2023 10:38:14 +0000

Introducing a Game-Changing Tool: Generate UI Components with v0.dev (BETA)

In the ever-evolving world of web development, tools and technologies are constantly emerging to make our lives easier and our workflows more efficient. Today, we're thrilled to introduce you to a groundbreaking tool that's set to revolutionize the way we create UI components: v0.dev.

What is v0.dev?

v0.dev is a cutting-edge tool designed to simplify and expedite the process of generating UI components for web applications. It's currently in its BETA phase, and we can't wait to show you what it can do.

Try it Now!

You can explore this innovative tool at https://v0.dev/. It's incredibly user-friendly, so even if you're not a seasoned developer, you'll be able to dive right in and start generating UI components with ease.

How Does It Work?

v0.dev is built on the foundation of Shadui, a powerful UI component library. It harnesses the capabilities of advanced language models like GPT-3.5 to streamline the component generation process.

Here's a quick overview of how it works:

Input Your Prompt: Begin by inputting your design prompt or description. Whether you have a clear vision or just a rough idea, v0.dev can work with it.
Choose Your Output Framework: You have the flexibility to choose your desired output framework, whether it's React, Vue, Angular, Svelte, or any other JavaScript framework.
Let v0.dev Do the Magic: Once you hit the generate button, v0.dev employs its AI-powered algorithms to create the UI component code that matches your prompt. It's like having an AI co-developer by your side, ready to bring your vision to life.

Why Should You Try v0.dev?

Here are some compelling reasons to give v0.dev a spin:

1. Save Time and Effort

Manually coding UI components can be time-consuming and labor-intensive. v0.dev automates this process, significantly reducing the time and effort required to build UI elements for your web applications.

2. Enhance Collaboration

v0.dev can be a valuable addition to your development workflow, making it easier to collaborate with designers and other team members. You can quickly turn design mockups and descriptions into functioning components.

3. Stay Ahead of the Curve

By leveraging the power of AI and modern web development techniques, v0.dev keeps you at the forefront of the industry. You can experiment with cutting-edge designs and technologies without the steep learning curve.

4. Versatile Output

Whether you're a fan of React, Vue, Angular, Svelte, or any other JavaScript framework, v0.dev has you covered. It adapts to your preferred framework, ensuring seamless integration with your project.

Join Us on This Journey

We're incredibly excited about the potential that v0.dev holds for web developers and designers alike. As we continue to refine and expand its capabilities, your feedback and insights will be invaluable.

Give v0.dev a try today at https://v0.dev/ and experience firsthand the ease and efficiency it brings to UI component generation. We can't wait to see what amazing web applications you'll create with this powerful tool.

Stay tuned for updates, tutorials, and real-world examples of how v0.dev is changing the game in web development. Together, we're shaping the future of UI component creation.

Join us on this exciting journey, and let's build the web of tomorrow, today!

Linkedin Sign In Vue3

Mayank — Sat, 27 May 2023 18:09:49 +0000

Linkedin Sign in ✅

Vue 3

It's client side package for rendering Linkined In Button for any vue app.

To learn more about linked in oAuth2 sign in (https://developer.linkedin.com/)

Install

npm install linkinedin-auth

Live Demo

Check out the live demo of the component in action.

Props

Prop	Default	Description
clientId	*required	Client provided when you sign up for linkinedin developer account and create app.
css		To override the default button class
redirectUri	Default is origin app url `window.location.origin`	Valid redirect uri follow linkedin developer doc.
scope	`r_emailaddress r_liteprofile`	To know more follow linkedin developer doc.
state	default is current date timestamp	A unique string value of your choice that is hard to guess. Used to prevent CSRF. For example, state=DCEeFWf45A53sdfKef424.

How it works?

Import package and add button into your component
Make sure all props are valid.
Someone click on the button it will redirect to linkedin account get the code for you and redirect back to redirect uri. followed with query string.
Take the code and pass it to your backend to validate and grab the user information.

Usage

<template>
    <LinkedInSignin
        :client-id="linkediInClientId"
        css="flex justify-center py-2 px-2 border border-slate-300 rounded shadow-sm bg-white text-sm font-medium text-slate-500 hover:!bg-slate-50 cursor-pointer"
    />
</template>

<script setup>
    import { LinkedInSignin } from "linkedin-auth";
    const linkediInClientId = process.env.LINKINED_AUTH_CLIENT_ID;
</script>

Usage - Update default slot

<template>
    <LinkedInSignin
        :client-id="linkediInClientId"
        css="flex justify-center py-2 px-2 border border-slate-300 rounded shadow-sm bg-white text-sm font-medium text-slate-500 hover:!bg-slate-50 cursor-pointer"
    >
        Login with LinkedIn
    </LinkedInSignin>
</template>

<script setup>
    import { LinkedInSignin } from "linkedin-auth";
    const linkediInClientId = process.env.LINKINED_AUTH_CLIENT_ID;
</script>

Support me

You can buy me coffee ☕️
https://www.buymeacoffee.com/mayankjhawar

Support me at Patreon
https://patreon.com/mayank120

License

MIT

⚡️Razorpay vue - npm package

Mayank — Sun, 21 May 2023 00:28:51 +0000

RazorPay ⚡️ + Vue 3

It's client side package for rendering Razorpay Component for vue app.

Web Integration by Razorpay

Install

npm install razorpay-vue

Live Demo

Check out the live demo of the component in action.

Props

Prop	Default	Description
label	"Pay"	Label for button which will display
css		To customize the css for the button you can add classes
options		It support default razorpay options for more detail follow below usage.

Using Callback url

<template>
    <Razorpay label="Pay with Razorpay" :options="options" />
</template>
<script setup>
   import {Razorpay} from "razorpay-vue3";
   // Razorpay options follow link for more detail https://razorpay.com/docs/payments/payment-gateway/web-integration/standard/build-integration/#12-integrate-with-checkout-on-client-side
   const options = {
    "key": "YOUR_KEY_ID", // Enter the Key ID generated from the Dashboard
    "amount": "50000", // Amount is in currency subunits. Default currency is INR. Hence, 50000 refers to 50000 paise
    "currency": "INR",
    "name": "Acme Corp", //your business name
    "description": "Test Transaction",
    "image": "https://example.com/your_logo",
    "order_id": "order_9A33XWu170gUtm", //This is a sample Order ID. Pass the `id` obtained in the response of Step 1
    "callback_url": "https://eneqd3r9zrjok.x.pipedream.net/",
    "prefill": { //We recommend using the prefill parameter to auto-fill customer's contact information especially their phone number
        "name": "Gaurav Kumar", //your customer's name
        "email": "gaurav.kumar@example.com",
        "contact": "9000090000" //Provide the customer's phone number for better conversion rates
    },
    "notes": {
        "address": "Razorpay Corporate Office"
    },
    "theme": {
        "color": "#3399cc"
    }
}
</script>

Using Handler function

<template>
    <Razorpay label="Pay with Razorpay" :options="options" @success="onSuccess"/>
</template>
<script setup>
   import {Razorpay} from "razorpay-vue3";
   // Razorpay options follow link for more detail https://razorpay.com/docs/payments/payment-gateway/web-integration/standard/build-integration/#12-integrate-with-checkout-on-client-side
   const options = {
    "key": "YOUR_KEY_ID", // Enter the Key ID generated from the Dashboard
    "amount": "50000", // Amount is in currency subunits. Default currency is INR. Hence, 50000 refers to 50000 paise
    "currency": "INR",
    "name": "Acme Corp", //your business name
    "description": "Test Transaction",
    "image": "https://example.com/your_logo",
    "order_id": "order_9A33XWu170gUtm", //This is a sample Order ID. Pass the `id` obtained in the response of Step 1
    "prefill": { //We recommend using the prefill parameter to auto-fill customer's contact information especially their phone number
        "name": "Gaurav Kumar", //your customer's name
        "email": "gaurav.kumar@example.com",
        "contact": "9000090000" //Provide the customer's phone number for better conversion rates
    },
    "notes": {
        "address": "Razorpay Corporate Office"
    },
    "theme": {
        "color": "#3399cc"
    }
};

const onSuccess = (handlerResponse) => {
    console.log(handlerResponse);
    // post it to your server and capture the payment.
}
</script>

Checkout us on Product hunt

https://www.producthunt.com/posts/razorpay-vue

Support me

You can buy me coffee ☕️
https://www.buymeacoffee.com/mayankjhawar

Support me at Patreon
https://patreon.com/mayank120

Nuxt + Tailwind CSS open source component library is out.

Mayank — Tue, 16 May 2023 16:49:16 +0000

[News] Open source alert.

Nuxt UI Labs built open source tailwind component library using headless ui + tailwind css. credit goes to volt team.

Check this out .
Quick start by adding the module to your project with a single line of code!

Documentation: https://ui.nuxtlabs.com
Source Code: https://github.com/nuxtlabs/ui

I will share open source project using the same component library soon. Stay tuned for more.

[New] Vue 3.3 `defineModel`

Mayank — Sun, 14 May 2023 05:50:18 +0000

Previously, for a component to support two-way binding with v-model, it needs to (1) declare a prop and (2) emit a corresponding update:propName event when it intends to update the prop:

<!-- BEFORE -->
<script setup>
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
console.log(props.modelValue)

function onInput(e) {
  emit('update:modelValue', e.target.value)
}
</script>

<template>
  <input :value="modelValue" @input="onInput" />
</template>

3.3 simplifies the usage with the new defineModel macro. The macro automatically registers a prop, and returns a ref that can be directly mutated:

<!-- AFTER -->
<script setup>
const modelValue = defineModel()
console.log(modelValue.value)
</script>

<template>
  <input v-model="modelValue" />
</template>

This feature is experimental and requires explicit opt-in.

for more detail follow this detail RFC - https://github.com/vuejs/rfcs/discussions/503

Isn't it cool 😇

Express Rest API Simple CRUD using SQLite

Mayank — Sat, 18 Mar 2023 19:40:12 +0000

Node.js is a runtime environment that allows JavaScript to be used on the server-side. It is built on the V8 JavaScript engine from Google Chrome and provides a number of features and APIs that make it easy to develop server-side applications with JavaScript. Node.js is designed to be highly scalable and efficient, making it popular for building real-time web applications and other network applications.

Express.js, on the other hand, is a popular web framework for Node.js that provides a set of features and tools for building web applications and APIs. It is built on top of Node.js and provides a simple and flexible way to handle HTTP requests, route URLs, and process data. Express.js is highly customizable and allows developers to build a wide range of web applications, from small, simple websites to large, complex web applications.

In short, Node.js provides the runtime environment for executing JavaScript code on the server-side, while Express.js provides the framework for building web applications and APIs using Node.js. Together, they provide a powerful and flexible platform for developing server-side applications with JavaScript.

Getting Started

To create a new Express.js project, you can follow these steps:

Make sure you have Node.js installed on your machine. You can download it from the official website: https://nodejs.org/

Open your terminal or command prompt and create a new directory for your project:

mkdir my-express-project

Navigate to the newly created directory:

cd my-express-project

Initialize a new Node.js project using the following command:

npm init

This will create a package.json file in your project directory.

Install the express package using the following command:

npm install express

This will download and install the express package and add it to your project's package.json file as a dependency.

Create a new file called app.js or index.js in your project directory and open it in your text editor.

In the app.js or index.js file, add the following code:

const express = require('express');
const app = express();
const port = 3000;

app.get('/', (req, res) => {
  res.send('Hello World!');
});

app.listen(port, () => {
  console.log(`Server listening on port ${port}`);
});

This sets up a simple Express.js server that listens on port 3000 and responds to requests to the root URL (/) with the message "Hello World!".

Start the server by running the following command in your terminal:

node app.js

You should see a message in the terminal indicating that the server is listening on port 3000.

Open your web browser and go to http://localhost:3000. You should see the message "Hello World!" displayed in your browser.
Congratulations! You have now created a simple Express.js project.

Now Let's create API's

Let's install sequalize and sqlite package

SQLite is a free, open-source, lightweight, and self-contained database management system that is used for storing and managing data in a relational database. Unlike other traditional database management systems like MySQL, Oracle, or PostgreSQL, SQLite is a server-less database that is embedded in the application that uses it, making it very easy to use and deploy.

SQLite stores data in a single file, making it a great choice for small to medium-sized applications that do not require a large amount of data storage or a high level of concurrency. It is also cross-platform and runs on various operating systems like Windows, Linux, macOS, and many more.

SQLite supports SQL, which is a standard language for managing relational databases, and provides many features, such as ACID transactions, indexes, triggers, and views, that are commonly found in other database management systems. SQLite is widely used in many applications, including desktop software, mobile applications, web applications, and embedded systems.

npm install sequelize sqlite3

Simple user table name, email and password to perform create user, get all users, edit user, delete user.

const express = require('express');
const bodyParser = require('body-parser');
const { Sequelize, Model, DataTypes } = require('sequelize');

const app = express();
const port = 3000;

// Create Sequelize instance
const sequelize = new Sequelize({
  dialect: 'sqlite',
  storage: './database.sqlite'
});

// Define User model
class User extends Model {}
User.init({
  name: DataTypes.STRING,
  email: DataTypes.STRING,
  password: DataTypes.STRING
}, { sequelize, modelName: 'user' });

// Sync models with database
sequelize.sync();

// Middleware for parsing request body
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

// CRUD routes for User model
app.get('/users', async (req, res) => {
  const users = await User.findAll();
  res.json(users);
});

app.get('/users/:id', async (req, res) => {
  const user = await User.findByPk(req.params.id);
  res.json(user);
});

app.post('/users', async (req, res) => {
  const user = await User.create(req.body);
  res.json(user);
});

app.put('/users/:id', async (req, res) => {
  const user = await User.findByPk(req.params.id);
  if (user) {
    await user.update(req.body);
    res.json(user);
  } else {
    res.status(404).json({ message: 'User not found' });
  }
});

app.delete('/users/:id', async (req, res) => {
  const user = await User.findByPk(req.params.id);
  if (user) {
    await user.destroy();
    res.json({ message: 'User deleted' });
  } else {
    res.status(404).json({ message: 'User not found' });
  }
});

// Start server
app.listen(port, () => {
  console.log(`Server listening on port ${port}`);
});

Congratulation !! 🎉
API's are ready to consume on front end.

If you like it

You can buy me coffee
https://www.buymeacoffee.com/mayankjhawar

Support me at Patreon
https://patreon.com/mayank120

Validate Disposable Email with Regex.

Mayank — Sat, 18 Mar 2023 19:16:47 +0000

Validate Email

Validate email is not only check if email has @ of proper tld. many users create fake account using proxy or disposable email id's and if you want to restrict those user to sign up using fake account or invalid proxy email then you are at right place.

Use the below package and configure in your code for close to accurate validity check of your user email.

Install using npm

npm i advance-validate-email

Methods & Options

const validate = require("advance-validate-email");

validate("john-doe@gmail.com"); // true
validate("john-doe@mailsac.com"); // false
validate("john-doe@mailinator.com"); // false

If you like it

You can buy me coffee
https://www.buymeacoffee.com/mayankjhawar

Support me at Patreon
https://patreon.com/mayank120

License

MIT

Country Phone Extension Search Javascript package.

Mayank — Sat, 18 Mar 2023 17:46:54 +0000

Country Detail

Purpose to provide SVG Flags, Unicode flag (emojis), Country code, Phone extension

Install using npm

npm i country-code-flag-phone-extension-json

Methods & Options

const country = require("country-code-flag-phone-extension-json");

// Get all countries.
country.all();


const options  = {
    filter: "", // If pass as string then full text search on db (name, subregion, region, currency)
    filter: [], // if pass as array filter by ISO2 codes 
    keys: [], // define object keys to minify records,
    sortBy: [], // sort by priortiy of mentioned ISO2 code.
    limit: 5 // limit the returned object
}

Usage

Get all Countries

List all the countries with details object

const country = require("country-code-flag-phone-extension-json");

country.all();

// Return all the country with full detailed object

Filter Countries by ISO2 Code

Filter country by country codes

const country = require("country-code-flag-phone-extension-json");

country.all({
  filter: ["IN", "US"],
});

// Return only two records filter by India and United States

Filter Countries by plain text search

Quick search in database

const country = require("country-code-flag-phone-extension-json");

country.all({
  filter: "india",
});

// Return only one records filter search by india
// It search on name, region, subregion, currency name

Sort by Country

In some case, we want specific country to be on top of the dropdown and followed by all others.

const country = require("country-code-flag-phone-extension-json");

country.all({
  sortBy: ["US", "IN"],
});

// Return all countried sort by US, IN and
// all remaining countries ..

Limit the record by Country

Top 5 records

const country = require("country-code-flag-phone-extension-json");

country.all({
    limit: 5
})
// Return top 5 countries from DB

country.all({
    limit: 5,
    sortBy: ["US", "IN"]
})
// Return top 5 followed by - US, IN
// and reminaing 3 countries from DB

country.all({
    filter: ["IN", "US", "ZW", "YE", "AD"]
    limit: 5,
    sortBy: ["US", "IN"]
})

// Return  5 records followed by - US, IN
// and reminaing 3 filtered (AD, YE, ZW) countries from DB

Minified the filted object or all countried from DV

const country = require("country-code-flag-phone-extension-json");

country.all({
    keys: ["id", "name", "dail_code", "mask", "emoji", "translations.kr"],
    limit: 5
})
// output
/*
{
    "rows": [
        {
            "id": 1,
            "name": "Afghanistan",
            "dail_code": "+93",
            "mask": "+93-##-###-####",
            "emoji": "🇦🇫",
            "translations": {
                "kr": "아프가니스탄"
            }
        },
        {
            "id": 2,
            "name": "Aland Islands",
            "dail_code": "+358",
            "emoji": "🇦🇽",
            "translations": {
                "kr": "올란드 제도"
            }
        },
        {
            "id": 3,
            "name": "Albania",
            "dail_code": "+355",
            "mask": "+355(###)###-###",
            "emoji": "🇦🇱",
            "translations": {
                "kr": "알바니아"
            }
        },
        {
            "id": 4,
            "name": "Algeria",
            "dail_code": "+213",
            "mask": "+213-##-###-####",
            "emoji": "🇩🇿",
            "translations": {
                "kr": "알제리"
            }
        },
        {
            "id": 5,
            "name": "American Samoa",
            "dail_code": "+1684",
            "mask": "+1(684)###-####",
            "emoji": "🇦🇸",
            "translations": {
                "kr": "아메리칸사모아"
            }
        }
    ],
    "count": 5
}
*/

country.all({
    limit: 5,
    sortBy: ["US", "IN"]
})
// Return top 5 followed by - US, IN
// and reminaing 3 countries from DB

country.all({
    filter: ["IN", "US", "ZW", "YE", "AD"]
    limit: 5,
    sortBy: ["US", "IN"]
})

// Return  5 records followed by - US, IN
// and reminaing 3 filtered (AD, YE, ZW) countries from DB

If you like it

You can buy me coffee
https://www.buymeacoffee.com/mayankjhawar

Support me at Patreon
https://patreon.com/mayank120

License

MIT

Greet your visitor

Mayank — Sun, 12 Mar 2023 06:57:29 +0000

Greet your Visitors with Good Morning, Good Afternoon or Good Evening Message using JavaScript

Install using npm

npm install greet-visitor

https://www.npmjs.com/package/greet-visitor

Sample Output - with emoji

Time Range	Output
>= 3 - <= 12	🌞 Good morning
>= 12 - <= 17	🌞 Good afternoon
>= 17 - <= 20	🌓 Good evening
>= 20 - <= 24	🌒 Good night
>= 23 - <= 3	🌚 Oh! working late night

Configurable Default Options

{
    "emoji": true,
    "morning": "Good Morning",
    "noon": "Good Afternoon",
    "evening": "Good Evening",
    "night": "Good Night",
    "midnight": "Oh! working late night",
}

Sample Code

var greet = require("greet-visitor");

greet();
// Based on system default time it will show different messages. as mentioned above

Sample Code with Option Change

var greet = require("greet-visitor");

greet({emoji: false, noon: "Good noon !"});

// Output- at noon
"Good noon !"

// Output- in morning
"Good Morning"

Vue 2.x + Vite + Tailwind CSS + Typescript

Mayank — Thu, 24 Mar 2022 02:29:58 +0000

👋 Hello developers,

I have created boilerplate github template repo, which is on vite, vue 2.x, tailwind css and pure javascript.

I know many of us already switched to vue 3.0 but still for some one who still want to use readymade set up with vite and tailwind using typescript is here checkout the link - https://github.com/mayank30/vite-tailwind-vue2-typescript

Feel free to create PR to enhance the project.

Thank you so much :)

Vue 2.x + Vite + Tailwind CSS + Javascript

Mayank — Wed, 23 Mar 2022 20:32:09 +0000

👋 Hello developers,

I have created boilerplate github template repo, which is on vite, vue 2.x, tailwind css and pure javascript.

I know many of us already switched to vue 3.0 but still for some one who still want to use readymade set up with vite and tailwind here is the repo link - https://github.com/mayank30/vite-tailwind-vue2

Feel free to create PR to enhance the project.

Thank you so much :)