What if Vite had its own nest g? Now it does!

🚀 vite-plugin-create just got a fresh update — v1.1.1 is live!

🧩 You can now:
– Generate standalone files (perfect for hooks, utils, etc.)
– Assign a custom basePath for each generator
It’s a small but powerful step toward more flexible scaffolding.
👉 See what’s new: https://github.com/dimatitov/vite-plugin-create/releases/tag/1.1.1
Feedback and ideas are always welcome — let’s make Vite development faster together 💪

📢 Update — v1.0.1 is out now!

The new version includes: custom generators, JS/TS template support, per-generator naming styles, and more. 👉 Check out the new features and see examples

I’ve only recently started sharing articles and documentation publicly.

Previously, all my writing was internal — release notes, docs, research, roadmaps — all within teams.

But after publishing my first Vite plugin, I felt the need to share it with the world. To get feedback. To see if anyone would find it useful. Maybe someone would suggest a feature, spot a bug — or just say “thanks.”

And while writing about it, I realized something: I enjoy this. I was already thinking about the next topic. But let’s get back to the plugin.

How It All Started: Inspired by NestJS

I’ve been a developer for over 5 years — mostly frontend, but I’ve been getting into backend recently too.

It started with Node.js + Express, and then, at work, we launched a project to automate voice calls and analyze transcripts using OpenAI. I chose to build it with NestJS. I was only mildly familiar with it, but had to dive deep.

And then, I ran:

nest g resource

…and boom — a full module appeared.

I literally said out loud:

“Why doesn’t React have something like this?!”

Yes, there are snippets. Yes, some third-party generators exist. But I wanted structure.

I wanted to type a command — and get a scaffolded component. Just like Nest.

The Frontend Pain

Back to a new internal project: a Telegram Web App using Vite + TypeScript + React + Zustand. A simple, small app.

I start coding, and suddenly I’m back at it again:

• Create a folder
• Create Component.tsx
• Add index.ts
• Add props interface
• Import styles
• …and repeat

Eventually, a new page design landed — and I had to do it all over again.

My eye started twitching.

So I wrote a bash script. It scaffolded everything I needed. Made it executable. Called it create-component.

And you know what? I was so happy.

Then came create-store, create-page, and so on. Life got easier.

But there were still problems:

• Every project has slightly different templates
• Folder structure varies
• Sometimes you need something custom — and have to rewrite the script

Especially on legacy projects — one had Angular 1.5 and React mixed in 😵‍💫

Don’t ask.

Vite Deserves nest g

One day I thought:

“I love Vite. Why not build something like nest g resource — customizable and extensible — for it?”

And so vite-plugin-create was born.

A plugin + CLI to quickly generate components, pages, stores, whatever — from your own templates.

Naming? Customizable. Templates? Yours. Command? One.

Building It: Not As Easy As I Thought

I first warmed up with a simple plugin: vite-plugin-import-alias.

It was smaller in scope, helped me get used to publishing, npm, docs, and user feedback.

But I already knew what the next one would be: vite-plugin-create.

The idea looked simple at first. I had my bash scripts. Why not repeat the same logic, just cleaner?

I imagined:

• Templates for files
• A config to define structure, names, and naming styles
• Catch a CLI command like vite create:component Button — and scaffold away

But then came the disappointment

Turns out, Vite has no API to add custom CLI commands.

So vite create:component? Not possible. I really wanted it to feel native, like nest g, but no luck.

The solution: a custom CLI

I added bin/cli.ts, defined commands, and in package.json:

"bin": {
  "vite-create": "./dist/bin/cli.js"
}

Now, everything runs via:

npx vite-create component Button

Not exactly part of Vite’s CLI, but clean, stable, and simple.

Config & Naming

Next step: how should names be formatted?

Components should be PascalCase — but stores or utils? Maybe camelCase or kebab-case.

So I added a fileNameStyle option in the config:

• pascalCase
• camelCase
• kebabCase
• original (leave as typed)

Default is PascalCase, but I plan to let each generator (component, store, etc.) have its own style.

The Config & Templates

One of my goals: make it dead simple and easy to customize.

You shouldn’t need to guess:

“Where do templates go?”
“What format should config be?”

Just run:

npx vite-create init

It creates:

templates/ with a base component
vite-create.config.json with a working example

 {
   "defaultPath": "src",
   "fileNameStyle": "pascalCase",
   "generators": {
     "component": {
       "path": "components/{{name}}",
       "files": {
         "{{name}}.tsx": "templates/component/component.tsx",
         "index.ts": "templates/component/index.ts",
         "{{name}}.module.scss": "templates/component/style.scss"
       }
     }
   }
 }

Templates are just .tsx, .ts, .scss files with Handlebars variables like {{name}}, {{PascalCaseName}}, etc.

 import styles from './{{name}}.module.scss';

 export interface Props {
   className?: string;
 }

 export const {{name}}: React.FC<Props> = ({ className }) => {
   return <div className={styles.root}>{{name}} component</div>;
 };

What vite-plugin-create Can Do (Right Now)

✅ Scaffold any component (or entity) from your templates

✅ Supports .tsx, .scss, .test.tsx, or whatever you want

✅ Works with any naming convention

✅ Lets you define custom generators, like:

npx vite-create store userStore

Or anything you define in the config.

🛣 Roadmap

Here’s what I’m planning next:

• ✅ Full support for custom generators
• 🔀 Choose default format: .tsx or .jsx (maybe via — jsx flag)
• 📁 Template groups — e.g. pages/, widgets/, shared/
• ⚙️ Per-generator naming style (e.g. PascalCase for components, camelCase for hooks)
• 🧰 Possibly: a minimal GUI to edit your config visually — in browser or CLI

If you’re tired of boilerplate and repetitive component creation — give vite-plugin-create a try.

Feedback, ideas, PRs — all welcome.

MIT licensed. Open source. Built with ❤️