A Vite plugin and CLI tool for scaffolding React components, stores, and pages using customizable templates. Supports TypeScript and modern Vite projects.

`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

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

yarn add vite-plugin-create --dev

🔌 Plugin Setup

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

// vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import vitePluginCreate from "vite-plugin-create";

export default defineConfig({
  plugins: [react(), vitePluginCreate()],
});

🚀 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:

npx vite-create component Button
npx vite-create page Home
npx 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:

{
  "defaultPath": "src",
  "templateVars": {
    "useTypeScript": true,
    "fileNameStyle": "pascalCase"
  },
  "generators": {
    "component": {
      "path": "components/{{name}}",
      "files": {
        "{{name}}.tsx": "templates/component/component.tsx",
        "{{name}}.module.scss": "templates/component/style.scss",
        "index.ts": "templates/component/index.ts"
      }
    },
    "page": {
      "path": "pages/{{name}}",
      "files": {
        "{{name}}.tsx": "templates/page/page.tsx",
        "{{name}}.module.scss": "templates/page/style.scss",
        "index.ts": "templates/page/index.ts"
      }
    },
    "store": {
      "path": "stores/{{name}}",
      "fileNameStyle": "camelCase",
      "files": {
        "{{name}}.ts": "templates/store/zustand.ts"
      }
    }
  }
}

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:

{
  "defaultPath": "src",
  "generators": {
    "component": {
      "basePath": "src/UI",
      "path": "components/{{name}}",
      "files": {
        "{{name}}.tsx": "templates/component/component.tsx",
        "index.ts": "templates/component/index.ts",
        "{{name}}.module.scss": "templates/component/style.scss"
      }
    },
    "page": {
      "basePath": "src/UI",
      "path": "pages/{{name}}",
      "files": {
        "{{name}}.tsx": "templates/page/page.tsx",
        "{{name}}.module.scss": "templates/page/style.scss",
        "index.ts": "templates/page/index.ts"
      }
    },
    "hook": {
      "path": "hooks",
      "fileNameStyle": "camelCase",
      "files": {
        "{{name}}.ts": "templates/hook/useHook.ts"
      }
    }
  }
}

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.

// Example of single file hook generator
"hook": {
  "path": "hooks", // generates in src/hooks without folder
  "fileNameStyle": "camelCase",
  "files": {
    "{{name}}.ts": "templates/hook/useHook.ts"
  }
}

Then run:

npx vite-create hook useAuth

This will generate:

src/hooks/useAuth.ts

🧪 Custom Generators

You can define and use any generator by name:

"generators": {
  "custom": {
    "path": "customs/{{name}}",
    "files": {
      "{{name}}.ts": "templates/custom/index.ts"
    }
  }
}