vite-plugin-create - Vite plugin to scaffold components, stores, and pages

vite-plugin-create is a Vite plugin and CLI tool for quickly generating components, stores, pages, and other entities. The plugin helps speed up development by utilizing customizable templates.

Why vite-plugin-create?

Tired of repetitive boilerplate? vite-plugin-create is a powerful yet simple Vite plugin and CLI tool designed to save you hours by automating component, page, store, and custom entity generation — fully customizable and scalable for any project size.

---

✨ Features

• Highly flexible and extensible — create your own generators and templates tailored to your workflow.
• Designed for rapid development and zero-copy-paste productivity boost.
• Generate components, pages, stores, or any custom entity using templates.
• Create your own generators in vite-create.config.json.
• Supports file naming styles: PascalCase, camelCase, kebab-case, original.
• Choose between TypeScript or JavaScript on init.
• Automatically creates configuration and templates via vite-create init.
• Generate single file entities (e.g., hooks, utils) by setting a flat "path" in config — no folder creation required.

---

📦 Installation

1npm install vite-plugin-create --save-dev

or

1yarn add vite-plugin-create --dev

---

🔌 Plugin Setup

After installing, import and add the plugin to your Vite config:

1// vite.config.ts
2import { defineConfig } from "vite";
3import react from "@vitejs/plugin-react";
4import vitePluginCreate from "vite-plugin-create";
5
6export default defineConfig({
7  plugins: [react(), vitePluginCreate()],
8});

---

🚀 Usage

1. npx vite-create init

Initializes configuration and templates. You’ll be asked:

• Do you want to use TypeScript?

Based on your choice, the correct config and template files will be added to your project.

2. npx vite-create <generator> <name>

Creates the entity with the given name using the matching generator in config.

Example:

1npx vite-create component Button
2npx vite-create page Home
3npx vite-create custom myThing

---

📁 Folder Structure After Init

templates/
  component/
    component.tsx / .jsx
    style.scss
    index.ts / .js
    test.tsx / .jsx
  page/
    page.tsx / .jsx
    index.ts / .js
    style.scss
  store/
    zustand.ts / .js
vite-create.config.json

---

🛠 Configuration (vite-create.config.json)

Example config:

1{
2  "defaultPath": "src",
3  "templateVars": {
4    "useTypeScript": true,
5    "fileNameStyle": "pascalCase"
6  },
7  "generators": {
8    "component": {
9      "path": "components/{{name}}",
10      "files": {
11        "{{name}}.tsx": "templates/component/component.tsx",
12        "{{name}}.module.scss": "templates/component/style.scss",
13        "index.ts": "templates/component/index.ts"
14      }
15    },
16    "page": {
17      "path": "pages/{{name}}",
18      "files": {
19        "{{name}}.tsx": "templates/page/page.tsx",
20        "{{name}}.module.scss": "templates/page/style.scss",
21        "index.ts": "templates/page/index.ts"
22      }
23    },
24    "store": {
25      "path": "stores/{{name}}",
26      "fileNameStyle": "camelCase",
27      "files": {
28        "{{name}}.ts": "templates/store/zustand.ts"
29      }
30    }
31  }
32}

Custom basePath per generator

If your project structure differs from the default (e.g., you keep components inside UI/components, pages under UI/pages, and hooks in the root), you can override the default base path per generator like so:

1{
2  "defaultPath": "src",
3  "generators": {
4    "component": {
5      "basePath": "src/UI",
6      "path": "components/{{name}}",
7      "files": {
8        "{{name}}.tsx": "templates/component/component.tsx",
9        "index.ts": "templates/component/index.ts",
10        "{{name}}.module.scss": "templates/component/style.scss"
11      }
12    },
13    "page": {
14      "basePath": "src/UI",
15      "path": "pages/{{name}}",
16      "files": {
17        "{{name}}.tsx": "templates/page/page.tsx",
18        "{{name}}.module.scss": "templates/page/style.scss",
19        "index.ts": "templates/page/index.ts"
20      }
21    },
22    "hook": {
23      "path": "hooks",
24      "fileNameStyle": "camelCase",
25      "files": {
26        "{{name}}.ts": "templates/hook/useHook.ts"
27      }
28    }
29  }
30}

This will result in:

src/UI/components/Button/
src/UI/pages/Home/
src/hooks/useAuth.ts

Each generator can fully control its output location.

• Add any custom generator by extending the generators field.
• Template files can use Handlebars placeholders: {{name}}, {{PascalCaseName}}, etc.

1// Example of single file hook generator
2"hook": {
3  "path": "hooks", // generates in src/hooks without folder
4  "fileNameStyle": "camelCase",
5  "files": {
6    "{{name}}.ts": "templates/hook/useHook.ts"
7  }
8}

Then run:

1npx vite-create hook useAuth

This will generate:

src/hooks/useAuth.ts

---

🧪 Custom Generators

You can define and use any generator by name:

1"generators": {
2  "custom": {
3    "path": "customs/{{name}}",
4    "files": {
5      "{{name}}.ts": "templates/custom/index.ts"
6    }
7  }
8}

Then run:

1npx vite-create custom MyUtility

1You can create generators with **any** name you want — not just "custom".  
2Simply add your generator config with a unique name in `vite-create.config.json` and create matching templates.  
3Then run `npx vite-create your-generator-name <entityName>`.
4
5---
6
7## 🛣 Roadmap
8
9- ✅ Custom generators
10- ✅ TypeScript / JavaScript toggle via init prompt
11- ✅ Naming styles per generator
12- ✅ File extensions mapped automatically (.ts/.tsx/.js/.jsx)
13- 📁 Directory-based template support
14- 🧰 Future: simple GUI configurator (in CLI or browser)
15- 🌐 Future: official website with full documentation and interactive playground
16
17---
18
19## 🔧 Dependencies
20
21- `commander`
22- `fs-extra`
23- `handlebars`
24- `inquirer`
25- `typescript`
26
27---
28
29## Contributing & Community
30
31`vite-plugin-create` is 100% open source and thrives thanks to an active community. Your ideas, feedback, and pull requests are always welcome — let’s build the best developer experience together!
32
33## 📜 License
34
35MIT — [opensource.org/licenses/MIT](https://opensource.org/licenses/MIT)

Keywords

Vite plugin, component generator, CLI scaffolding tool, template generator, TypeScript, React, vite-plugin-create